js增加、刪除、替換DOM對象

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型DOM，即Document Object Model

整個文檔為一個文檔節點(document對象)

每個html元素為一個元素節點(element對象)

html元素內的文本為文本節點(textNode對象)

html元素的屬性為屬性節點(attribute對象)

html注釋為注釋節點(comment對象)

 

節點自身屬性：

nodeType：節點類型

nodeName：節點名稱

nodeValue：節點值

attributes：節點的屬性節點

innerHTML：節點的所有內容，包含節點下的文本，子標簽等

innerText：節點的文本內容，不包含子標簽

 

導航屬性：

parentElement / parentNode：父節點標簽

children：所有子標簽

firstElementChild：節點的第一個子元素標簽

lastElementChild：節點的最后一個子元素標簽

nextElementSibling：下一個兄弟元素標簽

previousElementSibling：上一個兄弟元素標簽

 

添加元素

parent.appendChild(child) ：用於向parent父元素中添加新元素，添加到尾部

parent.insertBefore(newchild,oldchild)：用於向parent父元素中添加新元素newchild，且添加到oldchild元素的前面。

<div id="div" style='background:pink'>  <!--一個div下包含兩個段落-->
　　<p id="p1">這是一個段落。</p>
　　<p id="p2">這是另外一個段落。</p>
</div>
<script>
　　var para1 = document.createElement("p");   //創建段落p元素
　　var node1 = document.createTextNode("這是一個新的段落，添加到尾部。");  //創建文本節點
　　para1.appendChild(node1);  //將文本節點添加到p元素，這兩步可直接使用para1.innerHTML='這是一個新的段落，添加到尾部。'
　　var para2 = document.createElement("p");
　　var node2 = document.createTextNode("這是一個新的段落，添加到開頭。");
　　para2.appendChild(node2);
　　var element1 = document.getElementById("div");  //獲取父元素div
　　var element2 = document.getElementById("p1");  //獲取第一個段落元素
　　element1.appendChild(para1);  //向父元素中添加創建的子元素，默認放在最后面
　　element1.insertBefore(para2,element2);  //向父元素中添加創建的子元素，位置在element2元素前面
</script>

以上，document.createElement("p")為創建段落，document.createTextNode("*")為創建文本節點。

element1.appendChild(para1)為添加子元素到末尾，element1.insertBefore(para2,element2)為添加子元素到指定元素前面。

 

 

 刪除元素parent.removeChild(child)，刪除元素必須知道其父元素

<div id="div1" style='background:pink'>
    <p id="p1">這是一個段落。</p>
    <p id="p2">這是另外一個段落。</p>
</div>
<script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.removeChild(child);
</script>

 

 

替換元素parent.replaceChild(newchild,oldchild)，使用newchild元素替換oldchild元素

<div id="div1" style='background:pink'>
    <p id="p1">這是一個段落。</p>
    <p id="p2">這是另外一個段落。</p>
</div>
<script>
    var para = document.createElement("p");
    var node = document.createTextNode("這是一個新的段落。");
    para.appendChild(node);
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    parent.replaceChild(para, child);
</script>