DOM節點的創建、插入、刪除、查找、替換


在前端開發中,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操作就是這些了,其他還有很多的方法,就目前而言,各瀏覽器兼容性不太好,所以還是推薦大家暫時只使用上述這些方法。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM