Dom 基本操作 - 节点操作

---

theme: smartblue

一、 节点概述

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

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

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

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

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

二、节点操作

2.1 节点层级

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

2.2 父节点

```

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

</script>

```

2.3 子节点

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

```

• 1
• 2
• 3
• 4
• 5

<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>

```

2.4 兄弟节点

```

• 1
• 2
• 3
• 4
• 5

<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>

```

2.5 创建节点

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

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

```

• 1
• 2
• 3
• 4
• 5

<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>

```

2.6 删除节点

```

• 1
• 2
• 3
• 4
• 5

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

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

</script>

```

2.7 复制节点

```

• 1
• 2
• 3
• 4
• 5

<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>

```