JS节点和描述节点之间的关系及应用

js节点和描述节点之间的关系及应用

节点 : Node(页面中所有东西都是节点)

节点集合： NodeList （getElementsByName / querySelectorAll获取的都是节点集合）

• 元素节点（元素标签）
  • nodeType： 1
  • nodeName： 大写的标签名
  • nodeValue: null
• 文本节点
  • nodeType： 3
  • nodeName： ’#Text’
  • nodeValue: 文本内容
• 注释节点
  • nodeType：8
  • nodeName： ’#comment’
  • nodeValue: 注释内容
• 文档节点
  • nodeType： 9
  • nodeName： ’#document’
  • nodeValue: null
• ……

描述这些节点之间的关系属性

• parent：获取父级节点
• childNodes ： 获取所有子节点
• firstChild:获取第一个子节点
• lastChild：获取最后一个子节点
• children： 获取所有的元素子节点（子元素标签）
• firstElementChild/lastElementChild:获取第一个/最后一个元素子节点（不兼容ie678）
• previousSibling:获取上一个兄弟节点
• previousElementSibling/nextElementSibling:获取上/下一个兄弟元素节点（不兼容ie678）

节点的应用

 <ul id="box">
        <li>git,npm操作</li>
        <li>面相对象和原型</li>
        <li>闭包作用域，堆栈内存处理</li>
        <li>es6从入门到放弃</li>
        <li>Dom事件</li>
    </ul>
    <script>
        let box=document.getElementById("box")//<li>git,npm操作</li>
        console.log(box.firstElementChild);//
        console.log(box.firstElementChild.nextElementSibling)//<li>面相对象和原型</li>
    </script>

封装元素子节点children

//封装元素子节点children
        function children(content){
            //现获取所有子节点
            let res=[],
            nodeList=content.childNodes;
            //循环所有子节点
            for (let i = 0; i < array.length; i++) {
                var item=NodeList;
                item.nodeType===1?res.push(item):null
            }
            return res;

封装获取上一个兄弟元素节点

//获取上一个兄弟元素节点
        function prev(content){
            //先找上一个兄弟节点
            var pre=content.previousSibling;
            while(pre.nodeType !== 1){
                pre=pre.previousSibling;
            }
            return pre

        }