上篇博客中，我們已經初步接觸了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()方法將獲取元素中某個屬性的值。它和直接使用.屬性獲取屬性值的方法有

一定區別。

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

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

?

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

?

removeAttribute()可以移除HTML屬性。

?

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

?

1.node節點屬性

節點可以分為元素節點、屬性節點和文本節點，而這些節點又有三個非常有用的屬性，分別為：nodeName、nodeType和nodeValue。

2.層次節點屬性

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

四．節點操作

DOM 不單單可以查找節點，也可以創建節點、復制節點、插入節點、刪除節點和替換節點。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。