js 对象数组遍历 DOM 模型概述(3)

el = el.nextSiling;

i++;

}

上面代码遍历div-01节点的所有子节点。

下面两个表达式指向同一个节点。

document.childNodes[0].childNodes[1];

document.firstChild.firstChild.nextSibling;

Node.previousSibling

previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点没有同级节点，则返回null。

// html代码如下

//

document.getElementById('b1').previousSibling // null

document.getElementById('b2').previousSibling.id // "b1"

对于当前节点前面有空格，则previousSibiling属性会返回一个内容为空格的文本节点。

Node.parentNode

parentNode属性返回当前节点的父节点。对于一个节点来说，它的父节点只可能是三种类型：element节点、document节点和documentfragment节点。

下面代码是如何从父节点移除指定节点。

if(node.parentNode){

node.parentNode.removeChild(node);

}

对于document节点和documentfragment节点，它的父节点都是null。另外，对于那些生成了后还没插入DOM树的节点，父节点也是null。

Node.parentElement

parentElement属性返回当前节点的父Element节点。如果当前节点没有父节点，或者父节点的类型不是Element节点，则返回null。

if(node.parentElement){

node.parentElement.style.color = "red";

}

上面代码设置节点的父Element节点的CSS属性。

在IE浏览器中，只有Element节点才有该属性，其他浏览器则是所有类型的节点都有该属性。js 对象数组遍历

Node.childNodes

childNodes属性返回一个NodeList集合，成员包括当前节点的所有子节点。注意，除了HTML元素节点，该属性返回的还包括Text节点和Comment节点。如果当前节点部包括任何子节点，则返回一个空的NodeList集合。由于NodeList对象是一个动态集合，一旦子节点发生变化，立刻会反映在返回结果之中。

var ulElementChildNodes = document.querySelector('ul').childNodes;

Node.firstChild,Node.lastChild

firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null（注意，不是undefined）。

First span

上面代码中，p元素的第一个子节点是span元素。

First span

上面代码中，p元素与span元祖之间有空白符，这导致firstChild返回的是文本节点。

Node.lastChild属性返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回null。

节点对象的方法

Node.appendChild()

node.appendChild方法可以接受一个节点作为参数，将其作为最后一个子节点，插入当前节点。

var p = document.createElement(p);

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-58611-3.html