HTML DOM節點的增刪改查

標籤：sdn   asc   養成   nts   tracking   nodelist   知識   iss   傳遞   

    上篇部落格中，我們已經初步接觸了DOM基礎，可是我們學習是為了可以更好地應用，今天我們就來看看DOM節點的增刪改查。

    無論在哪裡，我們想要操作一個東西，總是應該先去獲得它。那麼我們怎麼獲得呢？

    HTML的每一個成分都能夠看作是節點(文檔節點、元素節點、文本節點、屬性節點、凝視節點。當中，屬性節點屬於元素節點)。

    W3C提供了比較方便簡單的定位節點的方法和屬性，以便我們高速的對節點進行操作。

分別為：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。

    1.getElementById()方法

    getElementById()方法，接受一個參數：擷取元素的ID。假設找到對應的元素則返回該

元素的 HTMLDivElement對象，假設不存在，則返回null。

document.getElementById('box');              //擷取id 為 box 的元素節點

        PS：id表示一個元素節點的唯一性，不能同一時候給兩個或以上的元素節點建立同一個命名的id。當我們通過getElementById()擷取到特定元素節點時。這個節點對象就被我們擷取到了，而通過這個節點對象。我們能夠訪問它的一系列屬性。

                

 

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FpYmlhbjA4MjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

    2.getElementsByTagName()方法

    getElementsByTagName()方法將返回一個對象數組HTMLCollection(NodeList)，這個數組儲存著全部同樣元素名的節點列表。

 document.getElementsByTagName('*');              //擷取全部元素

    無論是 getElementById還是getElementsByTagName，在傳遞參數的時候，並非全部瀏覽器都必須區分大寫和小寫，為了防止不必要的錯誤和麻煩。我們必須堅持養成區分大寫和小寫習慣。

   3.getElementsByName()方法

   getElementsByName()方法能夠擷取同樣名稱(name)的元素。返回一個對象數組HTMLCollection(NodeList)。

   document.getElementsByName('add')   //擷取input元素document.getElementsByName('add')[0].value     //擷取input元素的 value值document.getElementsByName('add')[0].checked//擷取input元素的checked值

   4.getAttribute()方法

   getAttribute()方法將擷取元素中某個屬性的值。它和直接使用.屬性擷取屬性值的方法有

一定差別。

<span style="font-family:KaiTi_GB2312;font-size:18px;">document.getElementById('box').getAttribute('id');//擷取元素的id 值 document.getElementById('box').id;//擷取元素的id 值document.getElementById('box').getAttribute('mydiv');//擷取元素的自己定義屬性值</span>

   5.setAttribute()方法

setAttribute()方法將設定元素中某個屬性和值。它須要接受兩個參數：屬性名稱和值。

假設屬性本身已存在，那麼就會被覆蓋。

<span style="font-family:KaiTi_GB2312;font-size:18px;">document.getElementById('box').setAttribute('align','center');//設定屬性和值document.getElementById('box').setAttribute('bbb','ccc');//設定自己定義的屬性和值</span>

   6.removeAttribute()方法

removeAttribute()能夠移除HTML屬性。

<span style="font-family:KaiTi_GB2312;font-size:18px;">document.getElementById('box').removeAttribute('style');//移除屬性</span>

三． DOM節點

    1.node節點屬性

    節點能夠分為元素節點、屬性節點和文本節點。而這些節點又有三個很實用的屬性，分別為：nodeName、nodeType和nodeValue。

    2.層次節點屬性

節點的階層能夠劃分為：父節點與子節點、兄弟節點這兩種。當我們擷取當中一個元素節點的時候，就能夠使用層次節點屬性來擷取它相關層次的節點。

   

    四．節點操作

    DOM 不單單能夠尋找節點，也能夠建立節點、複製節點、插入節點、刪除節點和替換節點。

     

    這些方法我們都能夠將之進行聯絡起來。這樣我們才幹夠編成一張大的知識網，當然只知道還是不夠的，我們要多運用，多找聯絡。多去總結。

HTML DOM節點的增刪改查