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