上篇部落格中,我們已經初步接觸了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()擷取到特定元素節點時。這個節點對象就被我們擷取到了,而通過這個節點對象。我們能夠訪問它的一系列屬性。
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.層次節點屬性
節點的層次結構能夠劃分為:父節點與子節點、兄弟節點這兩種。當我們擷取當中一個元素節點的時候,就能夠使用層次節點屬性來擷取它相關層次的節點。
四.節點操作
這些方法我們都能夠将之進行聯系起來。這樣我們才幹夠編成一張大的知識網,當然隻知道還是不夠的,我們要多運用,多找聯系。多去總結。