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';