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

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

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

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

二、插入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()   //通過元素的標簽名來選擇元素

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標簽
document.body.replaceChild(oSpan,oBox); //用span標簽替換div標簽
最常用的DOM操作就是這些了，其他還有很多的方法，就目前而言，各瀏覽器兼容性不太好，所以還是推薦大家暫時只使用上述這些方法。

補充一個例子: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>


   

   

   

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