js DOM节点 childNodes 和 children

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style>
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    window.onload=function ()
   {
var oUl=document.getElementById('ul1');

for(var i=0; i< oUl.childNodes.length;i++){
    //        alert(oUl.childNodes[i].nodeType);
    if(oUl.childNodes[i].nodeType==1){

        oUl.childNodes[i].style.background='red';
    }

}

var oUl2=document.getElementById("ul2");
for(var i=0; i<oUl2.children.length;i++){
     //     document.children.length  就是  document.childNodes 的兼容版
        alert(oUl.children.length);
        oUl.children.style.background='red';

}

//DOM 获取父节点，没有兼容性问题，不做实例
    //  document.parentNode
    //  获取元素在页面上的实际位置的父级
    //  document.offsetParent 
 }

 </script>
 </head>

 <body>
   <ul id="ul1">
<li>11sdfsdfsd1</li>
<li>222</li>
<li>333</li>
    </ul>
  <ul id="ul2">
<li>qwe</li>
<li>qwe</li>
<li>qwe</li>
   </ul>
   </body>
 </html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容