首页 JavaScript

# 节点操作

  1. 利用 DOM 提供的方法获取元素
    • document.getElementById()
    • document.getElementByTagName()
    • document.querySelector 等
    • 逻辑性不强，繁琐
  2. 利用节点层级关系获取元素
    • 利用父子兄节点获取元素
    • 逻辑性强，但是兼容性稍差

# 节点概述

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

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

# 节点层级

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

# 父级节点

node.parentNode

  • parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
  • 如果指定的节点没有父节点则返回 null

# 子节点

node.childNodes

node.children

  • childNodes 获取所有的子节点，包含元素节点 文本节点等
  • children 获取所有的子元素节点 也是实际开发中常用的

node.firstChild

node.firstElementChild

  • firstChild 第一个子节点 不管是文本节点还是元素节点
  • firstElementChild 第一个子元素节点

# 兄弟节点

node.nextSibling

node.previousSibling

  • nextSibling 返回当前元素的下一个兄弟节点，找不到则返回 null. 同样，也是包含所有的节点
  • previousSibling 返回当前元素上一个兄弟节点，找不到则返回 null, 也是包含所有的节点

node.nextElementSibling

node.previousElementSibling

  • nextElementSibling 返回当前元素的下一个兄弟元素节点，找不到则返回 null.
  • previousElementSibling 返回当前元素上一个兄弟元素节点，找不到则返回 null.

# 创建节点

1
document.createElement('tagName')

document.createElement () 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点

# 添加节点

node.appendChild(child)

node.insertBefore(child, 指定元素)

  • node.appendChild () 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素
  • node.insertBefore (child, 指定元素) 方法将一个节点添加到父节点的指定子节点的前面。类似于 CSS 里面的 before 伪元素

# 删除节点

node.removeChild(child)

  • node.removeChild () 方法从 DOM 中删除一个子节点，返回删除的节点

# 复制节点

node.cloneNode()

  • node.cloneNode () 方法返回调用该方法的节点的一个副本。也称为克隆节点 / 拷贝节点
  • node.cloneNode () 括号里面为空或者是 false, 浅拷贝，值复制标签不复制里面的内容
  • 如果括号参数为 true, 则是深拷贝，会复制节点本身以及里面所有的子节点