Javascript獲取DOM節(jié)點(diǎn)
獲取DOM節(jié)點(diǎn)的方法有很多，可以根據(jù) id屬性 、 標(biāo)簽名稱 獲取，也可以獲取子節(jié)點(diǎn)、父輩節(jié)點(diǎn)、上個(gè)節(jié)點(diǎn)和下個(gè)節(jié)點(diǎn)。
本節(jié)講解根據(jù)HTML標(biāo)簽的id屬性和標(biāo)簽名稱來獲取節(jié)點(diǎn)。
getElementById( )方法
根據(jù)HTML標(biāo)簽的id屬性來獲取DOM節(jié)點(diǎn)請(qǐng)使用 getElementById( ) 方法。該方法返回一個(gè)節(jié)點(diǎn)對(duì)象。
語法：
? ??document.getElementById(id)
其中，id 為HTML標(biāo)簽的 id 屬性。
例如，獲得id="demo"的節(jié)點(diǎn)的語句為：
該語句的返回值為 [ object HTMLDivElement ] （元素節(jié)點(diǎn)對(duì)象）。
舉例，獲取幾個(gè)典型的元素節(jié)點(diǎn)：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML DOM樹型結(jié)構(gòu)圖</title>
<div id="demo_div">我是<div>標(biāo)簽</div>
<p id="demo_p">我是<P>標(biāo)簽</p>
<h5 id="demo_h5">我是<h5>標(biāo)簽</h5>
<script type="text/javascript">
function getNode(ele){
alert(
"獲取到的元素節(jié)點(diǎn)："+ele+"\n"+
"id屬性："+ele.getAttribute("id")+"\n"+
"節(jié)點(diǎn)類型："+ele.nodeType+"\n"+
"文本內(nèi)容："+ele.firstChild.nodeValue
);
}
document.getElementById("demo_div").onclick=function(){
getNode(this); // this 指向當(dāng)前發(fā)生鼠標(biāo)單擊事件的節(jié)點(diǎn)
}
document.getElementById("demo_p").onclick=function(){
getNode(this); // this 指向當(dāng)前發(fā)生鼠標(biāo)單擊事件的節(jié)點(diǎn)
}
document.getElementById("demo_h5").onclick=function(){
getNode(this); // this 指向當(dāng)前發(fā)生鼠標(biāo)單擊事件的節(jié)點(diǎn)
}
</script>
</head>
<body>
</body>
</html>請(qǐng)看下面的演示
getElementsByTagName( )方法
根據(jù)HTML標(biāo)簽名稱來獲取DOM節(jié)點(diǎn)請(qǐng)使用 getElementsByTagName( ) 方法。該方法將得到的元素節(jié)點(diǎn)作為一個(gè)數(shù)組返回。
語法：
? ??nodeObject.getElementsByTagName(tagName)
其中，nodeObject 為元素節(jié)點(diǎn)，tagName 為HTML標(biāo)簽的名稱。
注意：getElementsByTagName() 方法既可以查找整個(gè) HTML 文檔中的所有節(jié)點(diǎn)，也可以查找某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)，使用時(shí)必須要指定查找范圍，即指明 nodeObject 。
例如，獲得HTML文檔中所有的<div>標(biāo)簽：
document.getElementsByTagName("div");
獲得id="demo"的標(biāo)簽內(nèi)部的所有<div>標(biāo)簽：
document.getElementById("demo").getElementsByTagName("div");
舉例，計(jì)算所有<div>標(biāo)簽的個(gè)數(shù)，并顯示它的文本：
<div id="demo2"> <div>我是第 1 個(gè)<div>標(biāo)簽</div> <div>我是第 2 個(gè)<div>標(biāo)簽</div> <div>我是第 3 個(gè)<div>標(biāo)簽</div> <div>我是第 4 個(gè)<div>標(biāo)簽 <div>我是第 5 個(gè)<div>標(biāo)簽</div> <div>我是第 6 個(gè)<div>標(biāo)簽</div> </div> </div>
<script type="text/javascript">
// 使用 getElementsByTagName() 方法獲得 id="demo2" 的標(biāo)簽內(nèi)部的所有 <div> 標(biāo)簽
var nodeArr=document.getElementById("demo2").getElementsByTagName("div");
var len=nodeArr.length;
var nodeStr="";
for(i=0;i<len;i++){
nodeStr+="第 "+(i+1)+" 個(gè)節(jié)點(diǎn)的文本是："+nodeArr[i].firstChild.nodeValue+"\n";
}
document.getElementById("demo2").onclick=function(){
alert(
"節(jié)點(diǎn)個(gè)數(shù)："+len+"\n\n"+
"節(jié)點(diǎn)文本：\n"+nodeStr
);
}
</script>注意：
getElementById( ) 是 document （根節(jié)點(diǎn)）的一個(gè)方法，其他元素節(jié)點(diǎn)不能使用該方法。因?yàn)?id 屬性在整個(gè)HTML文檔中是唯一的，因此必須從根節(jié)點(diǎn)開始尋找。
getElementsByTagName() 是所有元素節(jié)點(diǎn)的方法，不僅 document（根節(jié)點(diǎn)）可以使用，其他節(jié)點(diǎn)也可以使用。所以，根據(jù)HTML標(biāo)簽名稱來獲取DOM節(jié)點(diǎn)不僅可以從 document（根節(jié)點(diǎn)）開始尋找，還可以從任何其他元素節(jié)點(diǎn)開始尋找。
