js - DOM -01 childNodes
1.
DOM : Document Object Model 文档对象模型
文档：html页面
文档对象：页面中元素
文档对象模型：定义 为了能够让程序(js)去操作页面中的元素
DOM : Document Object Model 文档对象模型
文档：html页面
文档对象：页面中元素
文档对象模型：定义 为了能够让程序(js)去操作页面中的元素
DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）
DOM节点
getElementById
getElementByTagName
document
document.body
元素.childNodes : 只读 属性 子节点列表集合
标准下：包含了文本和元素类型的节点，也会包含非法嵌套的子节点
非标准下：只包含元素类型的节点，ie7以下不会包含非法嵌套子节点
childNodes只包含一级子节点，不包含后辈孙级以下的节点
DOM节点的类型有很多种 12种
元素.nodeType : 只读 属性 当前元素的节点类型
元素节点 : 1
属性节点 : 2
文本节点 : 3
<body>
<ul id="ul1" style="border: 1px solid red">
<li>1111<span>span</span></li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<p>ppppp</p>
</ul>
<script>
window.onload = function () {
var oUl = document.getElementById('ul1');
console.log(oUl.childNodes.length); //11
console.log(oUl.nodeType); //1 元素节点
console.log(oUl.childNodes[0].nodeType); //3 文本节点
console.log(oUl.attributes.length);
console.log(oUl.attributes[0].nodeType);
for (var i = 0; i < oUl.childNodes.length; i++){
if (oUl.childNodes[i].nodeType == 1){
oUl.childNodes[i].style.background = 'red';
}
}
}
</script>
</body>
2.
元素.children : 只读 属性 子节点列表集合 标准下： 只包含元素类型的节点 非标准下：只包含元素类型的节点
window.onload = function() {
var oUl = document.getElementById('ul1');
alert(oUl.children.length) //5
for (var i=0; i<oUl.children.length; i++) {
oUl.children[i].style.background = 'red';
}
}
</script>
</head>
<body>
<ul id="ul1" style="border: 1px solid red;">
<li>11111 <span>span</span></li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<p>pppppppp</p>
</ul>
</body>
3. 第一个， 最后一个， 前一个兄弟， 后一个兄弟
//第一个子节点
var oFirst = oUl.firstElementChild || oUl.firstChild;
oFirst.style.background = 'red';
//最后一个子节点
var oLast = oUl.lastElementChild || oUl.lastChild;
oLast.style.background = 'yellow';
//后一个兄弟节点
var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
oNext.style.background = 'green';
//前一个兄弟节点
var oPrev = oLast.previousElementSibling || oLast.previousSibling;
oPrev.style.background = 'orange';
浙公网安备 33010602011771号