使用DOM
DOM中的每個(gè)元素都有一組屬性和方法，它們提供有關(guān)它們?cè)贒OM中的關(guān)系的信息：
element.childNodes?返回一個(gè)元素的子節(jié)點(diǎn)的數(shù)組。
element.firstChild?返回元素的第一個(gè)子節(jié)點(diǎn)。
element.lastChild?返回元素的最后一個(gè)子節(jié)點(diǎn)。
element.hasChildNodes?如果元素有任何子節(jié)點(diǎn)，則返回 true，否則為 false 。
element.nextSibling?返回相同樹級(jí)別的下一個(gè)節(jié)點(diǎn)。
element.previousSibling?返回在同一樹級(jí)別的上一個(gè)節(jié)點(diǎn)。
element.parentNode?返回元素的父節(jié)點(diǎn)。
例如，我們可以選擇元素的所有子節(jié)點(diǎn)并更改其內(nèi)容：
首先先寫出頁(yè)面原有的東西，如下
<div id ="demo">
????<p>一些文本</p>
????<p>另一些文本 </p>
</div>
隨后用DOM來(lái)更改頁(yè)面內(nèi)容，如下：
var a = document.getElementById("demo");
var arr = a.childNodes;
????for(var x=0;x<arr.length;x++) {
????????arr[x].innerHTML = "新的文本";
????}
現(xiàn)在你可以在頁(yè)面上看見原先的文字都被替換成立新的文本這四個(gè)字了
改變屬性
選擇要使用的元素后，您可以更改其屬性。
正如我們?cè)谝郧暗恼n程中看到的，我們可以使用?innerHTML?屬性更改元素的文本內(nèi)容。
同樣，我們可以改變?cè)氐膶傩浴?/p>
例如，我們可以更改圖像的?src?屬性：
<img id="myimg" src="這里是一個(gè)SRC" alt="..." />
<script>
????var el = document.getElementById("myimg"); // 通過(guò)id="myimg"獲取元素
????el.src = "這里是另一個(gè)SRC";
</script>
實(shí)際上，可以使用JavaScript更改元素的所有屬性。
更改樣式
注：這個(gè)類型本小白經(jīng)常用到的終于學(xué)到了
HTML元素的樣式也可以使用JavaScript進(jìn)行更改。
可以使用元素的?style?對(duì)象來(lái)訪問(wèn)所有樣式屬性。
例如:
<div id="demo" style="width:200px">一些文本</div>
<script>
????var x = document.getElementById("demo");
????????x.style.color = "6600FF";? ? ?
????????x.style.width = "100px";
</script>
這部分改變了文本的顏色和寬度。
提示: 所有CSS屬性都可以使用JavaScript進(jìn)行設(shè)置和修改。請(qǐng)記住，您不能在屬性名稱中使用破折號(hào)（ - ）：這些替換為駝峰寫法，其中復(fù)合詞以大寫字母開頭 比如: background-color屬性應(yīng)該被寫為?backgroundColor。
添加和移除元素
使用以下方法創(chuàng)建新節(jié)點(diǎn)：
element.cloneNode()?克隆元素并返回結(jié)果節(jié)點(diǎn)。
document.createElement(element)?創(chuàng)建一個(gè)新的元素節(jié)點(diǎn)。
document.createTextNode(text)創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)。
例如:
var node = document.createTextNode("一些新的文本");
這將創(chuàng)建一個(gè)新的文本節(jié)點(diǎn)，但它將不會(huì)出現(xiàn)在文檔中，直到您使用以下方法之一將其附加到現(xiàn)有元素：
element.appendChild(newNode)將一個(gè)新的子節(jié)點(diǎn)添加到元素作為最后一個(gè)子節(jié)點(diǎn)。
element.insertBefore(node1, node2)在節(jié)點(diǎn)2之前插入node1作為子節(jié)點(diǎn)。
例如:
<div id ="demo">一些文本</div>
<script>
????var p = document.createElement("p");???????? //創(chuàng)建一個(gè)新的段落
????var node = document.createTextNode("一些新的文本");
????p.appendChild(node);???????? //添加文本到段落
????var div = document.getElementById("demo");
????div.appendChild(p); ???????????? //將段落添加到div中
</script>
要?jiǎng)h除HTML元素，您必須選擇元素的父項(xiàng)并使用removeChild(node)方法。
例如:? ?要從從頁(yè)面中刪除 id ="p1" 的段落。
<div id="demo">
????????<p id="p1">這是一個(gè)段落.</p>
????????<p id="p2">這是另外一個(gè)段落.</p>
</div>
<script>
????????var parent = document.getElementById("demo");
????????var child = document.getElementById("p1");
????????parent.removeChild(child);
</script>
提示: 實(shí)現(xiàn)相同結(jié)果的另一種方法是使用?parentNode?屬性來(lái)獲取要?jiǎng)h除的元素的父項(xiàng)：
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
替換元素
要替換HTML元素，使用?element.replaceChild(newNode,oldNode)方法。
例如:? ? ? ? 下面的代碼創(chuàng)建一個(gè)替換現(xiàn)有 p1 段落的新段落元素。
<div id="demo">
????????<p id="p1">這是一個(gè)段落</p>
????????<p id="p2">這是另一個(gè)段落</p> </div>
<script>
????????var p = document.createElement("p");
????????var node = document.createTextNode("這是新的文本");
????????p.appendChild(node);
????????var parent = document.getElementById("demo");
????????var child = document.getElementById("p1");
????????parent.replaceChild(p, child);
</script>
