1.nodeType属性
用于表明节点的类型
if(someNode.nodeType==1){ //节点对应的数字表示,适用于所有浏览器
alert("Node is an element.");
}
if(someNode.nodeType==Node.ELEMENT_NODE){ //IE中无效,它没有Node类型
alert("Node is an element.");
}
2.nodeName和nodeValue属性
对于元素节点,nodeName中保存的始终都是元素的标签名,而nodeValue的值则始终都是null
if(someNode.nodeType==1){ //节点对应的数字表示
value=someNode.nodeName; //nodeName的值是元素的标签名
}
3.节点关系
节点间的各种关系可以用传统的家族关系来描述,相当于将文档树比喻为家谱。每个节点都有一个childNodes属性,其中保存着一个NodeList对象。NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。
注:虽然可以通过方括号语法来访问NodeList的值,而且其有length属性,但它并不是Array。
如何访问保存在NodeLIst中的节点——可以通过方括号,也可以使用item()方法。
var firstChild=someNode.childNodes[0];
var secondChild=someNode.childNodes.item(1);
var count=someNode.childNodes.length;
每个节点都有一个parentNode属性,该属性指向文档树中的父节点。包含在childNodes列表中的所有节点都具有相同的父节点,因此它们的parenNode属性都指向同一个节点。此外,包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中的每个节点的previousSibling和nextSilbing属性,可以访问同一列表中的其他节点。
例:
if(someNode.nextSibling===null){
alert("Last node in the parent's childNodes List.");
}
else if(someNode.previousSibling===null){
alert("First node in the parent's childNodes List.");
}
若列表中只有一个节点,那么该节点的nextSibling和previousSibling都为null.
父节点的firstChild和lastChild属性分别指向其childNodes列表的第一个和最后一个节点。
其中,someNode.firstChild的值始终等于someNode.childNode[0],而someNode.lastChild的值始终等于someNode.childNodes[someNode.childNodes.length-1]。
在只有一个子节点的情况下,firstChild和lastChild指向同一个节点。
如下图,则为上述关系:
4.操作节点
(1)appendChild():用于向childNodes列表的末尾添加一个节点
var returnedNode=someNode.appendChild(newNode);
alert(returnedNode==newNode); //true
alert(someNode.lastChild==newNode); //true
若在调用appendChild()时传入了父节点的第一个子节点,那么该节点就会成为父节点的最后一个子节点,如下例所示。
//someNode有多个子节点
var returnedNode=someNode.appendChild(someNode.firstChild);
alert(returnedNode==someNode.firstChild); //false
alert(returnedNode==someNode.lastChild); //true
(2)insertBefore():将节点放在childNodes列表中某个特定的位置上,而不是放在末尾。
该方法接受两个参数:要插入的节点和作为参照的节点。插入节点后,被插入的节点会变成参照节点的前一个同胞节点。
//插入后成为最后一个子节点
returnedNode=someNode.insertBefore(newNode,null);
alert(newNode==someNode.lastChild); //true
//插入后成为第一个子节点
var returnedNode=someNode.insertBefore(newNode,someNode.firstChild);
alert(returnedNode==newNode); //true
alert(newNode==someNode.firstChild); //true
//插入到最后一个子节点前面
returnedNode=someNode.insertBefore(newNode,someNode.lastChild);
alert(newNode==someNode.childNodes[someNode.childNodes.length-2]); //true
(3)replaceChild():使用其插入一个节点时,该节点的所有关系指针都会从被它替换的节点复制过来
(4)removeChild():移除节点
这个方法接受一个参数,即要移除的节点,被移除的节点将成为方法的返回值
//移除第一个子节点
var formerFirstChild=someNode.removeChild(someNode.firstChild);
//移除最后一个子节点
var formerLastChild=someNode.removeChild(someNode.lastChild);
注:上述四种操作方法都是某个节点的子节点,即要使用这几种方法,必须先取得父节点(使用parentNode属性)。另外,并不是所有类型的节点都有子节点,若在不支持子节点的节点上调用了这些方法,将会导致错误。
(5)其他方法
cloneNode():用于创建调用这个方法的节点的一个完全相同的副本。
其接受一个布尔值参数,即参数为true时,执行深复制,也就是复制节点及其整个子节点树;参数为false时,执行浅复制,只复制节点本身。
例:有如下HTML代码
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
若将
- 元素的引用保存在了变量myList中,则:
var deepList=myList.cloneNode(true);
alert(deepList.childNodes.length); //3
var shallowList=myList.cloneNode(false);
alert(shallowList.childNodes.length); //0