html中childNodes节点属性

红太狼 2021-03-22 13:30 601阅读 0赞

之前看html后对节点这个东西的盖帘一直很模糊，so在网上找了一本《DOM编程艺术》的PDF文档来看，编程试验了下

  1. <body>
  2.     <div id="box" οnclick="console.log(this)">
  3.         this
  4.         <h2 style="width: 200px" class="123" id="wrap">
  5.             here
  6.             <span class="1234">here</span> where
  7.         </h2>
  8.         that
  9.     </div>
  10. </body>
  11. <script type="text/javascript">
  12.     // var div = document.getElementById('box').childNodes[1].childNodes[0].nodeValue;
  13.     var div = document.getElementById('box').childNodes;
  14.     console.log(div);
  15. </script>

在chrome中运行

1018159-20170220113140476-1238307869.png

显示有6个节点，我们依次来看看这6个节点是什么

  1. text:this
  2. h2#wrap.123:herehere where
  3. text:that

可以看出，childNodes是当前元素的第一代子节点，而且顺序是有以下几种节点组合

  1. text
  2. text element text
  3. text element text element text

当.box中只纯在text时，或者为空时，也会有一个text节点，也就是第一种情况

当.box中存在一个element时，则在element前后都会存在一个text节点，不管text是否为空，也就是第二种情况

依次类推即可

发表评论

表情：
评论列表 （有 0 条评论，601人围观）

还没有评论，来说两句吧...

相关阅读