為什么會提到Dom樹呢，或許它對于我們很好地理解網頁各個元素，標簽和控件搭配，以及各種js，css等的加載會有一些幫助。筆者在工程中遇到了一些小問題，本質就是dom樹的東西掌握的不扎實。所以借此來梳理一下。
1.HTML DOM
ok, 我們先來看一下W3school中怎么解釋這個概念和結構的。W3school是一個很不錯的網站，很適合初學者和基礎不扎實的人。
HTML DOM 定義了訪問和操作 HTML 文檔的標準方法。DOM 將 HTML 文檔表達為樹結構。
W3C 文檔對象模型 （DOM） 是中立于平臺和語言的接口，它允許程序和腳本動態(tài)地訪問和更新文檔的內容、結構和樣式。
W3C DOM 標準被分為 3 個不同的部分：
核心 DOM - 針對任何結構化文檔的標準模型
XML DOM - 針對 XML 文檔的標準模型
HTML DOM - 針對 HTML 文檔的標準模型
我們主要來看HTML DOM
HTML DOM 是：
HTML 的標準對象模型
HTML 的標準編程接口
W3C 標準
DOM 節(jié)點
根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節(jié)點：
整個文檔是一個文檔節(jié)點
每個 HTML 元素是元素節(jié)點
HTML 元素內的文本是文本節(jié)點
每個 HTML 屬性是屬性節(jié)點
注釋是注釋節(jié)點
2.獲取節(jié)點的原生方法
innerHTML 屬性
獲取元素內容的最簡單方法是使用 innerHTML 屬性。
innerHTML 屬性對于獲取或替換 HTML 元素的內容很有用。
document.write輸出文本
document.write(document.anchors.length); 錨的數量: 加入anchors[] 可以看成數值尋找索引
document.write(document.forms[0].name); 表單數目
document.write(document.images.length); 圖像數目
document.write(document.images[0].id); 圖像id
document.write(document.links.length); 鏈接數目
document.write(document.domain); 返回區(qū)域名
document.write(document.lastModified); 文檔最后一次修改時間
document.write(document.title); 返回文檔標題
document.writeln document write 不同 writeln 新增一行 write 在后面增加
getElementById() 方法
getElementById() 方法返回帶有指定 ID 的元素引用：
語法
node.getElementById("id");
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
getElementById 是一個方法，而 innerHTML 是屬性。
改變 HTML 樣式
通過 HTML DOM，您能夠訪問 HTML 元素的樣式對象
<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
getElementsByTagName() 方法
getElementsByTagName() 返回帶有指定標簽名的所有元素。
語法
node.getElementsByTagName("tagname");
<p>Hello World!</p>
<p>DOM 是非常有用的!</p>
<p>這個實例演示了 <b>getElementsByTagName</b> 方法的使用。</p>
<script>
x=document.getElementsByTagName("p");
document.write("第一個段落的文本為: " + x[2].innerHTML);
</script>
根據X[ ]尋找索引 然后顯示
例子返回包含文檔中所有 <p> 元素的列表，并且這些 <p> 元素應該是 id="main" 的元素的后代（子、孫等等）
<div id="main">
<p>DOM 是非常有用的。</p>
<p>這個實例演示了 <b>getElementsByTagName</b> 方法的使用。</p>
</div>
<script>
var x=document.getElementById("main").getElementsByTagName("p");
document.write(x[0].innerHTML);
</script>
The getElementsByClassName() Method
如果您希望查找?guī)в邢嗤惷乃?HTML 元素，請使用這個方法：
document.getElementsByClassName("intro");
如果您希望查找?guī)в邢嗤惷乃?HTML 元素，請使用這個方法：
document.getElementsByClassName("intro");
上面的例子返回包含 class="intro" 的所有元素的一個列表：
注意：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中無效。
appendChild() 方法 將新節(jié)點增加到指定節(jié)點
creatElement() 方法 創(chuàng)建屬性節(jié)點
creatTextNode() 方法 創(chuàng)建文本節(jié)點
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是一個新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
這段代碼創(chuàng)建了一個新的 <p> 元素：
var para=document.createElement("p");
如需向 <p> 元素添加文本，您首先必須創(chuàng)建文本節(jié)點。這段代碼創(chuàng)建文本節(jié)點：
var node=document.createTextNode("這是一個新段落。");
然后您必須向 <p> 元素追加文本節(jié)點：
para.appendChild(node);
最后，您必須向已有元素追加這個新元素。
這段代碼查找到一個已有的元素：
var element=document.getElementById("div1");
這段代碼向這個已存在的元素追加新元素：
element.appendChild(para)
創(chuàng)建新的 HTML 元素 - insertBefore()
appendChild() 方法，將新元素作為父元素的最后一個子元素進行添加。
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是一個新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>
刪除已有的 HTML 元素removechild
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
查找 id="div1" 的元素：
var parent=document.getElementById("div1");
查找 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
從父元素中刪除子元素：
parent.removeChild(child);
替換子節(jié)點屬性 replacechild
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("這是一個新的段落。");
para.appendChild(node);
parent.replaceChild(para,child);
</script>
nodeValue 屬性
nodeValue 屬性規(guī)定節(jié)點的值。
元素節(jié)點的 nodeValue 是 undefined 或 null
文本節(jié)點的 nodeValue 是文本本身
屬性節(jié)點的 nodeValue 是屬性值
childNodes 和 nodeValue
除了 innerHTML 屬性，您也可以使用 childNodes 和 nodeValue 屬性來獲取元素的內容。
下面的代碼獲取 id="intro" 的 <p> 元素的值：
<p id="intro">Hello World!</p>
<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
使用事件
HTML DOM 允許您在事件發(fā)生時執(zhí)行代碼。
當 HTML 元素"有事情發(fā)生"時，瀏覽器就會生成事件：
在元素上點擊
加載頁面
改變輸入字段
你可以在下一章學習更多有關事件的內容。
下面兩個例子在按鈕被點擊時改變 <body> 元素的背景色
<input type="button"onclick="document.body.style.backgroundColor='lavender';"value="修改背景顏色">
由函數執(zhí)行相同的代碼
function ChangeBackground(){
document.body.style.backgroundColor="lavender";
}
</script> <input type="button" onclick="ChangeBackground()" value="修改背景顏色" />
<p id="p1">Hello world!</p>
<script>function ChangeText(){
document.getElementById("p1").innerHTML="Hello Runoob!";
}
</script> <input type="button" onclick="ChangeText()" value="修改文本" />
對事件作出反應
當事件發(fā)生時，可以執(zhí)行 JavaScript，比如當用戶點擊一個 HTML 元素時。
如需在用戶點擊某個元素時執(zhí)行代碼，請把 JavaScript 代碼添加到 HTML 事件屬性中：
onclick=JavaScript
<h1 onclick="this.innerHTML='Ooops!'">點擊文本!</h1>
<script>function changetext(id){
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點擊文本!</h1>
onload 和 onunload 事件
當用戶進入或離開頁面時，會觸發(fā) onload 和 onunload 事件。
onload 事件可用于檢查訪客的瀏覽器類型和版本，以便基于這些信息來加載不同版本的網頁。
onload 和 onunload 事件可用于處理 cookies
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookie 可用")
}
else
{
alert("Cookie 不可用")
}
}
</script>
<p>頁面載入時，彈出瀏覽器 Cookie 可用狀態(tài)。</p>
onchange 事件
onchange 事件常用于輸入字段的驗證。
下面的例子展示了如何使用 onchange。當用戶改變輸入字段的內容時，將調用 upperCase() 函數。
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
輸入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>當你離開輸入框后，函數將被觸發(fā)，將小寫字母轉為大寫字母。</p>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在鼠標指針移動到或離開元素時觸發(fā)函數。
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">Click Me</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="Release Me"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You"
}
</script>
onmousedown、onmouseup 以及 onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠標點擊的全部過程。首先當某個鼠標按鈕被點擊時，觸發(fā) onmousedown 事件，然后，當鼠標按鈕被松開時，會觸發(fā) onmouseup 事件，最后，當鼠標點擊完成時，觸發(fā) onclick 事件
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}
function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>
HTML DOM 節(jié)點列表長度
length 屬性定義節(jié)點列表中節(jié)點的數量。
您可以使用 length 屬性來循環(huán)節(jié)點列表：
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br>");
}
獲取所有 <p> 元素節(jié)點
輸出每個 <p> 元素的文本節(jié)點的值
DOM 根節(jié)點
這里有兩個特殊的屬性，可以訪問全部文檔：
document.documentElement - 全部文檔
document.body - 文檔的主體
<p>Hello World!</p>
<div>
<p>DOM 是非常有用的!</p>
<p>這個實例演示了 <b>document.body</b> 屬性。</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
3.JS中的節(jié)點操作
寫幾個常用的API, 來操作DOM節(jié)點。
(1)document.getElementById()這個是最基本的了。
(2)object.innerHTML該屬性設置或返回object之間的HTML
(3)document.createElement()創(chuàng)建節(jié)點對象。
(4)document.body.appendChild()尾部插入結點。
(5)object.parentNode.removeChild(oChildNode);移除結點
4.jQuery中的結點操作
(1)添加結點
a. append()和appendTo(), 兩個方法剛好是對應的一對兒操作。
$('#parentNodeId').append(childNode);$('#childeNode').appendTo(parentNode);
b. prepend()和prependTo()， 這也是一對兒對應的操作方法。其作用是添加一個結點到父節(jié)點中并前置。用法和上一對兒一樣。
c. 與之對應的還有after, insertAfter; before, insertBefore等，其用法都和上面的相同。其效果是將新建的元素插入到指定的元素之后/前，并和目標元素緊鄰，作為兄弟結點存在。
(2)刪除結點
a. remove()
remove()方法刪除所有匹配的元素，傳入的參數用于篩選元素，該方法可以刪除元素中所有的子節(jié)點，當匹配的節(jié)點及后代被刪除后，該方法返回值是指向被刪除結點的引用，因此可以使用該引用，再使用被刪除的元素。
$span = $('span').remove();
$span.insertAfter('ul');
我們可以看到，該示例中，先刪除所有的span元素，把刪除的元素使用$span接收，把刪除后的元素添加到ul后面，作為ul的兄弟結點。該操作產生的效果即把所有的span元素以及后代元素移到ul后面。
b. empty()
empty()方法嚴格來講并不是刪除元素，該方法只是清空節(jié)點，它能清空元素中的所有子節(jié)點。
(3)修改DOM節(jié)點
a. 復制節(jié)點，當clone()方法有參數，并且為true時，表示同時復制該元素的屬性，如果沒有參數，表示不復制屬性。
$(element).clone(true);
b.替換節(jié)點
這兩個方法都可以實現(xiàn)替換節(jié)點的問題。
$(element).replacewith();
$(element).replaceAll();
c.包裹節(jié)點
$(element).wrap()
$(element).wrapAll()
$(element).wraplnner()
(4)屬性操作
attr()和removeAttr()。 attr()方法能夠獲取元素屬性，也能夠設置元素屬性。removeAttr()方法刪除特定的屬性，方法是在參數中指定屬性名。
$('p').attr('title');
$('p').attr('title':'題目');
$('p').attr({'title':'題目'，'name':'水果'});
(5)樣式操作
addClass()、removeClass()這對兒方法是添加和刪除樣式。
toggleClass()該方法用來切換目標元素的樣式。
(6)其他常見操作
第一句是獲取值，第二句是設置值。
$('id').val();
$('id').val('hello');
css操作
設置添加css樣式
$('p').css('color','red');
至此，大概的Dom操作就已經梳理完了。
按照慣例，列出一些可以參考的資料
http://www.cnblogs.com/ini_always/archive/2011/11/09/2243671.htmlhttp://wenku.baidu.com/view/a6b9673783c4bb4cf7ecd119.htmlhttp://www.nowamagic.net/librarys/posts/jquery/5http://www.blogjava.net/DLevin/archive/2012/11/25/391933.htmlhttp://www.w3school.com.cn/htmldom/dom_nodes.asphttp://www.2cto.com/kf/201205/130535.htmlhttp://group.cnblogs.com/topic/39811.htmlhttp://www.cnblogs.com/bro-ma/p/3063942.htmlhttps://blog.csdn.net/qq_41328247/article/details/80074098
