美文网首页
js DOM节点 childNodes 和 children

js DOM节点 childNodes 和 children

作者: 发光驴子 | 来源:发表于2017-09-20 23:31 被阅读0次
    <!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>

相关文章

  • js DOM节点 childNodes 和 children

  • DOM基础

    关键词:DOM节点、childNodes、文本节点及元素节点、nodeType、children、parentNo...

  • day03

    A我今天学了什么 1.拓展DOM 1.2子节点childNodes和children的区别 1.3兄弟节点 1.4...

  • javascript之DOM节点

    javascript之DOM节点详细剖析,以下列出的基本是最常用的 childNodes children get...

  • DOM操作(由此引申出的知识点非常多)

    题目1: elem.children和elem.childNodes的区别? childNodes包括HTML节点...

  • 2018-08-22day-28

    js属性及操作 1、DOM操作 children 子节点 儿子节点parentNode 父节点 谷歌和火...

  • js : DOM-增删改查

    节点关系 children childNodes parentNode firstChild lastChild ...

  • Dom1 子节点

    childNodes:数组存储,包含文本节点和元素节点children: 数组存储,包含元素节点 node...

  • 2018-08-22

    day03-js3 1、DOM操作children 子节点 儿子节点parentNode 父节点 2、事...

  • DOM: childNodes与children

    我们在操作DOM的时候经常会和childNodes和children打交道,那么这2个属性究竟有什么区别呢?今天就...

网友评论

      本文标题:js DOM节点 childNodes 和 children

      本文链接:https://www.haomeiwen.com/subject/yhpasxtx.html