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">我是&lt;div&gt;标签</div>
    <p id="demo_p">我是&lt;P&gt;标签</p>
    <h5 id="demo_h5">我是&lt;h5&gt;标签</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>

请看下面的演示

QQ截图20161013091511.png

QQ截图20161013091518.png

QQ截图20161013091525.png

QQ截图20161013091533.png

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 个&lt;div&gt;标签</div>
    <div>我是第 2 个&lt;div&gt;标签</div>
    <div>我是第 3 个&lt;div&gt;标签</div>
    <div>我是第 4 个&lt;div&gt;标签
        <div>我是第 5 个&lt;div&gt;标签</div>
        <div>我是第 6 个&lt;div&gt;标签</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(根节点)开始寻找,还可以从任何其他元素节点开始寻找。

继续学习
||
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>HTML DOM树型结构图</title> <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> </head> <body> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

弹指间学会JavaScript 教程