DOM增刪改查基本操作

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 一、基本概念 1.1、DOM DOM是JS操作網(wǎng)頁的接口,全稱為“文檔對象模型”(Document Object ...
    周花花啊閱讀 3,240評論 0 6
  • 一、JS前言 (1)認(rèn)識JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,807評論 0 8
  • 第1章 認(rèn)識JS JavaScript能做什么?1.增強(qiáng)頁面動態(tài)效果(如:下拉菜單、圖片輪播、信息滾動等)2.實(shí)現(xiàn)...
    mo默22閱讀 1,338評論 0 5
  • 本章內(nèi)容 理解包含不同層次節(jié)點(diǎn)的 DOM 使用不同的節(jié)點(diǎn)類型 克服瀏覽器兼容性問題及各種陷阱 DOM 是針對 HT...
    悶油瓶小張閱讀 668評論 0 1
  • 如果你也擔(dān)心《娛樂至死》 全世界都在做媒體 或許從微博開始,從所謂的口碑營銷開始,媒體不再是某種專職才可以做的,發(fā)...
    Yettine閱讀 229評論 0 0