以下便是常用的一些节点类型。数值常量和字符常量便是节点的nodeType属性
| 节点类型 | 数值常量 | 字符常量 |
|---|---|---|
| Element（元素节点） | 1 | ELEMENT_NODE |
| Attr（属性节点） | 2 | ATTRBUTE_NODE |
| Text（文本节点） | 3 | TEXT_NODE |
| Comment（注释节点） | 8 | COMMNET_NODE |
| Document（文档节点） | 9 | DOCUMENT_NODE |
| DocumentType（文档类型节点） | 10 | DOCUMENT_TYPE_NODE |
| DocumentFragment（文档片段节点） | 11 | DOCUMENT_FRAGMENT_NODE |
实际上为了照顾各浏览器的兼容性，在需要判断节点类型的时候，都是判断该节点的nodeType属性是否等于某个节点的数值常量
var divNode = document.getElementById("container");
//以下写法并不通用，可能存在兼容性问题，因为不是所有浏览器都内置了Node对象
if(divNode.nodeType == Node.ELEMENT_NODE){
alert("Element node");
}
//所以要采取使用数值变量来判断
if(divNode.nodeType == 1){
alert("Element node");
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>nodeType, nodeValue</title>
</head>
<body>
<!-- 这是一个注释 -->
<div id="container">Hello World</div>
<script type="text/javascript">
var divNode = document.getElementById("container");
console.log(divNode.nodeType + '/' + divNode.nodeValue);
var textNode = divNode.childNodes[0];
console.log(textNode.nodeType + '/' + textNode.nodeValue);
var commentNode = document.body.childNodes[1];
console.log(commentNode.nodeType + '/' + commentNode.nodeValue);
console.log(document.doctype.nodeType + '/' + document.doctype.nodeValue);
var attrNode = divNode.attributes[0];
console.log(attrNode.nodeType + '/' + attrNode.nodeValue);
var frag = document.createDocumentFragment();
console.log(frag.nodeType + '/' + frag.nodeValue);
</script>
</body>
</html>以上是一段简单的HTML代码，那么这段代码中的 元素节点 便是如"<html>","<head>","<div>"这类的标签，要注意的是一对为一个节点。属性节点就是标签内的属性，例如div标签中的id属性。文本节点就是标签内或者标签与标签之间的字符内容，而且可以为空，所以标签与标签之间的空格（行）也是文本节点，例如<body>跟注释之间的空格就是一个文本节点，这也是为什么在上面的JS代码获取commentNode的时候要选取<body>子节点集中的第二个节点。注释节点就是HTML中的注释部分。文档类型节点就是代码开头的<!DOCTYPE html>部分，该节点的主要功能是告诉浏览器该文档是由哪个版本的HTML编写的。文档片段节点，也就是上面JS代码部分的frag变量，该节点由于其在插入HTML的过程中只会插入其子孙节点所以更类似于一个占位符，主要用于动态修改HTML元素。
547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
