获取子 兄弟 父节点 节点属性 创建元素文本节点 增删改克隆节点

获取子节点

    <div> //text
        <p>你好</p> //text
        <span>测试文本</span> //text
        <h1>JS 是世界上最优美的语言</h1> //text 
    </div>
  // 0. 获取元素
        var oDiv = document.querySelector('div')

        // 1. childNodes
         console.log(oDiv.childNodes)
        /**
         *  拿到的是一个伪数组, 里边有 7 个节点
         *      [0]: text  从 <div> 一直到 <p> 中间有一个换行和一堆空格     这是一个文本节点
         *      [1]: p      这个就是 p 标签, 他是第二个节点, 这是一个 元素节点
         *      [2]: text   从 </p> 一直到 <span> 中间有一个换行和一堆空格  这是一个文本节点
         *      ....
        */

        // 2. children
        // console.log(oDiv.children)  // 这里只有 div 内部的标签  p  span  h1

        // 3. firstChild
         console.log(oDiv.firstChild)    // #text

        // 4. lastChild
         console.log(oDiv.lastChild) // #text

        // 5. firstElementChild
        console.log(oDiv.firstElementChild)//<p>你好</p>

        // 6. lastElementChild
        console.log(oDiv.lastElementChild)//  <h1>JS 是世界上最优美的语言</h1>

获取兄弟节点

 <div> //text
        <p>你好</p> //text
        <span>测试文本</span> //text
        <h1>JS 是世界上最优美的语言</h1> //text
    </div>
        // 0. 获取元素
        var oSpan = document.querySelector('span')

        // 1. nextSibling
        console.log(oSpan.nextSibling)  // #text

        // 2. previousSibling
        console.log(oSpan.previousSibling)  // #text

        // 3. nextElementSibling
        console.log(oSpan.nextElementSibling)   // h1

        // 4. previousElementSibling
        console.log(oSpan.previousElementSibling)   // p

获取父节点

节点属性

 <ul text="我是 UL 的一个属性">
        <li>你好</li>
    </ul>
 // 0. 获取元素
        var oUl = document.querySelector('ul')
        // 1. 元素节点
        var eleNode = oUl.firstElementChild
        // 2. 属性节点
        var attrNode = oUl.attributes[0]
        // 3. 文本节点
        var textNode = oUl.firstChild
        
   // 1. nodeType
        console.log('元素节点: ', eleNode.nodeType)
        console.log('属性节点: ', attrNode.nodeType)
        console.log('文本节点: ', textNode.nodeType)

        // 2. nodeName
        console.log('元素节点: ', eleNode.nodeName)
        console.log('属性节点: ', attrNode.nodeName)
        console.log('文本节点: ', textNode.nodeName)

        // 3. nodeValue
        console.log('元素节点: ', eleNode.nodeValue)
        console.log('属性节点: ', attrNode.nodeValue)
        console.log('文本节点: ', textNode.nodeValue)

创建元素节点 创建文本节点

 // 创建元素节点
        var divBox = document.createElement('div')
        console.log(divBox);

        // 创建文本节点
        var  text = document.createTextNode('我是一段文本')
        console.log(text);

插入节点尾部或前面

  <div class="box">
        <p>我是通过 HTML 手写出来的 P 标签</p>
    </div>
  
// 1.1 创建一个元素节点
        var oDiv = document.createElement('div')

// 1.2 创建一个文本节点  (了解)
        var oText = document.createTextNode('我是通过 JS 创建出来的文本节点')
// 1.3 将刚才创建的文本节点, 添加到元素节点内   元素.appendChild(要添加的节点)
            oDiv.appendChild(oText)
//  2. 向页面中增加一个节点
//  0. 获取元素
        var myDiv = document.getElementsByClassName('box')[0]
// 2.1 元素.appendChild(要添加的节点)
        myDiv.appendChild(oDiv)

删除节点

修改节点

克隆节点