国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

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

songze / 1459人閱讀

摘要：在很久之前讀過(guò)編程藝術(shù)，現(xiàn)在重讀又有新的體會(huì)，遂記錄下。唯一沒(méi)有被其他元素包含的元素是元素，它是的根元素。是節(jié)點(diǎn)內(nèi)的第一個(gè)子節(jié)點(diǎn)，所以將是一個(gè)值，應(yīng)該寫(xiě)成才能得到。操作操作無(wú)非是增刪改查，我們先看查和改。

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

什么是DOM

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

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

DOM中有許多不同類(lèi)型的節(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的原子，比如，

和

    等。

    元素可以包含其他元素。唯一沒(méi)有被其他元素包含的元素是元素，它是DOM的根元素。

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

    比如

    it is a test

    ，“it is a test”就是一個(gè)文本節(jié)點(diǎn)。

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

    “it is a test”是

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

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

    比如

    it is a test

    ，title="hehe"就是屬性節(jié)點(diǎn)，用來(lái)對(duì)元素做出更具體的描述。

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

    DOM操作

    DOM操作無(wú)非是增刪改查，我們先看查和改。

    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è)方法。接受類(lèi)名參數(shù)返回一個(gè)具有相同類(lèi)名的元素的數(shù)組，同樣可以使用數(shù)組方法length。

    只有較新的瀏覽器支持這個(gè)方法，書(shū)里給出了代碼可以自己為為老瀏覽器實(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

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

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

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

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

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

    object.setAttribute(attribute, value)
    

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

childNodes屬性

    childNodes 屬性可以用來(lái)獲取任何一個(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 屬性，它用來(lái)得到（和設(shè)置）一個(gè)節(jié)點(diǎn)的值：
    

    node.nodeValue
    

firstChild 和 lastChild 屬性

    node.firstChild
    

    這種寫(xiě)法完全等價(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)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/78661.html

相關(guān)文章

  • JavaScript中對(duì)象的增刪改查

    摘要：對(duì)象及其增刪改查對(duì)象以后看到的，除了種基本數(shù)據(jù)類(lèi)型就是對(duì)象中表示一個(gè)人的信息男如果使用基本數(shù)據(jù)類(lèi)型，我們所創(chuàng)建的變量都是獨(dú)立的，不能成為一個(gè)整體對(duì)象屬于一種復(fù)合的數(shù)據(jù)類(lèi)型，在對(duì)象可以保存多個(gè)不同的數(shù)據(jù)類(lèi)型的屬性對(duì)象的分類(lèi)內(nèi)建對(duì)象由標(biāo)準(zhǔn)中定 ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?對(duì)象及其增刪改查 Object:對(duì)象 以后看到的，除了5種基本數(shù)據(jù)類(lèi)型就是對(duì)象 ...

    alighters 評(píng)論0 收藏0

  • Jquery + dataTable + Bootstrap + 完整邏輯實(shí)現(xiàn)表格的增刪改查

    摘要：最近在做畢設(shè)，同學(xué)在做前端頁(yè)面的時(shí)候使用到和這些控件，然后自己又在刷題的時(shí)候遇到一個(gè)這個(gè)的實(shí)現(xiàn)，于是就自己去官網(wǎng)文檔上學(xué)習(xí)了一下，嘗試實(shí)現(xiàn)這個(gè)官方文檔代碼代碼效果如下圖示頂部結(jié)構(gòu)頁(yè)面上的三個(gè)，增刪改新增修改刪除這里的框的 最近在做畢設(shè)，同學(xué)在做前端頁(yè)面的時(shí)候使用到JQuery、DataTable和Bootstrap這些控件，然后自己又在刷題的時(shí)候遇到一個(gè)這個(gè)demo的實(shí)現(xiàn)，于是就自己去...

    oneasp 評(píng)論0 收藏0

  • Jquery與Bootstrap實(shí)現(xiàn)后臺(tái)管理頁(yè)面增刪改查功能

    摘要：使用與實(shí)現(xiàn)了一個(gè)比較簡(jiǎn)單但功能齊全的增刪改查功能的后臺(tái)管理頁(yè)面，雖然只是一個(gè)頁(yè)面，但麻雀雖小五臟俱全，常用的功能都用到了，本例用原生的與配合使用，不考慮的重構(gòu)性及打包，該例子零耦合，開(kāi)箱即用。相關(guān)文章實(shí)現(xiàn)雙擊內(nèi)容變?yōu)榭删庉嫚顟B(tài) 使用jquery與bootstrap實(shí)現(xiàn)了一個(gè)比較簡(jiǎn)單但功能齊全的增刪改查功能的后臺(tái)管理頁(yè)面，雖然只是一個(gè)CRUD頁(yè)面，但麻雀雖小五臟俱全，JS常用的功能都用到...

    yankeys 評(píng)論0 收藏0

  • 初識(shí)DOM（文檔對(duì)象模型）

    摘要：什么是什么是什么叫做呢的全稱(chēng)是文檔對(duì)象模型，定義了表示和修改文檔所需的對(duì)象這些對(duì)象的行為和屬性以及這些對(duì)象之間的關(guān)系。對(duì)象即為宿主對(duì)象，由瀏覽器廠商定義，用來(lái)操作的功能的一類(lèi)對(duì)象和集合。簡(jiǎn)單來(lái)說(shuō)，就是用來(lái)操作和的，它是一系列對(duì)象的集合。什么是DOM 什么叫做DOM呢？ ? DOM的全稱(chēng)是Document Object Model 文檔對(duì)象模型，DOM定義了表示和修改文檔所需的對(duì)象、這些對(duì)象的...

    Elle 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<