Javascript取得DOM節點
取得DOM節點的方法有很多,可以根據 id屬性 、 標籤名稱 獲取,也可以取得子節點、父輩節點、上個節點和下個節點。
本節講解根據HTML標籤的id屬性和標籤名稱來取得節點。
getElementById( )方法
根據HTML標籤的id屬性來取得DOM節點請使用 getElementById( ) 方法。該方法傳回一個節點物件。
語法:
document.getElementById(id)
其中,id 為HTML標籤的 id 屬性。
例如,得到id="demo"的節點的語句為:
該語句的回傳值為 [ object HTMLDivElement ] (元素節點物件)。
舉例,取得幾個典型的元素節點:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>HTML DOM树型结构图</title> <div id="demo_div">我是<div>标签</div> <p id="demo_p">我是<P>标签</p> <h5 id="demo_h5">我是<h5>标签</h5> <script type="text/javascript"> function getNode(ele){ alert( "获取到的元素节点:"+ele+"\n"+ "id属性:"+ele.getAttribute("id")+"\n"+ "节点类型:"+ele.nodeType+"\n"+ "文本内容:"+ele.firstChild.nodeValue ); } document.getElementById("demo_div").onclick=function(){ getNode(this); // this 指向当前发生鼠标单击事件的节点 } document.getElementById("demo_p").onclick=function(){ getNode(this); // this 指向当前发生鼠标单击事件的节点 } document.getElementById("demo_h5").onclick=function(){ getNode(this); // this 指向当前发生鼠标单击事件的节点 } </script> </head> <body> </body> </html>
請看下面的示範
##getElementsByTagName( )方法
根據HTML標籤名稱來取得DOM節點請使用getElementsByTagName( ) 方法。此方法將得到的元素節點作為一個陣列傳回。語法:
nodeObject.getElementsByTagName(tagName)
其中,nodeObject 為元素節點,tagName 為HTML標籤的名稱。
注意:getElementsByTagName() 方法可以尋找整個 HTML 文件中的所有節點,也可以尋找某個節點的子節點,使用時必須要指定尋找範圍,即指明 nodeObject 。
例如,取得HTML文件中所有的<div>標籤:
<div id="demo2"> <div>我是第 1 个<div>标签</div> <div>我是第 2 个<div>标签</div> <div>我是第 3 个<div>标签</div> <div>我是第 4 个<div>标签 <div>我是第 5 个<div>标签</div> <div>我是第 6 个<div>标签</div> </div> </div>
<script type="text/javascript"> // 使用 getElementsByTagName() 方法获得 id="demo2" 的标签内部的所有 <div> 标签 var nodeArr=document.getElementById("demo2").getElementsByTagName("div"); var len=nodeArr.length; var nodeStr=""; for(i=0;i<len;i++){ nodeStr+="第 "+(i+1)+" 个节点的文本是:"+nodeArr[i].firstChild.nodeValue+"\n"; } document.getElementById("demo2").onclick=function(){ alert( "节点个数:"+len+"\n\n"+ "节点文本:\n"+nodeStr ); } </script>
注意:
#getElementById( ) 是document (根節點)的一個方法,其他元素節點不能使用該方法。因為 id 屬性在整個HTML文件中是唯一的,因此必須從根節點開始尋找。
getElementsByTagName() 是所有元素節點的方法,不僅 document(根節點)可以使用,其他節點也可以使用。所以,根據HTML標籤名稱來取得DOM節點不僅可以從 document(根節點)開始尋找,還可以從任何其他元素節點開始尋找。