childNodes,children和noteType

来源：互联网发布：ubuntu16.04优化编辑：程序博客网时间：2024/06/06 17:26

元素.childNodes:子节点列表集合，只读属性，返回一个数组，只包含父级的下一级子节点，元素可以不一样，不包括后代的孙子节点。
标准下：包含了文本和元素类型的节点，也会包含非法嵌套的子节点
非标准下：只包含元素类型的节点，ie7以下不会包含非法嵌套子节点

元素.children：元素子节点。只读属性。
元素.nodeType : 只读属性当前元素的节点类型
元素节点 : 1
属性节点 : 2
文本节点 : 3
DOM节点的类型有很多种 12种,其中常用的是以上三种。
例子：给ul的li添加背景颜色

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li></ul></body><script>    var oUl=document.getElementsByTagName("ul")[0];    var aLi=oUl.getElementsByTagName("li");/*使用childNotes会有兼容性问题，在标准的浏览器下包括文本节点，解决的办法是通过nodeType判断子节点的类型，其中元素节点返回的是1*//*for(var i=0;i<oUl.childNodes.length;i++){    if(oUl.childNodes[i].nodeType==1){        oUl.childNodes[i].style.background="red";    }}*//*第二种方法，直接使用children属性，没有兼容性问题，推荐使用*/    for(var i=0;i<oUl.children.length;i++){        oUl.children[i].style.background="blue";    } </script></html>

这里写图片描述

0 0