DOM增删改查基本操作

基本概念

DOM是JavaScript操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作（比如增删内容）。

浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。所以，DOM可以理解成网页的编程接口。DOM有自己的国际标准，目前的通用版本是DOM 3，下一代版本DOM 4正在拟定中。

严格地说，DOM不属于JavaScript，但是操作DOM是JavaScript最常见的任务，而JavaScript也是最常用于DOM操作的语言。本章介绍的就是JavaScript对DOM标准的实现和用法。

基本操作

DOM的基本操作和其他工作一样：增删改查。下面我会总结一下简单的操作。

1、获取

API获取元素

• Document.getElementById(String id)

  因为已申明通过Id获得元素，所以参数 String id 不能再加#

• Document.getElementsByClassName(String className）

  获得该className的集合，是类似数组的对象

• Document.getElementsByTagName(String tagName)

• 获得该tagName的集合，是类似数组的对象

• Document.querySelector(String selector)

  参数String selector 是选择器，class需要加 . id需要加 #

• Document.querySelectorAll(String selector)

  获得使用该选择器的集合，是类似数组的对象

利用节点获取元素

基本概念：

• 父节点关系（parentNode）：直接的那个上级节点
• 子节点关系（childNodes）：直接的下级节点
• 同级节点关系（sibling）：拥有同一个父节点的节点

• Node.nextSibling

  返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null

• Node.previousSibling

  返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null

• Node.parentNode

  返回当前节点的父节点

  //从父节点移除指定节点
  
  if (node.parentNode) {
    node.parentNode.removeChild(node)
  }
  

• parentElement

  返回当前节点的父Element节点

  //指定节点的父Element节点的CSS属性
  if (node.parentElement) {
    node.parentElement.style.color = "red"
  }
  

• childNodes

  返回一个NodeList集合，成员包括当前节点的所有子节点

  NodeList对象是一个动态集合，一旦子节点发生变化，立刻会反映在返回结果之中

  var ulElementChildNodes = document.querySelector('ul').childNodes;
  

  firstChild
  ​ 返回指定节点的第一个子节点，如果该节点没有子节点，则返回 null
  lastChild
  ​ 返回指定节点的最后一个子节点，如果没有子节点，则返回 null

2、增加

• appendChild()

  *接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点

• insertBefore()

  *将某个节点插入当前节点的指定位置。它接受两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点

• createElement()、createAttribute()、createTextNode()

  *创建元素、属性、文本 节点

• before()

  *在当前节点的前面，插入一个同级节点

• after()

  *在当前节点的后面，插入一个同级节点

• Node.cloneNode()

  *用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不克隆子节点。

3、删除

• Node.removeChild()

  *接受一个子节点作为参数，用于从当前节点移除该子节点。它返回被移除的子节点。

• remove()

  *用于移除当前节点 el.remove()

4、修改

• Node.replaceChild()

  *将一个新的节点，替换当前节点的某一个子节点。它接受两个参数，第一个参数是用来替换的新节点，第二个参数将要被替换走的子节点。它返回被替换走的那个节点。

• replaceWith()

  *使用参数指定的节点，替换当前节点。如果参数是节点对象，替换当前节点的就是该节点对象；如果参数是文本，替换当前节点的就是参数对应的文本节点。

总结

汇总了一些使用DOM操作的基本方法。参考摘录至 阮一峰的JavaScript标准参考教程。