JS的DOM节点

* 1、DOM节点

 * 一般来说我们分为三个大类   
     元素节点(标签)/文本节点(标签内的文字)/属性节点(标签上的属性)

• 元素节点
  • 通过getElementBy. ..获取到的都是元紊节点
• 属性节点
  • 通过getAttribute获取到的都是属性节点
• 文本节点
  • 通过innerText获取到的就是元素的文本节点

* 2、获取子节点

`<div>
    <p>你好</p>
    <span>测试文本</span>
    <h1>JS123456789!!!!</h1>
 </div>`

• 1.获取某一结点下所有的子一级 节点，获取到的是一个伪数组
  • 语法：元素.childNodes

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

• 2.获取某一节点下所有的子一级 元素节点，获取到的是一个伪数组
  • 语法：元素.children

    // 0.获取元素
    var oDiv = document.querySelector('div')
    console.log(oDiv.children) //这里只有div内部的标签

• 3.获取某一节点下子一级的 第一个节点
  • 语法：元素.firstChild

    // 0.获取元素
    var oDiv = document.querySelector('div')
    console.log(oDiv.firstChild) //#text

• 4.获取某一节点下子一级的 最后一个节点
  • 语法：元素.lastChild

    // 0.获取元素
    var oDiv = document.querySelector('div')
    console.log(oDiv.lastChild) //#text

• 5.获取某一节点下子一级的 第一个元素节点(标签节点)
  • 语法：元素.firstElementChild

    // 0.获取元素
    var oDiv = document.querySelector('div')
    console.log(oDiv.firstElementChild) //<p>你好</p>

• 6.获取某一节点下子一级的 最后一个元素节点
  • 语法：元素.lastElementChild

    // 0.获取元素
    var oDiv = document.querySelector('div')
    console.log(oDiv.lastElementChild) //<h1>JS123456789!!!!</h1>

* 3、获取兄弟节点

`<div>
    <p>你好</p>
    <span>测试文本</span>
    <h1>JS123456789!!!!</h1>
 </div>`

• 1.获取对应的 下一个兄弟节点
  • 语法：元素.nextSibling

    // 0.获取元素
    var oSpan = document.querySelector('span')
    console.log(oSpan.nextSibling) //#text    

• 2.获取对应的 上一个兄弟节点
  • 语法：元素.previousSibling

    // 0.获取元素
    var oSpan = document.querySelector('span')
    console.log(oSpan.previousSibling) //#text

• 3.获取对应的 下一个兄弟元素节点
  • 语法：元素.nextElementSibling

    // 0.获取元素
    var oSpan = document.querySelector('span')
    console.log(oSpan.nextElementSibling) //<h1>JS123456789!!!!</h1>

• 4.获取对应的 上一个兄弟元素节点
  • 语法：元素.previousElementSibling

    // 0.获取元素
    var oSpan = document.querySelector('span')
    console.log(oSpan.previousElementSibling) //<p>你好</p>

* 4、获取父节点与属性节点

`<div>
    <p>你好</p>
    <span>测试文本</span>
    <h1>JS123456789!!!!</h1>
 </div>`

• 1.父节点
  • 语法：元素.parentNode

    //  0.获取元素
    var oH = document.querySelector('h1')
    console.log(oH.parentNode) //div

• 2.获取元素的所有属性节点
  • 语法：元素.attributes

    //  0.获取元素
    var oH = document.querySelector('h1')
    console.log(oH.attributes) // 获取到的是属性节点
    console.log(oH.getAttribute('id')) //h1_box 获取到的是属性值
    console.log(oH.attributes[0])

* 5、节点属性

`<ul text="我是UL的一个属性">
    <li>你好</li>
    <span>测试文本</span>
 </ul>`

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

• 1.nodeType 节点类型
  • 节点中的一个属性 nodeType 能够区分当前节点是什么类型
    • 1 -> 元素节点(标签)
    • 2 -> 属性节点(标签上的属性)
    • 3 -> 文本节点(标签内的文字)

      console.log('元素节点：', eleNode.nodeType) //1
      console.log('属性节点：', attrNode.nodeType) //2
      console.log('文本节点：', textNode.nodeType) //3
  

• 2.nodeName 节点名称
  • 元素节点(标签) -> 大写的标签名 (LI/UL/DIV)
  • 属性节点(标签上的属性) -> text (属性名)
  • 文本节点(标签内的文字) -> #text

     console.log('元素节点：', eleNode.nodeName) //LI
     console.log('属性节点：', attrNode.nodeName) //text
     console.log('文本节点：', textNode.nodeName) //#text
  

• 3.nodeValue 节点的值
  • 元素节点(标签) -> 没有nodeValue 也就是会输出null
  • 属性节点(标签上的属性) -> 对应的属性值
  • 文本节点(标签内的文字) -> 对应的文本内容

      console.log('元素节点：', eleNode.nodeValue) //null
      console.log('属性节点：', attrNode.nodeValue) //我是UL的一个属性
      console.log('文本节点：', textNode.nodeValue) //