DOM節點的建立、插入、刪除、查詢、替換
阿新 • • 發佈：2019-01-30
原為地址：https://www.cnblogs.com/lingdublog/p/6483359.html
在前端開發中，js與html聯絡最緊密的莫過於對DOM的操作了，本文為大家分享一些DOM節點的基本操作。
一、建立DOM節點
使用的命令是
var oDiv = document.createElement('div');這樣就建立了一個div標籤。
二、插入DOM節點
移動DOM節點也就是把這個節點插入到html文件中的某個地方，這裡js給了我們兩個方法：
1.appendChild()：把節點插入到父節點的末尾。
document.body.appendChild(oDiv); //把div插入到body中，並且位於末尾
2.insertBefore()：把節點插入到父節點的某個兄弟節點的前面。
var oP = createElement('p'); //建立一個p節點 document.body.insertBefore(oP,oDiv); //把p節點插入到div的前面
三.刪除DOM節點
刪除DOM節點的方法是removeChild()。
document.body.removeChild(oP); //刪除p節點
四.查詢DOM節點
查詢DOM節點的方法很多，常用的有：
getElementById() //通過元素Id，唯一性
如html文件如下：
<body> <div id='box'></div> </body>
這是可以使用getElementById()獲取到id為box的div。
var oDiv = document.getElementById('box');2.getElementsByTagName() //通過元素的標籤名來選擇元素
var aDiv = getElementsByTagName('div');要注意的是，getElementsByTagName()獲取的是一組元素，所以如果想取得上面那個id為box的div要在後面加上[0];
var oDiv = getElementsByTagName('div')[0];五、替換DOM節點
替換DOM節點的方法是replaceChild()。
var oSpan = document.createElement('span'); //建立一個span標籤 document.body.replaceChild(oSpan,oBox); //用span標籤替換div標籤
最常用的DOM操作就是這些了，其他還有很多的方法，就目前而言，各瀏覽器相容性不太好，所以還是推薦大家暫時只使用上述這些方法。