前端开发 | 在线支持

DOM为Node类型定义如下属性，以方便JavaScript访问节点。

ownerDocument：返回当前节点的根元素（document 对象）。
parentNode：返回当前节点的父节点。所有的节点都仅有一个父节点。
childNodes：返回当前节点的所有子节点的节点列表。
firstChild：返回当前节点的第一个子节点。
lastChild：返回当前节点的最后一个子节点。
nextSibling：返回当前节点之后相邻的同级节点。
previousSibling：返回当前节点之前相邻的同级节点。

childNodes

childNodes返回所有子节点的列表，它是一个随时可变的类数组。

【示例1】下面示例演示了如何访问childNodes中的节点。

<ul>
    <li>D表示文档，HTML文档结构。</li>
    <li>O表示对象，文档结构的JavaScript脚本化映射。</li>
    <li>M表示模型，脚本与结构交互的方法和行为。</li>
</ul>
<script>
var tag = document.getElementsByTagName("ul")[0]; //获取列表元素 
var a = tag.childNodes;                              //获取列表元素包含的所有子节点 
console.log(a[0].nodeType); //第1个节点类型，返回值为3，显示为文本节点 
console.log(a.item(1).innerHTML);             //显示第2个节点包含的文本 
console.log(a.length);                                //包含子节点个数，nodeList长度 
</script>

使用方括号语法，或者item()方法，都可以访问childNodes包含的子元素。childNodes的length属性可以动态返回子节点的个数，如果列表项目发生变化，length属性值也会随之变化。

【示例2】childNodes是一个类数组，不能够直接使用数组的方法，但是可以通过动态调用数组的方法，把它转换为数组。下面示例把childNodes转换为数组，然后调用数组的reverse()方法，颠倒数组中元素的顺序。

var tag = document.getElementsByTagName("ul")[0]; //获取列表元素 
var a =   Array.prototype.slice.call(tag.childNodes,0); //把childNodes属性值转换为数组 
a.reverse();                                               //颠倒数组中元素的顺序 
console.log(a[0].nodeType); //第1个节点类型，返回值为3，显示为文本节点 
console.log(a[1].innerHTML);                    //显示第2个节点包含的文本 
console.log(a.length);                                //包含子节点个数，childNodes属性值长度

【提示】

文本节点和属性节点都不包含任何子节点，所以它们的childNodes属性返回值是一个空集合。使用haschildNodes()方法，或者使用childNodes.length>0，来判断一个节点是否包含子节点。

parentNode

parentNode返回元素类型的父节点，因为只有元素才可能包含子节点。不过document节点没有父节点，document节点的parentNode属性将返回null。

firstChild和lastChild

firstChild返回第一个子节点，lastChild返回最后一个子节点。文本节点和属性节点的firstChild和lastChild属性返回值为null。

注意，firstChild等价于childNodes的第一个元素，lastChild属性值等价于childNodes的最后一个元素。如果firstChild等于null，则说明当前节点为空节点，不包含任何内容。

nextSibling和previousSibling

nextSibling返回下一个相邻节点，previousSibling返回上一个相邻节点。如果没有同属一个父节点的相邻节点，则返回null。

ownerDocument

ownerDocument表示根节点。node.ownerDocument等价于document.documentElement。

【示例3】针对下面文档结构。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body><span class="red">body</span>元素</body></html>

可以使用下面方法访问body元素。

var b = document.documentElement.lastChild;
var b = document.documentElement.firstChild.nextSibling.nextSibling;

通过下面方法可以访问span包含的文本。

var text =  document.documentElement.lastChild.firstChild.firstChild.nodeValue;