Node为DOM1级定义的一个接口,由DOM中的所有节点类型实现。Javascript中所有的节点类型都继承自Node类型,因此所有的节点类型都共享着相同的基本属性和方法。
nodeType属性(节点的类型):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)
常用的是元素和文本节点
nodeName和nodeValue属性(了解节点的具体信息)
对于元素节点,nodeName保存标签名, nodeValue始终为null
childNodes属性
其中保存着一个NodeList对象,可以通过位置访问节点,也有length属性,但并不是Array的实例。如下:
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;
通用的将NodeList转换为数组的样例代码:
function convert2Array(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;
}
parentNode属性
previousSibling和nextSibling属性(同胞节点查询)
列表中的第一个节点previousSibling属性值为null,最后一个节点的nextSibling属性为null。
firstChild和lastChild属性
hasChildNodes()方法:
该方法的节点包含一个或多个子节点的情况下返回true。
ownerDocument属性:
指向表示整个文档的文档节点。
节点之间的关系图如下:
操作节点:
appendChild()方法:该方法返回新增的节点
两组代码对比:
var returnNode = someNode.appendChild(newChild);
alert(returnNode==newChild);//true
alert(someNode.lastChild==newChild);//true
//someNode有多个节点
var returnNode=someNode.appendChild(someNode.fristChild);
alert(returnNode==someNode.fristChild);//false
alert(returnNode==someNode.lastChild);//true
该方法接收两个参数,即要插入的节点和作为参照的节点。方法执行后同样返回被插入的节点。
replaceChild():
接收两个参数,即要插入的节点和要替换的节点。
removeChild():
单纯的移除节点。被移除的节点将成为方法的返回值。
值得注意的是:
以上操作节点的方法,都是建立在有父节点的基础之上,如果不满足相关条件将会报错。
cloneNode():
接收一个布尔型参数,表示是否执行深复制(也就是复制节点及节点下的一棵树)。false时,只复制节点本身。
normalize():处理文档树中的文本节点。