在前端開發(fā)中，js與html聯(lián)系最緊密的莫過于對DOM的操作了,，本文為大家分享一些DOM節(jié)點的基本操作,。

一、創(chuàng)建DOM節(jié)點
使用的命令是

var oDiv = document.createElement('div');

這樣就創(chuàng)建了一個div標(biāo)簽,。

二,、插入DOM節(jié)點

移動DOM節(jié)點也就是把這個節(jié)點插入到html文檔中的某個地方，這里js給了我們兩個方法：

1.appendChild()：把節(jié)點插入到父節(jié)點的末尾,。

document.body.appendChild(oDiv);   //把div插入到body中,，并且位于末尾

2.insertBefore()：把節(jié)點插入到父節(jié)點的某個兄弟節(jié)點的前面。

var oP = createElement('p');  //創(chuàng)建一個p節(jié)點
document.body.insertBefore(oP,oDiv); //把p節(jié)點插入到div的前面

三.刪除DOM節(jié)點

刪除DOM節(jié)點的方法是removeChild(),。

document.body.removeChild(oP);  //刪除p節(jié)點

四.查找DOM節(jié)點

查找DOM節(jié)點的方法很多,，常用的有：

getElementById()    //通過元素Id，唯一性

如html文檔如下：

這是可以使用getElementById()獲取到id為box的div,。

var oDiv = document.getElementById('box');

2.getElementsByTagName()   //通過元素的標(biāo)簽名來選擇元素

var aDiv = getElementsByTagName('div');
要注意的是,，getElementsByTagName()獲取的是一組元素，所以如果想取得上面那個id為box的div要在后面加上[0];

var oDiv = getElementsByTagName('div')[0];

五,、替換DOM節(jié)點

替換DOM節(jié)點的方法是replaceChild(),。

var oSpan = document.createElement('span'); //創(chuàng)建一個span標(biāo)簽
document.body.replaceChild(oSpan,oBox); //用span標(biāo)簽替換div標(biāo)簽
最常用的DOM操作就是這些了，其他還有很多的方法,，就目前而言,，各瀏覽器兼容性不太好，所以還是推薦大家暫時只使用上述這些方法,。

補(bǔ)充一個例子:DOM 節(jié)點的創(chuàng)建,、刪除、替換

只要在屏幕上托三個button按鈕就可以了,，下面就是程序運行時的界面：

   
    <script type="text/javascript">
        function CreateNode() {
            var pnode = document.createElement('p');
            var tnode = document.createTextNode('煙花三月下?lián)P州');
            pnode.appendChild(tnode);
            document.body.appendChild(pnode);
        }
        function ReplaceNode() {
            var pnode = document.createElement('p');
            var tnode = document.createTextNode('故人西辭黃鶴樓');
            pnode.appendChild(tnode);
            //獲取要替換的p節(jié)點
                var oldnode = document.getElementsByTagName('p')[0];
            oldnode.replaceNode(pnode, oldnode); //此種方法只支持IE
            //oldnode.parentNode.replaceChild(pnode,oldnode);//通用的
        }
        function RemoveNode() {
            var oldnode = document.getElementsByTagName('p')[0];
            //oldnode.parentNode返回的是p節(jié)點的父節(jié)點,，這里就是body，然后使用body節(jié)點的removeChild方法刪除其下面的pnode節(jié)點
            oldnode.parentNode.removeChild(oldnode);
        }
    </script>


   

   

   

當(dāng)我點擊創(chuàng)建節(jié)點時就會出現(xiàn)下面的第一張圖片,；當(dāng)我點擊替換節(jié)點時就是下面的第二張圖片的效果,；