JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

Javascript获取DOM节点

对DOM节点进行操作之前,首先要获取DOM节点。

获取DOM节点的方法有很多,可以根据 id属性 、 标签名称 获取,也可以获取子节点、父辈节点、上个节点和下个节点。

本节讲解根据HTML标签的id属性和标签名称来获取节点。

getElementById( )方法

根据HTML标签的id属性来获取DOM节点请使用 getElementById( ) 方法。该方法返回一个节点对象。

语法:
    document.getElementById(id)
其中,id 为HTML标签的 id 属性。

例如,获得id="demo"的节点的语句为:
document.getElementById("demo");
该语句的返回值为 [ object HTMLDivElement ] (元素节点对象)。

举例,获取几个典型的元素节点:
<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>

请看下面的演示(点击即可演示):
我是<div>标签

我是<P>标签

我是<h5>标签

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>

请看下面的演示(点击即可演示):
我是第 1 个<div>标签
我是第 2 个<div>标签
我是第 3 个<div>标签
我是第 4 个<div>标签
我是第 5 个<div>标签
我是第 6 个<div>标签

注意:
  • getElementById( ) 是 document (根节点)的一个方法,其他元素节点不能使用该方法。因为 id 属性在整个HTML文档中是唯一的,因此必须从根节点开始寻找。
  • getElementsByTagName() 是所有元素节点的方法,不仅 document(根节点)可以使用,其他节点也可以使用。所以,根据HTML标签名称来获取DOM节点不仅可以从 document(根节点)开始寻找,还可以从任何其他元素节点开始寻找。