js中元素节点

最新推荐文章于 2022-09-14 21:17:54 发布

Renkx0404

最新推荐文章于 2022-09-14 21:17:54 发布

阅读量414

点赞数

本文链接：https://blog.csdn.net/Renkx0404/article/details/73657989

版权

相关知识点：
1.nodeType: 节点类型；

 a：元素节点（1）；
 b：文本节点（3）；
 c：属性节点；

2. childNodes：返回所有的子节点，包括文本节点和元素节点，
3. children：是所有的子标签节点；。
4. firstChild：等同于node.childnodes[0]；
5. lastChild：等同于node.childnodes[node.length-1]；

如下实例：

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>Document</title>
    </head>
    <body>
        <ul>
         <li class="txt1"><i>hello1</i></li>
         <li class="txt1"><i>hello2</i></li>
         <li class="tst"><i>hello3</i></li>
         <li class="tst"><i>hello4</i></li>
       </ul>
    </body>

思路：

首先弹出ul li 中的所有的节点类型；<**>

window.onload=function(){
    var oUl=document.getElementsByTagName('ul')[0];
     for (var i = 0; i < oUl.childNodes.length; i++) {
     <**alert（oUl.childNodes[i].nodeType）**>
     }
   }

注：这里弹出的值是3 1 3 1 3 1 3 1 3，这里的3表示文本节点，1表示元素节点；也就是说ul里面文本节点和元素节点加一起有9个；

   <ul>
     <!-- 文本节点 -->
     <li class="txt1"><i>hello</i></li><!-- 元素节点 -->
     <!-- 文本节点 -->
     <li class="txt1"><i>hello</i></li><!-- 元素节点 -->
     <!-- 文本节点 -->
     <li class="tst"><i>hello</i></li><!-- 元素节点 -->
     <!-- 文本节点 -->
     <li class="tst"><i>hello</i></li><!-- 元素节点 -->
     <!-- 文本节点 --> 
    </ul>

这里如果直接用childNodes给ul里的li元素加样式，控制面板中就会出现bug；因为childNodes 选择包括文本节点和元素节点；

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

这里写图片描述
这里我们主要想给li标签加样式，而ul 里面除了li标签之外还有文本标签，所以首先就应该文本标签除外。

  if (oUl.childNodes[i].nodeType==1) {
     oUl.childNodes[i].style.background='red';
  }

这样就可以给ul 中li添加样式；如下图
这里写图片描述
如果用children则不需要进行判断；直接就能添加样式。

<script>
   //children 是所有的子标签节点；
    window.onload=function(){
      var oUl=document.getElementsByTagName('ul')[0];
      for (var i = 0; i < oUl.children.length; i++) {
          oUl.children[i].style.background='red';
      }
    }
  </script>