上篇博客中，我們已經(jīng)初步接觸了DOM基礎(chǔ)，但是我們學(xué)習(xí)是為了能夠更好地應(yīng)用，今天我們就來看看DOM節(jié)點(diǎn)的增刪改查。

不管在哪里，我們想要操作一個(gè)東西，總是應(yīng)該先去獲得它。那么我們?cè)趺传@得呢？

HTML的每個(gè)成分都可以看作是節(jié)點(diǎn)(文檔節(jié)點(diǎn)、元素節(jié)點(diǎn)、文本節(jié)點(diǎn)、屬性節(jié)點(diǎn)、注釋節(jié)點(diǎn)，其中，屬性節(jié)點(diǎn)屬于元素節(jié)點(diǎn))。

W3C 提供了比較方便簡單的定位節(jié)點(diǎn)的方法和屬性，以便我們快速的對(duì)節(jié)點(diǎn)進(jìn)行操作。

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

1.getElementById()方法

getElementById()方法，接受一個(gè)參數(shù)：獲取元素的ID。如果找到相應(yīng)的元素則返回該

元素的 HTMLDivElement對(duì)象，如果不存在，則返回null。

?

document.getElementById('box'); //獲取id 為 box 的元素節(jié)點(diǎn) PS：id表示一個(gè)元素節(jié)點(diǎn)的唯一性，不能同時(shí)給兩個(gè)或以上的元素節(jié)點(diǎn)創(chuàng)建同一個(gè)命名的id。當(dāng)我們通過getElementById()獲取到特定元素節(jié)點(diǎn)時(shí)，這個(gè)節(jié)點(diǎn)對(duì)象就被我們獲取到了，而通過這個(gè)節(jié)點(diǎn)對(duì)象，我們可以訪問它的一系列屬性。

?

2.getElementsByTagName()方法

getElementsByTagName()方法將返回一個(gè)對(duì)象數(shù)組HTMLCollection(NodeList)，這個(gè)數(shù)組保存著所有相同元素名的節(jié)點(diǎn)列表。

document.getElementsByTagName('*'); //獲取所有元素

?

不管是 getElementById還是getElementsByTagName，在傳遞參數(shù)的時(shí)候，并不是所有 瀏覽器 都必須區(qū)分大小寫，為了防止不必要的錯(cuò)誤和麻煩，我們必須堅(jiān)持養(yǎng)成區(qū)分大小寫的習(xí)慣。

3.getElementsByName()方法

getElementsByName()方法可以獲取相同名稱(name)的元素，返回一個(gè)對(duì)象數(shù)組HTMLCollection(NodeList)。

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

?

4.getAttribute()方法

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

一定區(qū)別。

document.getElementById('box').getAttribute('id');//獲取元素的id 值 document.getElementById('box').id;//獲取元素的id 值document.getElementById('box').getAttribute('mydiv');//獲取元素的自定義屬性值 5.setAttribute()方法

setAttribute()方法將設(shè)置元素中某個(gè)屬性和值。它需要接受兩個(gè)參數(shù)：屬性名和值。如果屬性本身已存在，那么就會(huì)被覆蓋。

?

document.getElementById('box').setAttribute('align','center');//設(shè)置屬性和值document.getElementById('box').setAttribute('bbb','ccc');//設(shè)置自定義的屬性和值 6.removeAttribute()方法

?

removeAttribute()可以移除HTML屬性。

?

document.getElementById('box').removeAttribute('style');//移除屬性 三． DOM 節(jié)點(diǎn)

?

1.node節(jié)點(diǎn)屬性

節(jié)點(diǎn)可以分為元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)，而這些節(jié)點(diǎn)又有三個(gè)非常有用的屬性，分別為：nodeName、nodeType和nodeValue。

2.層次節(jié)點(diǎn)屬性

節(jié)點(diǎn)的層次結(jié)構(gòu)可以劃分為：父節(jié)點(diǎn)與子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)這兩種。當(dāng)我們獲取其中一個(gè)元素節(jié)點(diǎn)的時(shí)候，就可以使用層次節(jié)點(diǎn)屬性來獲取它相關(guān)層次的節(jié)點(diǎn)。

四．節(jié)點(diǎn)操作

DOM 不單單可以查找節(jié)點(diǎn)，也可以創(chuàng)建節(jié)點(diǎn)、復(fù)制節(jié)點(diǎn)、插入節(jié)點(diǎn)、刪除節(jié)點(diǎn)和替換節(jié)點(diǎn)。

這些方法我們都可以將之進(jìn)行聯(lián)系起來，這樣我們才可以編成一張大的知識(shí)網(wǎng)，當(dāng)然僅僅知道還是不夠的，我們要多運(yùn)用，多找聯(lián)系，多去總結(jié)。

總結(jié)

以上是生活随笔為你收集整理的HTML DOM节点的增删改查的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。