HTML DOM Source用法及代碼示例

HTML中的Source對象代表HTML元素。可以使用getElementById()訪問元素，並可以使用document.createElement()方法創建元素。

源對象的屬性：

media:這將返回元素中media屬性的值。
src:這將返回一個元素中src屬性的值。
type:這將返回元素中type屬性的值。

示例1：訪問源對象

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            text-align:center; 
        } 
          
        h1 { 
            color:green; 
        } 
    </style> 
  
  </head> 
  
        <body> 
            <h1>GeeksforGeeks</h1> 
            <h2>HTML DOM Source Object</h2> 
            <h3>An example of accessing a source element</h3> 
  
            <audio controls> 
                <source id="mySource" 
                        src="gameover.wav"
                        type="audio/mpeg"> 
                
                <source src="gameover.ogg" 
                        type="audio/ogg">  
              Your browser does not support the audio element. 
            </audio> 
  
            <p>Click the button to get the  
              location of the audio file.</p> 
  
            <button onclick="myFunction()"> 
              Get Source 
           </button> 
  
            <p id="demo"></p> 
  
            <script> 
                function myFunction() { 
                    
                    var x = document.getElementById( 
                      "mySource").src; 
                    document.getElementById( 
                      "demo").innerHTML = x; 
                } 
            </script> 
  
        </body> 
  
</html>

輸出：

示例-2：創建源對象。

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            text-align:center; 
        } 
          
        h1 { 
            color:green; 
        } 
    </style> 
  
    <head> 
  
        <body> 
            <h1>GeeksforGeeks</h1> 
            <h2>HTML DOM Source Object</h2> 
            
            <h3>An example of creating a source element 
          </h3> 
            
            <p>Click the button to create the source element. 
          </p> 
  
            <audio controls id="myAudio" autoplay> 
              Your browser does not support  
              the audio element. 
            </audio> 
            <br> 
  
            <p id="demo"></p> 
  
            <button onclick="myFunction()"> 
              Create 
          </button> 
  
            <script> 
                function myFunction() { 
                    
                    var x = document.createElement("SOURCE"); 
                    x.setAttribute("src", "gameover.wav"); 
                    x.setAttribute("type", "audio/mpeg"); 
                    document.getElementById( 
                      "myAudio").appendChild(x); 
  
                    var y = document.createElement("SOURCE"); 
                    y.setAttribute("src", "gameover.ogg"); 
                    y.setAttribute("type", "audio/ogg"); 
                    document.getElementById("myAudio").appendChild(y); 
                    document.getElementById("demo").innerHTML =  
                      "The audio player now works."; 
                } 
            </script> 
  
        </body> 
  
</html>

輸出：

支持的瀏覽器：

穀歌瀏覽器
火狐瀏覽器
Edge
Safari
Opera

相關用法

注：本文由純淨天空篩選整理自apeksharustagi1998大神的英文原創作品 HTML | DOM Source Object。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。