节点类型的分类
节点类型
说明
值
元素节点
每一个HTML标签都是一个元素节点,如
、
- 等
1
属性节点
元素节点(HTML标签)的属性,如 id 、class 、name 等。
2
文本节点
元素节点或属性节点中的文本内容。
3
注释节点
表示文档注释,形式为。
8
文档节点
表示整个文档(DOM 树的根节点,即 document )
9
nodeType、nodeName、nodeVale判断节点类型,节点名称和节点值
var div = document.getElementById("oneDiv");
console.log(div.nodeType); //输出1,元素节点
var divText = div.firstChild;
console.log(divText.nodeType) //输出3,文本节点
var divAttr = div.getAttributeNode("id");
console.log(divAttr.nodeType) //输出2,属性节点
var comment = div.nextSibling;
console.log(comment.nodeType) //输出8,注释节点
var div = document.getElementById("oneDiv");
console.log(div.nodeName); //输出DIV,元素节点为标签大写
var divText = div.firstChild;
console.log(divText.nodeName) //输出#text,文本节点使用nodeName时永远为#text
var divAttr = div.getAttributeNode("id");
console.log(divAttr.nodeName) //输出id,属性节点为属性名
var comment = div.nextSibling;
console.log(comment.nodeName) //输出#comment,注释节点使用nodeName时永远为#comment
var div = document.getElementById("oneDiv");
console.log(div.nodeValue); //输出null,元素节点对于nodeValue不支持
var divText = div.firstChild;
console.log(divText.nodeValue) //输出一段文本,文本节点输出文本值
var divAttr = div.getAttributeNode("id");
console.log(divAttr.nodeValue) //输出oneDiv,属性节点输出属性值
var comment = div.nextSibling;
console.log(comment.nodeValue) //输出注释文本,注释节点输出注释内容