0064.DOM中的节点操作2 · 原生js-2020

~~~ <div class="box" id="box">  <h2 class="title">课程大纲</h2> <ul> <li>正式课前五周：JS（包含ES6~ES9）中的核心知识、底层原理、实战案例</li> <li id="li2">正式课六七周：AJAX、HTTP、NODE、WEBPACK、GIT、前后端交互、跨域...</li>  <li>正式课第八~十周：VUE全家桶（VUE核心源码、VUEX、VUE-ROUTER源码解读）实战应用</li> <li id="li4">正式课第十一/十二周：REACT全家桶（所有的核心源码解读）实战应用</li> 上面这些东西学会了，找工作已经没问题了 <li>正式课第十三~十四周：小程序开发、TypeScript、企业讲师实战分享、毕设答辩、简历、就业指导以及一些最新的内容扩展</li>  <li>长期的，不定时的内部分享课：前端需要的，在我们课程中基本都有，而且基础+实战+源码全方面都包含了</li> </ul> </div>  <script> // 需求：previousElementSibling是获取上一个哥哥元素节点（兼容性） previousSibling获取上一个哥哥节点（没有兼容性的） =>获取当前节点的所有元素哥哥节点（兼容所有的浏览器） JQ中的prevAll这个方法就是干这个的 /* function prevAll(node) { let result = []; // 获取它爹 let parent = node.parentNode; // 获取它爹中的儿子（自己和他所有的兄弟） let nodeList = parent.childNodes; // 循环所有节点，元素类型的是我们想要的，并且找到当前节点后就不在循环了 for (let i = 0; i < nodeList.length; i++) { let item = nodeList[i]; if (item === node) { // 找到的是自己 break; } // 找的不是自己，我们把元素节点存储起来 if (item.nodeType === 1) { result.push(item); } } return result; } */ /* * 获取当前节点的哥哥节点，再获取哥哥节点的哥哥节点...一直找到没有哥哥节点为止（没有哥哥节点，结果为NULL）；再查找的过程中，把所有找到的元素节点存储起来即可； * => 循环不知道具体次数（不知道找多少次） =>while循环 */ function prevAll(node) { let prev = node.previousSibling, result = []; // 循环找他的哥哥，一直到没有哥哥了为止 while (prev !== null) { // 把找到的哥哥中是元素节点的存储起来 if (prev.nodeType === 1) { result.unshift(prev); } prev = prev.previousSibling; } return result; } /* 获取所有的弟弟元素节点 */ /* function nextAll(node) { // 获取其父亲中所有的儿子 let nodeList = node.parentNode.childNodes, result = []; // 倒着从最后一项开始循环 for (let i = nodeList.length - 1; i >= 0; i--) { let item = nodeList[i]; if (item === node) break; item.nodeType === 1 ? result.unshift(item) : null; } return result; } */ function nextAll(node) { let result = [], next = node.nextSibling; while (next !== null) { next.nodeType === 1 ? result.push(next) : null; next = next.nextSibling; } return result; } /* 获取所有的兄弟元素节点：所有的哥哥+所有的弟弟 */ /* function siblings(node) { // 所有的儿子中一定包含了，我和我的兄弟们 let nodeList = node.parentNode.childNodes, result = []; // 依次遍历每一个节点，把非元素和我本身除外，其余的存储起来 for (let i = 0; i < nodeList.length; i++) { let item = nodeList[i]; if (item.nodeType === 1 && item !== node) { result.push(item); } // if (item.nodeType !== 1 || item === node) { // continue; // } // result.push(item); } return result; } */ function siblings(node) { // 分别调用两个方法获取所有的哥哥和所有的弟弟，就是所有的兄弟 return prevAll(node).concat(nextAll(node)); } /* 获取当前节点的索引：他在所有兄弟中的排行 */ function index(node) { // 它有几个哥哥，那么它的索引就是几 return prevAll(node).length; } let li4 = document.getElementById('li4'); console.log(index(li4)); </script> ~~~ ![](https://img.kancloud.cn/7e/9d/7e9da7a112d9bc10d604eec62b8a387d_704x688.png) ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>珠峰培训 - 微信：18310612838</title>  <link rel="stylesheet" href="reset.min.css"> <style> .tabBox { margin: 20px auto; width: 500px; } .tabBox .tab { position: relative; top: 1px; } .tabBox .tab li { float: left; margin-right: 10px; padding: 0 10px; height: 35px; line-height: 35px; font-size: 14px; border: 1px solid #AAA; background: #f6f7fb; cursor: pointer; } .tabBox .tab li.active { background: #FFF; border-bottom-color: #FFF; } .tabBox .container div { display: none; padding: 10px; height: 100px; border: 1px solid #AAA; background: #FFF; } .tabBox .container div.active { display: block; } </style> </head> <body> <section class="tabBox" id="tabBox"> <ul class="tab clearfix"> <li class="active">编程</li> <li>读书</li> <li>运动</li> </ul>  <div class="container"> <div class="active">编程可以使我“赚取高薪”</div> <div>读书可以使我“修身养性”</div> <div>运动可以使我“身体健康”</div> </div> </section>  <script src="utils.js"></script> <script> var navList = document.querySelectorAll('.tab li'), divList = document.querySelectorAll('.container div'); for (var i = 0; i < navList.length; i++) { navList[i].onclick = function () { // 1.让当前点击的这个LI和DIV有选中的样式 // 获取当前点击LI的索引 var curIndex = index(this); navList[curIndex].className = 'active'; divList[curIndex].className = 'active'; // 2.其余的（兄弟）没有选中样式 var otherNav = siblings(navList[curIndex]), otherDiv = siblings(divList[curIndex]); for (var j = 0; j < otherNav.length; j++) { otherNav[j].className = ''; otherDiv[j].className = ''; } }; } </script> </body> </html> ~~~