JavaScript DOM节点属性详解：nodeName、nodeType与nodeValue

DOM节点属性概述

本节内容聚焦于DOM属性。

在前面的学习中，我们已经接触过DOM属性。

例如：

nodeName和nodeType等属性，接下来我们将进行详细讲解。

nodeName属性详解

1. nodeName属性：用于获取节点名称。

若节点为元素节点，该属性返回元素标签名，此时其功能等同于tagName属性。

例如：

对于<p>aaaa</p>，返回值为p；

若节点为属性节点，nodeName返回该属性的名称。

若节点为文本节点，nodeName返回字符串#text。

需要注意的是，nodeName是只读属性，无法进行赋值操作。

该属性返回的值均为大写字母。

nodeType属性与类型判断

2. nodeType属性：返回一个整数，表示节点类型。

我们常用的三种类型如下：

nodeType等于1时，表示元素节点；

nodeType等于2时，表示属性节点；

nodeType等于3时，表示文本节点。

为了方便记忆，可以采用以下方法：

以<p title="cssrain">test</p>为例，从左至右阅读，依次遇到元素节点(1)、属性节点(2)和文本节点(3)，由此可轻松记住nodeType对应的类型含义。

nodeType属性常与if语句配合使用，以确保不在错误的节点类型上执行不当操作。

例如：

function cs_demo(mynode){

if(mynode.nodeType == 1){

mynode.setAttribute("title","demo");

代码解释：首先检查mynode的nodeType属性，确认其代表的节点确实是元素节点。

与nodeName属性相同，nodeType也是只读属性，无法直接赋值。

nodeValue属性的读写规则

3. nodeValue属性：返回一个字符串，即节点的值。

若节点为元素节点，返回null（请注意这一点）；

若节点为属性节点，nodeValue返回该属性的值。

若节点为文本节点，nodeValue返回该文本节点的内容。

例如：

<div id="c">aaaaaaaaaaaaaaaa</div>

<SCRIPT LANGUAGE="JavaScript">

var c= document.getElementById("c");

alert( c.nodeValue );//返回null

</SCRIPT>

nodeValue是一个可读写的属性，但不能直接设置元素节点的值。

再看下面的例子：

<div id="c">aaaaaaaaaaaaaaaa</div>

<SCRIPT LANGUAGE="JavaScript">

var c= document.getElementById("c");

c.nodeValue =" dddddddddddd"; //不能设置

//alert( c.firstChild.nodeValue ) //元素节点 包括属性节点和文本节点。

c.firstChild.nodeValue = "test"//能设置

</SCRIPT>

为确保代码正确运行，可以添加以下判断逻辑：

<div id="c">aaaaaaaaaaaaaaaa</div>

<SCRIPT LANGUAGE="JavaScript">

var c= document.getElementById("c");

c.nodeValue =" dddddddddddd"; //不能设置

//alert( c.firstChild.nodeValue )

if( c.firstChild.nodeType==3 ){ //判断是不是 文本节点

c.firstChild.nodeValue = "test"//能设置

</SCRIPT>

由此可见，若要设置元素节点的值，不能直接赋值，而必须先通过firstChild或lastChild等属性获取子节点，再设置nodeValue。

nodeValue通常仅用于设置文本节点的值。若需刷新属性节点的值，一般使用setAttribute()方法。