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>标签：
document.getElementsByTagName("div");
获得id="demo"的标签内部的所有<div>标签：
document.getElementById("demo").getElementsByTagName("div");
举例，计算所有<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（根节点）开始寻找，还可以从任何其他元素节点开始寻找。
下一节