~~~ <div class="box" id="box"> <!-- 我就是一个注释 --> <h2 class="title">课程大纲</h2> <ul> <li>正式课前五周：JS（包含ES6~ES9）中的核心知识、底层原理、实战案例</li> <li id="li2">正式课六七周：AJAX、HTTP、NODE、WEBPACK、GIT、前后端交互、跨域...</li> <!-- 上述都是JS最底层的核心知识，必须掌握扎实 --> <li>正式课第八~十周：VUE全家桶（VUE核心源码、VUEX、VUE-ROUTER源码解读）实战应用</li> <li id="li4">正式课第十一/十二周：REACT全家桶（所有的核心源码解读）实战应用</li> 上面这些东西学会了，找工作已经没问题了 <li>正式课第十三~十四周：小程序开发、TypeScript、企业讲师实战分享、毕设答辩、简历、就业指导以及一些最新的内容扩展</li> <!-- 上述东西是现在市面上要求的能力，这些能力需要牢牢掌握，有独立全栈实战开发能力，毕设项目做不出来，不允许毕业 --> <li>长期的，不定时的内部分享课：前端需要的，在我们课程中基本都有，而且基础+实战+源码全方面都包含了</li> </ul> </div> ~~~ ~~~ <script> /* * 节点NODE：所有页面中包含的东西，都被称为节点 * document文档节点 * nodeType:9 * nodeName:"#document" * nodeValue:null * 元素节点：元素标签 * nodeType:1 * nodeName:"大写标签名" * nodeValue:null * 文本节点：文字或者标签之间的空格和换行也被当做文本节点 * nodeType:3 * nodeName:"#text" * nodeValue:文本内容 * 注释节点：注释内容 * nodeType:8 * nodeName:"#comment" * nodeValue:注释内容 * ...... */ //=====描述节点和节点之间的关系属性，基于这些属性可以获取到指定的节点 // [CONTAINER].childNodes：获取当前容器中所有的子节点（包含各种类型的节点） // [CONTAINER].children：获取当前容器中所有的元素子节点（只有元素标签的，在IE低版本浏览器中，也会把注释当做元素节点） // [NODE].parentNode：获取某一个节点的父节点 // [NODE].previousSibling：获取某一个节点的上一个哥哥节点 // [NODE].previousElementSibling：获取某一个节点的上一个哥哥元素节点（不兼容IE低版本） // [NODE].nextSibling：获取某一个节点的下一个弟弟节点 // [NODE].nextElementSibling：获取某一个节点的下一个弟弟元素节点（不兼容IE低版本） // [CONTAINER].firstChild：获取容器中第一个子节点 // [CONTAINER].firstElementChild：获取容器中第一个元素子节点（不兼容IE低版本） // [CONTAINER].lastChild：获取容器中最后一个子节点 // [CONTAINER].lastElementChild：获取容器中最后一个元素子节点（不兼容IE低版本） // var box = document.getElementById('box'); // console.log(box.childNodes); //=>获取的是一个节点集合，包含容器中的所有类型节点（空格换行是文本节点） =>7个 // console.log(box.children); //=>获取的是一个元素集合，只有元素节点 =>2个 // 兼容问题：在IE6~8中 // 1. children获取的是3个，因为它把注释也当做元素节点处理的 // 2. childNodes获取的也是3个，因为在这些浏览器中，不会把空格和换行当做文本节点（不认为这是节点） /* 获取指定容器CONTAINER中的所有元素子节点，需要兼容所有的浏览器 */ /* function children(container) { // 获取所有的子节点，遍历这些节点，所有NODETYPE===1的就是我们想要的元素子节点 var nodeList = container.childNodes, result = []; for (var i = 0; i < nodeList.length; i++) { var itemNode = nodeList[i]; if (itemNode.nodeType === 1) { // 元素节点 result.push(itemNode); } } return result; } var arr = children(box); console.log(arr); */ </script> ~~~