DOM1级定义了一个Node接口，该接口由DOM中的所有节点类型实现。这个Node接口在JavaScript中作为Node类型实现的；除了IE之外，其他所有浏览器中都可以访问这个类型。
JavaScript中所有的节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。
每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示：
- Node.ELEMENT_NODE(1)
- Node.ATTRIBUTE_NODE(2)
- Node.TEXT_NODE(3)
- Node.CDATA_SECTION_NODE(4)
- Node.ENTITY_REFERENCE_NODE(5)
- Node.ENTITY_NODE(6)
- Node.PROCESSING_INSTRUCTION_NODE(7)
- Node.COMMENT_NODE(8)
- Node.DOCUMENT_NODE(9)
- Node.DOCUMENT_TYPE_NODE(10)
- Node.DOCUMENT_FRAGMENT_NODE(11)
- Node.NOTATION_NODE(12)
通过比较上面这些常量，可以很容易的确定节点的类型：
if (someNode.nodeType == Node.ELEMENT_NODE){//IE中无效
alert("Node is an element");
}
if (someNode.nodeType == 1){//适用于所有浏览器
alert("Node is an element");
}
开发人员最常用的是元素和文本节点。
nodeName和nodeValue属性
用途：了解节点的具体信息。对于元素节点，nodeName中保存的始终都是元素的标签名，而nodeValue的之则始终为null。
使用这两个值以前，最好是先检测一下节点的类型
if(someNode.nodeType == 1){ value = someNode.nodeName; }
节点关系
在HTML中，可以将<body>元素看成是<html>元素的子元素；相应的，<html>元素是<body>元素的父元素。而<head>元素，则可以看成是<body>元素的同胞元素。
1、childNodes属性
每个节点都有childNodes属性，其中保存着一个NodeList对象。
NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
注意：虽然可以通过方括号语法来访问NodeList的值，而且这个对象也有length属性，但它并不是Array的实例。
NodeList对象实际上是基于DOM结构动态执行查询结果，因此DOM结构的变化能够自动反应在NodeList对象中。
可以通过方括号，也可以使用item()方法来访问保存在NodeLIst中的节点。
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.items(1);
var count = someNode.childNodes.length;
//length属性表示访问NodeList那一刻，其中包含的节点数量。
可以将NodeList对象转换为数组：
//IE8及之前版本无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);
因为IE8及更早版本将NodeList实现为一个COM对象，所以上面的代码会导致错误。要在IE中将NodeList转换为数组，必须手动枚举所有成员：
//所有浏览器中都可以运行
function convertToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0); //针对非IE浏览器
}catch(ex){
array = new Array();
for(var i= 0,len=nodes.length;i<len;i++){
array.push(nodes[i]);
}
}
return array;
}
2、parentNode属性
1、每个节点都有一个parentNode属性，该属性指向文档树中的父节点。
2、包含在childNodes列表中的所有节点都具有相同的父节点，因此他们的parentNode属性都指向同一个节点。
3、包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。
（列表中第一个节点的previousSibling，最后一个节点的nextSibling属性的值都是null）
if(someNode.nextSibling == null){
alert("这是childNodes列表中最后一个节点。");
}else if(someNode.previousSibling == null){
alert("这是childNodes列表中第一个节点。");
}
父节点与其第一个和最后一个子节点之间也存在特殊关系。
someNode.firstChild == someNode.childNodes[0]; //true
someNode.lastChild ==someNode.childNodes[someNode.childNodes.length-1]; //true
3、hasChildNodes()方法
这个方法在节点包含一或多个子节点的情况下返回true。
4、ownerDocument属性
该属性指向表示整个文档的文档节点。通过这个属性，可以直接访问文档节点。
操作节点
1、appendChild()
用途：向childNodes列表的末尾添加一个节点。
返回：childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应的更新，更新完成后，返回新增的节点。
var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); //true
alert(someNode.lastNode == newNode); //true
若传入到appendChild()中的节点已经是文档的一部分了，那么结果是将该节点从原来的的位置转移到新位置。
//someNode 有多个子节点
var returnedNode = someNode.appendChild(someNode.firstNode);
alert(returnedNode == someNode.firstChild); // false
alert(returnedNode == someNode.lastChild); //true
2、insertBefore()
用途：把节点放在childNodes列表中某个特定的位置上。
用法：
insertBefore(param1,param2)
param1——要插入的节点
param2——作为参照的节点
返回：插入节点后，被插入的及诶单会变成参考节点的前一个同胞节点（previousSibling），同时被方法返回。如果参照节点是null，则insertBefore()与appendChild()执行相同的操作。
//插入后成为最后一个子节点
returnedNode = someNode.insertbefore(newNode,null);
alert(returnedNode == someNode.lastNode); //true
//插入后成为第一个子节点
returnedNode = someNode.insertbefore(newNode,someNode.firstChild);
alert(returnedNode == newNode); //true
alert(newNode == someNode.firstNode); //true
//插入到最后一个子节点前面
returnedNode = someNode.insertbefore(newNode,someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length-1]); //true
3、replaceChild()
用途：插入一个节点并替换插入位置处的节点。
用法：
replaceChild(param1,param2)
param1——要插入的节点
param2——要替换的节点
返回：返回要替换的节点并从文档树中被移除，同时由要插入的节点占据其位置。
//替换第一个子节点
returnedNode = someNode.replaceChild(newNode,someNode.firstChild);
//替换最后一个子节点
returnedNode = someNode.replaceChild(newNode,someNode.lastChild);
4、removeChild()
用途：移除一个节点
用法： removeChild(param) param—— 要移除的节点
返回：要移除的节点
//移除第一个子节点
returnedNode = someNode.removeChild(someNode.firstChild);
//移除最后一个子节点
returnedNode = someNode.removeChild(someNode.lastChild);
前面四个方法操作的都是某个节点的子节点，并不是所有类型的节点都有子节点。
5、cloneNode()
用途：创建调用这个方法的节点的一个完全相同的副本。
用法： cloneNode(param)
param——true，执行深复制，即复制节点及其整个子节点树；false，执行浅复制，即复制节点本身。
返回：返回复制后的节点副本，但并没有为它指定父节点。因此这个节点是“孤儿”，要通过appendChild()、insertBefore()或replaceChild()将它添加到文档中去。
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
//将上面的<ul>元素的引用保存在变量myList中
var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); //3（IE<9）或7（其他浏览器）
var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length); //0
6、normalize()
用途：处理文档树中的文本节点。
用法：由于解析器的实现或DOM的操作等原因，可能会出现文本节点不包含文本，或者接连出现两个文本节点的情况。当在某个节点上调用这个方法时，就会在该节点的后代节点中查找上述两种情况。如果找到了空文本节点，则删除它；如果找到了相邻的文本节点，则将它们合并为一个文本节点。
网友评论