一、节点类型意义
看下面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