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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。