重讀 JavaScript DOM 編程藝術(shù)(一)--DOM 的增刪改查

在很久之前讀過JavaScript Dom 編程藝術(shù),現(xiàn)在重讀又有新的體會(huì),遂記錄下。

什么是DOM

對(duì)于這種英文縮寫,首先看它的英文全拼--Document Object Model,即文檔對(duì)象模型。DOM把一份文檔表示為一棵樹,這是理解DOM模型的關(guān)鍵。是由節(jié)點(diǎn)(node)構(gòu)成的一棵節(jié)點(diǎn)樹。

關(guān)于節(jié)點(diǎn)

DOM中有許多不同類型的節(jié)點(diǎn)。其中最重要的有三種:元素節(jié)點(diǎn)(element node)文本節(jié)點(diǎn)(text node)屬性節(jié)點(diǎn)(attribute node)

元素節(jié)點(diǎn)

元素節(jié)點(diǎn)是DOM的原子,比如<body><p><ul>等。

元素可以包含其他元素。唯一沒有被其他元素包含的元素是<html>元素,它是DOM的根元素。

文本節(jié)點(diǎn)

比如<p>it is a test</p>,“it is a test”就是一個(gè)文本節(jié)點(diǎn)。

文本節(jié)點(diǎn)總是包含在元素節(jié)點(diǎn)內(nèi)部。

“it is a test”是<p>節(jié)點(diǎn)內(nèi)的第一個(gè)子節(jié)點(diǎn),所以p.nodeVAlue將是一個(gè)null值,應(yīng)該寫成p.childNode[0].nodeValue,才能得到“it is a test”。

屬性節(jié)點(diǎn)

比如<p title="hehe">it is a test</p>title="hehe"就是屬性節(jié)點(diǎn),用來對(duì)元素做出更具體的描述。

屬性總是被放在開始標(biāo)簽里,所以屬性節(jié)點(diǎn)總是被包含在元素節(jié)點(diǎn)中。

DOM操作

DOM操作無非是增刪改查,我們先看查和改。

getElementById

這個(gè)方法返回一個(gè)與那個(gè)有著給定 id 屬性值的節(jié)點(diǎn)對(duì)應(yīng)的對(duì)象。

這是DOM 的一個(gè)方法。

getElementsByTagName

這個(gè)方法返回一個(gè)對(duì)象數(shù)組,每個(gè)對(duì)象對(duì)應(yīng)著這個(gè)標(biāo)簽的一個(gè)元素。

可以使用數(shù)組的length方法,document.getElementsByTagName("li").length

這是DOM 的一個(gè)方法。

getElementsByClassName

這是HTML5 DOM中新增的一個(gè)方法。接受類名參數(shù)返回一個(gè)具有相同類名的元素的數(shù)組,同樣可以使用數(shù)組方法length

只有較新的瀏覽器支持這個(gè)方法,書里給出了代碼可以自己為為老瀏覽器實(shí)現(xiàn)這個(gè)方法:

function getElementsByClassName(node, classname){
    if(node.getElementsByClassName){
        //使用現(xiàn)有方法
        return node.getElementsByClassName(classname);
    }else{
        var results = new Array();
        var elems = node.getElementsByTagName("*");
        for(var i=0; i<elems.length; i++){
            if(elems[i].className.indexOf(classname) != -1){
                results[results.length] = elems[i];
            }
        }
        return results;
    }
}

這個(gè)函數(shù)接收兩個(gè)參數(shù)。第一個(gè)node表示DOM樹中的搜索起點(diǎn),第二個(gè)classname就是要搜索的類名了。

這是DOM 的一個(gè)方法。

getAttribute

這個(gè)方法只有一個(gè)參數(shù)--打算查詢的屬性的名字。

這是DOM 的一個(gè)方法。而且是查詢屬性節(jié)點(diǎn)的方法。

setAttribute

這個(gè)方法接收兩個(gè)參數(shù),第一個(gè)是要修改的屬性名字,第二個(gè)是做出的修改的值。

object.setAttribute(attribute, value)

這是DOM 的一個(gè)方法。并且是修改屬性節(jié)點(diǎn)的方法。

childNodes屬性

childNodes 屬性可以用來獲取任何一個(gè)元素的所有子元素,它是一個(gè)包含這個(gè)元素全部子元素的數(shù)組,同樣,它支持length方法:

element.childNodes

nodeType屬性

每一個(gè)節(jié)點(diǎn)都有 nodeType 屬性。這個(gè)屬性可以讓我們知道自己正在與哪一種節(jié)點(diǎn)打交道。

node.nodeType

差勁的是 nodeType 的值并不是文字,而是數(shù)字。

nodeType 屬性總共有12種可取值,但其中僅有3種具有使用價(jià)值:

  • 元素節(jié)點(diǎn) 的 nodeType 屬性值是1。
  • 屬性節(jié)點(diǎn) 的 nodeType 屬性值是2。
  • 文本節(jié)點(diǎn) 的 nodeType 屬性值是3。

nodeValue 屬性

如果想改變一個(gè)文本節(jié)點(diǎn)的值,那就是用 DOM 提供的 nodeValue 屬性,它用來得到(和設(shè)置)一個(gè)節(jié)點(diǎn)的值:

node.nodeValue

firstChildlastChild 屬性

node.firstChild

這種寫法完全等價(jià)于:

node.childNodes[0]

而相對(duì)應(yīng)的

node.lastChild

等價(jià)于:

node.childNodes[node.childNodes.length - 1]

最后

上面記錄了基本的 DOM 的的方法,以及一些 DOM 節(jié)點(diǎn)的屬性,下一篇文章會(huì)記錄 DOM 的

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

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

  • 節(jié)點(diǎn)層次 DOM 可以將任何 HTML 和 XML 文檔描繪成一個(gè)由多層節(jié)點(diǎn)構(gòu)成的結(jié)構(gòu)。節(jié)點(diǎn)分為幾種不同的類型,每...
    云之外閱讀 547評(píng)論 0 1
  • 前言 歸根結(jié)底,代碼都是思想和概念的體現(xiàn)。沒人能把一種程序設(shè)計(jì)語言的所有語法和關(guān)鍵字都記住,可以查閱參考書來解決。...
    朱細(xì)細(xì)閱讀 2,958評(píng)論 4 14
  • 本章內(nèi)容 理解包含不同層次節(jié)點(diǎn)的 DOM 使用不同的節(jié)點(diǎn)類型 克服瀏覽器兼容性問題及各種陷阱 DOM 是針對(duì) HT...
    悶油瓶小張閱讀 658評(píng)論 0 1
  • " 據(jù)說奶油和蛋糕結(jié)婚后,面包就此失戀了,此后他把對(duì)奶油的愛深深藏在心里,于是就有了泡芙。" 相信有不少人聽過這句...
    愛老虎猴閱讀 534評(píng)論 1 9
  • 僅修改樣式表你就能把文本內(nèi)容及圖片添加到文檔。 在樣式表中增加一條規(guī)則,使得每行前面顯示上面的圖標(biāo) p:befor...
    迪爺閱讀 170評(píng)論 0 0