js节点操作
Posted chq1234
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js节点操作相关的知识，希望对你有一定的参考价值。
js节点操作
通过节点，可以更好的获取元素。
逻辑全在代码里面
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得到所有元素节点，再用伪数组的索引来取得相应位置的元素
以上是关于js节点操作的主要内容，如果未能解决你的问题，请参考以下文章