DOM增刪改查基本操作

基本概念

DOM是JavaScript操作網頁的接口，全稱為“文檔對象模型”（Document Object Model）。它的作用是將網頁轉為一個JavaScript對象，從而可以用腳本進行各種操作（比如增刪內容）。

瀏覽器會根據DOM模型，將結構化文檔（比如HTML和XML）解析成一系列的節(jié)點，再由這些節(jié)點組成一個樹狀結構（DOM Tree）。所有的節(jié)點和最終的樹狀結構，都有規(guī)范的對外接口。所以，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)

  獲得使用該選擇器的集合，是類似數組的對象

利用節(jié)點獲取元素

基本概念：

• 父節(jié)點關系（parentNode）：直接的那個上級節(jié)點
• 子節(jié)點關系（childNodes）：直接的下級節(jié)點
• 同級節(jié)點關系（sibling）：擁有同一個父節(jié)點的節(jié)點

• Node.nextSibling

  返回緊跟在當前節(jié)點后面的第一個同級節(jié)點。如果當前節(jié)點后面沒有同級節(jié)點，則返回null

• Node.previousSibling

  返回當前節(jié)點前面的、距離最近的一個同級節(jié)點。如果當前節(jié)點前面沒有同級節(jié)點，則返回null

• Node.parentNode

  返回當前節(jié)點的父節(jié)點

  //從父節(jié)點移除指定節(jié)點
  
  if (node.parentNode) {
    node.parentNode.removeChild(node)
  }
  

• parentElement

  返回當前節(jié)點的父Element節(jié)點

  //指定節(jié)點的父Element節(jié)點的CSS屬性
  if (node.parentElement) {
    node.parentElement.style.color = "red"
  }
  

• childNodes

  返回一個NodeList集合，成員包括當前節(jié)點的所有子節(jié)點

  NodeList對象是一個動態(tài)集合，一旦子節(jié)點發(fā)生變化，立刻會反映在返回結果之中

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

  firstChild
  ? 返回指定節(jié)點的第一個子節(jié)點，如果該節(jié)點沒有子節(jié)點，則返回 null
  lastChild
  ? 返回指定節(jié)點的最后一個子節(jié)點，如果沒有子節(jié)點，則返回 null

2、增加

• appendChild()

  *接受一個節(jié)點對象作為參數，將其作為最后一個子節(jié)點，插入當前節(jié)點

• insertBefore()

  *將某個節(jié)點插入當前節(jié)點的指定位置。它接受兩個參數，第一個參數是所要插入的節(jié)點，第二個參數是當前節(jié)點的一個子節(jié)點

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

  *創(chuàng)建元素、屬性、文本 節(jié)點

• before()

  *在當前節(jié)點的前面，插入一個同級節(jié)點

• after()

  *在當前節(jié)點的后面，插入一個同級節(jié)點

• Node.cloneNode()

  *用于克隆一個節(jié)點。它接受一個布爾值作為參數，表示是否同時克隆子節(jié)點，默認是false，即不克隆子節(jié)點。

3、刪除

• Node.removeChild()

  *接受一個子節(jié)點作為參數，用于從當前節(jié)點移除該子節(jié)點。它返回被移除的子節(jié)點。

• remove()

  *用于移除當前節(jié)點 el.remove()

4、修改

• Node.replaceChild()

  *將一個新的節(jié)點，替換當前節(jié)點的某一個子節(jié)點。它接受兩個參數，第一個參數是用來替換的新節(jié)點，第二個參數將要被替換走的子節(jié)點。它返回被替換走的那個節(jié)點。

• replaceWith()

  *使用參數指定的節(jié)點，替換當前節(jié)點。如果參數是節(jié)點對象，替換當前節(jié)點的就是該節(jié)點對象；如果參數是文本，替換當前節(jié)點的就是參數對應的文本節(jié)點。

總結

匯總了一些使用DOM操作的基本方法。參考摘錄至 阮一峰的JavaScript標準參考教程。