JS高程3：DOM-节点层次

DOM是一个API，通过该API可以操作HTML文档或者XML文档。

DOM将HTML或者XML文档描绘成一个多层节点结构。

文档节点是HTML或者XML文档的根节点，同时也是其他节点的根节点，因为每个文档中只能有一个文档节点。

Node类型

DOM1中定义了一个Node接口。该接口在JS中是通过Node类型来实现。

JS中所有节点类型都继承自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)。

通过比较上面这些常量，可以很容易地确定节点的类型，例如：

if (document.nodeType == Node.DOCUMENT_NODE){ //在 IE 中无效

	alert("Node is a document.");

}

当然，为了跨浏览器，可以这样写：

if (someNode.nodeType == 1){ //适用于所有浏览器

	alert("Node is an element.");

}

nodeName和nodeType属性

对于元素节点， nodeName 中保存的始终都是元素的标签名，而 nodeValue 的值则始终为 null。

节点关系

每个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。

访问保存在 NodeList 中的节点——可以通过方括号，也可以使用 item()方法。

将 NodeList 对象转换为数组：

//在 IE8 及之前版本中无效

var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

跨浏览器实现：

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;

}

每个节点都有一个 parentNode 属性，该属性指向文档树中的父节点。

使用列表中每个节点的 previousSibling和 nextSibling 属性，可以访问同一列表中的其他节点。

另外， hasChildNodes()也是一个非常有用的方法，这个方法在节点包含一或多个子节点的情况下返回 true。

所有节点都有的最后一个属性是 ownerDocument，该属性指向表示整个文档的文档节点。

操作节点

巴特西

JS高程3：DOM-节点层次

最新文章

热门文章