DOM节点

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

元素节点：通过getElementBy... 获取到的都是元素节点

属性节点：通过getAttribute 获取到的都是属性节点

文本节点：通过innerText 获取到的就是元素的文本节点

获取子节点

1.获取某一节点下所有的子一级节点获取到的是一个伪数组

语法：元素.childNodes

2.获取某一个节点下所有的子一节元素节点获取到的是一个伪数组

语法：元素.children

3.获取某一节点下子一级的第一个节点

语法：元素.firstChild

4.获取某一节点下子一级的最后一个节点

语法：元素.lastChild

5.获取某一节点下子一级的第一个元素节点

语法：元素.firstElementChild

6.获取某一节点下子一级的最后一个元素节点

语法：元素.lastElementChild

<body>
    <div>
    <p>你好</p>
    <span>测试文本</span>
    <h1>JS是世界上最优美的语言</h1>
  </div>

  <script>
      // 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内部的标签


    // 3.lastChild
    // 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>
  </script>
  </body>

获取兄弟节点

1.获取对应的下一个兄弟节点

语法：元素.nextSibling

2.获取对应的上一个兄弟节点

语法：元素.previousSibling

3.获取对应的下一个兄弟元素节点

语法：元素.nextElementSibling

4.获取对应的上一个兄弟元素节点

语法：元素.previousElementSibling

<body>
    <div>
    <p>你好</p>
    <span>测试文本</span>
    <h1>JS是世界上最优美的语言</h1>
  </div>

  <script>
      // 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>JS是世界上最优美的语言</h1>

    // 4.previousElementSibling
    console.log(oSpan.previousElementSibling) //<p>你好</p>
  </script>
  </body>

获取父节点与属性节点

1.父节点

语法：元素.parentNode

2.获取元素的所有属性节点

语法：元素.attributes

<body>
    <div>
    <p>你好</p>
    <span>测试文本</span>
    <h1 id="h1_box" class="h1_box_cla" test="QF001" num="100">JS是世界上最优美的语言</h1>
  </div>
  <script>
      // 0.获取节点
    var oH = document.querySelector('h1')

    // 1.parentNode
    console.log(oH.parentNode)

    // 2.attributes
    console.log(oH.attributes)
    console.log(oH.attributes[0])
  </script>
</body>

节点属性

1.nodeType

节点中的一个属性 nodeType 能够区分当前节点是什么类型

1 --- 元素节点

2 --- 属性节点

3 --- 文本节点

2.nodeName 节点名称

元素节点 --- 大写的标签名 (LI UL DIV)

属性节点 --- text (属性名)

文本节点 --- #text

3.nodeValue 节点的值

元素节点 --- 没有 nodeValue ，会输出null

属性节点 --- 对应的属性值

文本节点 --- 对应的文本内容

关于 JS 的 DOM 节点