Dom 基本操作 - 节点操作一、节点概述网页中的所有内容都是节点(标签、属性、文本、注释等)，在DOM中，节点使

一、节点概述

网页中的所有内容都是节点(标签、属性、文本、注释等)，在DOM中，节点使用node 来表示。

HTML DOM 树中的所有节点均可通过JavaScript进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除。

一般地，节点至少拥有 nodeType(节点类型)、nodeName(节点名称) 和 nodeValue(节点值) 这三个基本属性。

元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3(文本节点包含文字、空格、换行等)

我们在实际开发中，节点操作主要操作的是元素节点

二、节点操作

2.1 节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

2.2 父节点

<html>
  <body>
   <div class="parent">
    <div class="son"></div>
   </div>

    <script>
     var son = document.querySelector('.son')
     // 获取父节点 - 得到的是离元素最近的父节点
     // 如果找不到父节点，就返回null
     console.log(son.parentNode)

    </script>
    
  </body>
</html>

2.3 子节点

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为及时更新的集合

<html>
  <body>
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
   </ul>

    <script>
     var ul = document.querySelector('ul')
    // 1. 包含子节点中所有的 文本，元素节点 等等
     console.log(ul.childNodes)

      // 若只想获取里面的元素节点，需要专门处理
      for(var i=0;i<ul.childNodes.length;i++){
        if(ul.childNodes[i].nodeType==1){
          // 元素节点
          console.log(ul.childNodes[i])
        }
      }

      // 2. 获取所有的子元素节点
      console.log(ul.children)

      // 3.1 获取第一个子节点, 不论是文本节点还是元素节点
      console.log(ul.firstChild)

      // 3.2 获取第一个子元素节点 - ie9 以上才支持
      console.log(ul.firstElementChild)

      // 3.3 获取最后一个子元素节点 - ie9 以上才支持
      console.log(ul.lastElementChild)

      // 3.4 若需要考虑兼容性问题
      console.log(ul.children[0])

    </script>
    
  </body>
</html>

2.4 兄弟节点

<html>
  <body>
   <ul>
    <li>1</li>
    <li>2</li>
    <li id="third">3</li>
    <li>4</li>
    <li>5</li>
   </ul>

    <script>
     var li = document.querySelector('#third')

     // 返回当前元素的下一个兄弟节点, 同样获取的也是包含所有节点类型的
     console.log(li.nextSibling)
   
      // 返回上一个兄弟节点
      console.log(li.previousSibling)

      // 返回下一个兄弟元素节点 - ie9 以上才支持
      console.log(li.nextElementSibling)

      // 返回上一个兄弟元素节点 - ie9 以上才支持
      console.log(li.previousElementSibling)

    </script>
    
  </body>
</html>

2.5 创建节点

document.createElement('tagName') 方法创建中 tagName 指定的 HTM 元素。

因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

<html>
  <body>
   <ul>
    <li>1</li>
    <li>2</li>
    <li id="third">3</li>
    <li>4</li>
    <li>5</li>
   </ul>

    <script>
    // 创建元素节点
    var li = document.createElement("li")

    // 添加节点 - 将一个节点添加到指定父节点的子节点列表的末尾
    var ul = document.querySelector('ul')
    ul.appendChild(li)  

    // 添加节点 - 将一个节点添加到父节点的指定子节点的前面
      var li2 = document.createElement("li")
      ul.insertBefore(li2,ul.children[2])

    </script>
    
  </body>
</html>

2.6 删除节点

<html>
  <body>
   <ul>
    <li>1</li>
    <li>2</li>
    <li id="third">3</li>
    <li>4</li>
    <li>5</li>
   </ul>

    <script>
    var ul = document.querySelector('ul')

    // 删除元素
    ul.removeChild(ul.children[2])

    </script>
    
  </body>
</html>

2.7 复制节点

<html>
  <body>
   <ul>
    <li>1</li>
    <li>2</li>
    <li id="third">3</li>
    <li>4</li>
    <li>5</li>
   </ul>

    <script>
    var ul = document.querySelector('ul')

    // 克隆节点 - 若括号的参数为空或者false，则是浅拷贝
    // 即只是复制标签而不复制内容
    var clone = ul.children[3].cloneNode()
    ul.appendChild(clone)

    // true 为深拷贝，即复制标签也复制内容
    var clone2 = ul.children[3].cloneNode(true)
    ul.appendChild(clone2)
    </script>
    
  </body>
</html>

Dom 基本操作 - 节点操作

一、 节点概述