DOM增刪改查基本操作

基本概念

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

瀏覽器會根據(jù)DOM模型，將結(jié)構(gòu)化文檔（比如HTML和XML）解析成一系列的節(jié)點(diǎn)，再由這些節(jié)點(diǎn)組成一個樹狀結(jié)構(gòu)（DOM Tree）。所有的節(jié)點(diǎn)和最終的樹狀結(jié)構(gòu)，都有規(guī)范的對外接口。所以，DOM可以理解成網(wǎng)頁的編程接口。DOM有自己的國際標(biāo)準(zhǔn)，目前的通用版本是DOM 3，下一代版本DOM 4正在擬定中。

嚴(yán)格地說，DOM不屬于JavaScript，但是操作DOM是JavaScript最常見的任務(wù)，而JavaScript也是最常用于DOM操作的語言。本章介紹的就是JavaScript對DOM標(biāo)準(zhǔn)的實(shí)現(xiàn)和用法。

基本操作

DOM的基本操作和其他工作一樣：增刪改查。下面我會總結(jié)一下簡單的操作。

1、獲取

API獲取元素

• Document.getElementById(String id)

  因?yàn)橐焉昝魍ㄟ^Id獲得元素，所以參數(shù) String id 不能再加#

• Document.getElementsByClassName(String className）

  獲得該className的集合，是類似數(shù)組的對象

• Document.getElementsByTagName(String tagName)

• 獲得該tagName的集合，是類似數(shù)組的對象

• Document.querySelector(String selector)

  參數(shù)String selector 是選擇器，class需要加 . id需要加 #

• Document.querySelectorAll(String selector)

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

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

基本概念：

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

• Node.nextSibling

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

• Node.previousSibling

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

• Node.parentNode

  返回當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)

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

• parentElement

  返回當(dāng)前節(jié)點(diǎn)的父Element節(jié)點(diǎn)

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

• childNodes

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

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

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

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

2、增加

• appendChild()

  *接受一個節(jié)點(diǎn)對象作為參數(shù)，將其作為最后一個子節(jié)點(diǎn)，插入當(dāng)前節(jié)點(diǎn)

• insertBefore()

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

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

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

• before()

  *在當(dāng)前節(jié)點(diǎn)的前面，插入一個同級節(jié)點(diǎn)

• after()

  *在當(dāng)前節(jié)點(diǎn)的后面，插入一個同級節(jié)點(diǎn)

• Node.cloneNode()

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

3、刪除

• Node.removeChild()

  *接受一個子節(jié)點(diǎn)作為參數(shù)，用于從當(dāng)前節(jié)點(diǎn)移除該子節(jié)點(diǎn)。它返回被移除的子節(jié)點(diǎn)。

• remove()

  *用于移除當(dāng)前節(jié)點(diǎn) el.remove()

4、修改

• Node.replaceChild()

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

• replaceWith()

  *使用參數(shù)指定的節(jié)點(diǎn)，替換當(dāng)前節(jié)點(diǎn)。如果參數(shù)是節(jié)點(diǎn)對象，替換當(dāng)前節(jié)點(diǎn)的就是該節(jié)點(diǎn)對象；如果參數(shù)是文本，替換當(dāng)前節(jié)點(diǎn)的就是參數(shù)對應(yīng)的文本節(jié)點(diǎn)。

總結(jié)

匯總了一些使用DOM操作的基本方法。參考摘錄至 阮一峰的JavaScript標(biāo)準(zhǔn)參考教程。