使用DOM
DOM中的每個元素都有一組屬性和方法瘸恼，它們提供有關它們在DOM中的關系的信息：
element.childNodes?返回一個元素的子節(jié)點的數(shù)組。
element.firstChild?返回元素的第一個子節(jié)點胚股。
element.lastChild?返回元素的最后一個子節(jié)點。
element.hasChildNodes?如果元素有任何子節(jié)點，則返回 true醉旦，否則為 false 忘巧。
element.nextSibling?返回相同樹級別的下一個節(jié)點恒界。
element.previousSibling?返回在同一樹級別的上一個節(jié)點。
element.parentNode?返回元素的父節(jié)點袋坑。
例如仗处，我們可以選擇元素的所有子節(jié)點并更改其內容：
首先先寫出頁面原有的東西，如下
<div id ="demo">
????<p>一些文本</p>
????<p>另一些文本 </p>
</div>
隨后用DOM來更改頁面內容枣宫，如下：
var a = document.getElementById("demo");
var arr = a.childNodes;
????for(var x=0;x<arr.length;x++) {
????????arr[x].innerHTML = "新的文本";
????}
現(xiàn)在你可以在頁面上看見原先的文字都被替換成立新的文本這四個字了
改變屬性
選擇要使用的元素后婆誓，您可以更改其屬性。
正如我們在以前的課程中看到的也颤，我們可以使用?innerHTML?屬性更改元素的文本內容洋幻。
同樣，我們可以改變元素的屬性翅娶。
例如文留，我們可以更改圖像的?src?屬性：
<img id="myimg" src="這里是一個SRC" alt="..." />
<script>
????var el = document.getElementById("myimg"); // 通過id="myimg"獲取元素
????el.src = "這里是另一個SRC";
</script>
實際上，可以使用JavaScript更改元素的所有屬性竭沫。
更改樣式
注：這個類型本小白經常用到的終于學到了
HTML元素的樣式也可以使用JavaScript進行更改燥翅。
可以使用元素的?style?對象來訪問所有樣式屬性。
例如:
<div id="demo" style="width:200px">一些文本</div>
<script>
????var x = document.getElementById("demo");
????????x.style.color = "6600FF";? ? ?
????????x.style.width = "100px";
</script>
這部分改變了文本的顏色和寬度蜕提。
提示: 所有CSS屬性都可以使用JavaScript進行設置和修改森书。請記住，您不能在屬性名稱中使用破折號（ - ）：這些替換為駝峰寫法，其中復合詞以大寫字母開頭 比如: background-color屬性應該被寫為?backgroundColor凛膏。
添加和移除元素
使用以下方法創(chuàng)建新節(jié)點：
element.cloneNode()?克隆元素并返回結果節(jié)點杨名。
document.createElement(element)?創(chuàng)建一個新的元素節(jié)點。
document.createTextNode(text)創(chuàng)建一個新的文本節(jié)點猖毫。
例如:
var node = document.createTextNode("一些新的文本");
這將創(chuàng)建一個新的文本節(jié)點台谍，但它將不會出現(xiàn)在文檔中，直到您使用以下方法之一將其附加到現(xiàn)有元素：
element.appendChild(newNode)將一個新的子節(jié)點添加到元素作為最后一個子節(jié)點吁断。
element.insertBefore(node1, node2)在節(jié)點2之前插入node1作為子節(jié)點趁蕊。
例如:
<div id ="demo">一些文本</div>
<script>
????var p = document.createElement("p");???????? //創(chuàng)建一個新的段落
????var node = document.createTextNode("一些新的文本");
????p.appendChild(node);???????? //添加文本到段落
????var div = document.getElementById("demo");
????div.appendChild(p); ???????????? //將段落添加到div中
</script>
要刪除HTML元素，您必須選擇元素的父項并使用removeChild(node)方法胯府。
例如:? ?要從從頁面中刪除 id ="p1" 的段落介衔。
<div id="demo">
????????<p id="p1">這是一個段落.</p>
????????<p id="p2">這是另外一個段落.</p>
</div>
<script>
????????var parent = document.getElementById("demo");
????????var child = document.getElementById("p1");
????????parent.removeChild(child);
</script>
提示: 實現(xiàn)相同結果的另一種方法是使用?parentNode?屬性來獲取要刪除的元素的父項：
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
替換元素
要替換HTML元素，使用?element.replaceChild(newNode,oldNode)方法骂因。
例如:? ? ? ? 下面的代碼創(chuàng)建一個替換現(xiàn)有 p1 段落的新段落元素炎咖。
<div id="demo">
????????<p id="p1">這是一個段落</p>
????????<p id="p2">這是另一個段落</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>
