03-节点类型与更多节点详情

一、节点类型意义

看下面html结构，要求输出ul的所有后台元素标签名，也就是输出 li, b span 这三个，请给出你的代码实现。

通过题目我们很容易发下，如果能使用childnodes遍历下子节点，并且递归的遍历子节点的子节点就可以了。

但是直接遍历出来会有很多文本节点。如果有能区分，文本节点，元素节点，以及标签名称的方法就好办了。

知识点一：元素节点

规定元素节点具有以下特点：

1、nodeType 值为1

2、nodeName 值为元素的标签名（还一个别名tagName）

3、nodeValue 值为null

4、parentNode 一般是Element,也可能是Document

5、其子节点可能是 Element、Text、Conment等

伪代码示例：

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

echo(div1.nodeName);        //输出：DIV，用途判断节点的名称

echo(div1.nodeType);        //输出：1，用途判断节点的类型

echo(div1.nodeValue);        //输出：null，用途获取节点值

echo(div1.parentNode);        //输出：[object HTMLPreElement]，用途获取父节点

echo(div1.parentNode.nodeName); //输出：PRE        ，用途获取父节点名称

echo(div1.childNodes);        //[object NodeList]        ，用途获取子节点

echo(div1.childNodes.length);        //输出：2，查看本节点下面子节点的个数

复制代码

知识点二、属性节点

1、nodeType 为2

知识点三：文本节点

文本节点有以下特征：

1. nodeType 值为3

2. nodeName 值为 “#text”

3. nodeValue 值为节点所包含的文本(别名：data属性)

4. parentNode 是一个Element

5. 不能包含子节点，文本节点是最小单元。

6. nodeValue.length或data.length中保存着文本节点中字符的数目。

知识点四：注释节点

1、nodeType为8

知识点五：文档节点

1、nodeType 为 9

2、nodeName 为 #document