JavaScript入门教程

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

专题分析

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

学习助手

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

JavaScript获取节点类型、节点名称和节点值

DOM节点信息包括节点类型(nodeType)节点名称(nodeName)节点值(nodeValue)

节点类型

DOM节点中,每个节点都拥有不同的类型。

W3C规范中常用的 DOM节点类型有以下几种:
节点类型 说明
元素节点 每一个HTML标签都是一个元素节点,如 <div> 、 <p>、<ul>等 1
属性节点 元素节点(HTML标签)的属性,如 id 、class 、name 等。 2
文本节点 元素节点或属性节点中的文本内容。 3
注释节点 表示文档注释,形式为<!-- comment text -->。 8
文档节点 表示整个文档(DOM 树的根节点,即 document ) 9

获取节点类型的语法:
    nodeObject.nodeType
其中,nodeObject 为DOM节点(节点对象)。该属性返回以数字表示的节点类型,例如,元素节点返回 1,属性节点返回 2 。

例如,获取id="demo"的<div>标签的节点类型:
document.getElementById("demo").nodeType;
该语句的返回值为 1 。

举例,获取元素节点和文本节点的类型值:
<div id="demo1">点击这里显示节点类型</div>
<script type="text/javascript">
    document.getElementById("demo1").onclick=function(){
        var divType=this.nodeType;
        var textType=this.firstChild.nodeType;   //  this 指当前发生事件的HTML元素,这里是<div>标签
        alert(
            "<div>标签的节点类型是:"+divType+"\n"+
            "<div>标签内部文本的节点类型是:"+textType
        );
    }
</script>

请看演示:
点击这里显示节点类型

节点名称

节点名称就是DOM节点的名字,不同类型的节点对应不同的节点名称。
节点类型 节点名称
元素节点 HTML标签的名称(大写)
属性节点 属性的名称
文本节点 它的值永远是#text
文档节点 它的值永远是#document

获取节点名称的语法:
    nodeObject.nodeName
其中,nodeObject 为DOM节点(节点对象)。

例如,获取id="demo"的<div>标签的节点名称:
document.getElementById("demo").nodeName;
该语句的返回值为 DIV 。

举例,获取元素节点名称、文本节点名称和文档节点名称:
<div id="demo2">点击这里显示节点名称</div>
<script type="text/javascript">
    document.getElementById("demo2").onclick=function(){
        var divName=this.nodeName;
        var textName=this.firstChild.nodeName;   //  this 指当前发生事件的HTML元素,这里是<div>标签
        var documentName=document.nodeName
        alert(
            "<div>标签的节点名称是:"+divName+"\n"+
            "<div>标签内部文本的节点名称是:"+textName+"\n"+
            "文档节点的节点名称是:"+documentName
        );
    }
</script>

请看下面的演示:
点击这里显示节点名称

节点值

对于文本节点,节点值为文本内容;对于属性节点,节点值为属性的值。

节点值对于文档节点和元素节点是不可用的。

获取节点值的语法:
    nodeObject.nodeValue
其中,nodeObject 为DOM节点(节点对象)。

举例,获取文本节点的节点值:
<div id="demo3">点击这里显示文本节点的值</div>
<script type="text/javascript">
    document.getElementById("demo3").onclick=function(){
        alert(this.firstChild.nodeValue);   //  this 指当前发生事件的HTML元素,这里是<div>标签
    }
</script>

请看下面的演示:
点击这里显示文本节点的值