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)參考教程。