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