欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js节点操作

程序员文章站 2022-06-08 17:58:34
js节点操作 整个页面可以看成文档节点,节点用node表示。页面里面全是节点,元素节点, 属性节点,文本节点(文字,空格,换行), 节点:一定有节点类型,节点名称,节点值 节点类型的值: 元素节点为1,属性节点为2,文本节点为3 通过节点,可以更好的获取元素。 逻辑全在代码里面 js部分 长话短说: ......

js节点操作

整个页面可以看成文档节点,节点用node表示。页面里面全是节点,元素节点, 属性节点,文本节点(文字,空格,换行),

节点:一定有节点类型,节点名称,节点值
节点类型的值: 元素节点为1,属性节点为2,文本节点为3

通过节点,可以更好的获取元素。

逻辑全在代码里面

 1 <body>
 2     <div class="con">
 3         <ul>
 4             <li class="item3"></li>
 5             <li class="item4"></li>
 6             <li class="item5"></li>
 7             <li class="item6"></li>
 8         </ul>
 9 
10         <ol>
11             <li class="item7"></li>
12             <li class="item8"></li>
13             <li class="item9"></li>
14             <li class="item10"></li>
15         </ol>
16 
17     </div>

js部分

 1     <script>
 2         //我想要获取ul下面的所有li
 3         var ulele = document.queryselector("ul");
 4         var lis = ulele.queryselectorall("li"); //获取了4个li没毛病
 5         //console.log(lis);
 6         //假如获得了ul里面的li,那如何重新获得ul元素节点呢?
 7 
 8         console.log(lis[1].parentnode); //获取的是离这个元素最近的爸爸,而不是爷爷
 9 
10         //获取ol下所有的li元素节点
11         var olele = document.queryselector("ol");
12         console.log(olele.childnodes); //[text, li.item7, text, li.item8, text, li.item9, text, li.item10, text] 得到的结果,为什么会有九个节点呢?
13         //因为childnodes获取的是所有的节点,包括元素节点,文本节点
14 
15         //要想获取元素节点
16         for (var i = 0; i < olele.childnodes.length; i++) {
17             if (olele.childnodes[i].nodetype == 1) { //元素节点的节点类型值为1,属性节点的节点类性质为2,文本节点的节点类性质为2
18                 console.log(olele.childnodes[i]);
19 
20             }
21         }
22         //好麻烦呀
23         //别慌,有直接获取元素节点的操作
24         console.log("-----------------华丽的分割线----------------------");
25         console.log(olele.children); //元素.children直接获取元素节点
26 
27         console.log("--------节点操作之第一个元素和最后一个元素---------");
28         //获取ul下的第一个元素
29         var firstulli = ulele.firstchild;
30         console.log(firstulli); //结果#text  什么?获取的竟然是文本节点?        
31         console.log(ulele.lastchild); //结果#text  什么?获取的竟然是文本节点?
32 
33         //办法其一: 
34 
35         console.log(ulele.firstelementchild); //直接获取元素节点,但是兼容性不好
36         console.log(ulele.lastelementchild);
37 
38 
39         console.log("---------------------实际开发中的做法-----------------------");
40         console.log(ulele.children[0]);
41         console.log(ulele.children[ulele.children.length - 1]);
42     </script>



 

长话短说:

子节点.parentnode得到的是直接父元素
父元素.childnodes得到的是所有子节点,包括元素节点,文本节点,父元素.children得到的是元素节点
父元素.firstchild得到的是第一个节点,经常是文本节点,因为需要换行空格嘛,父元素.firstelementchild得到父元素的第一个元素节点,但兼容性不好
实际开发中做法:先用children得到所有元素节点,再用伪数组的索引来取得相应位置的元素