1. 操作常用方法
1.1 訪問(wèn)/獲取節(jié)點(diǎn)
document.getElementById(id); //返回對(duì)擁有指定id的第一個(gè)對(duì)象進(jìn)行訪問(wèn)
document.getElementsByName(name); //返回帶有指定名稱的節(jié)點(diǎn)集合 注意拼寫(xiě):Elements
document.getElementsByTagName(tagname); //返回帶有指定標(biāo)簽名的對(duì)象集合 注意拼寫(xiě)：Elements
document.getElementsByClassName(classname); //返回帶有指定class名稱的對(duì)象集合 注意拼寫(xiě)：Elements
1.2 創(chuàng)建節(jié)點(diǎn)/屬性
document.createElement(eName); //創(chuàng)建一個(gè)節(jié)點(diǎn)
document.createAttribute(attrName); //對(duì)某個(gè)節(jié)點(diǎn)創(chuàng)建屬性
document.createTextNode(text); //創(chuàng)建文本節(jié)點(diǎn)
1.3 添加節(jié)點(diǎn)
document.insertBefore(newNode,referenceNode); //在某個(gè)節(jié)點(diǎn)前插入節(jié)點(diǎn)
parentNode.appendChild(newNode); //給某個(gè)節(jié)點(diǎn)添加子節(jié)點(diǎn)
1.4 復(fù)制節(jié)點(diǎn)
cloneNode(true | false); //復(fù)制某個(gè)節(jié)點(diǎn) 參數(shù)：是否復(fù)制原節(jié)點(diǎn)的所有屬性
1.5 刪除節(jié)點(diǎn)
parentNode.removeChild(node); //刪除某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn) node是要?jiǎng)h除的節(jié)點(diǎn)
注意：為了保證兼容性形入，要判斷元素節(jié)點(diǎn)的節(jié)點(diǎn)類型(nodeType)，若nodeType==1哥童，再執(zhí)行刪除操作抹镊。通過(guò)這個(gè)方法任斋，就可以在 IE和 Mozilla 完成正確的操作。
nodeType 屬性可返回節(jié)點(diǎn)的類型.最重要的節(jié)點(diǎn)類型是：
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<th width="30">元素類型</th>
<th>節(jié)點(diǎn)類型</th>
</tr>
<tr>
<td>元素element</td>
<td>1</td>
</tr>
<tr>
<td>屬性attr</td>
<td>2
</td>
</tr>
<tr>
<td>文本text</td>
<td>3
</td>
</tr>
<tr>
<td>注釋comments</td>
<td>8
</td>
</tr>
<tr>
<td>文檔document</td>
<td>9
</td>
</tr>
</table>
1.6 修改文本節(jié)點(diǎn)
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<th width="30">方法</th>
<th>作用</th>
</tr>
<tr>
<td>appendData(data);</td>
<td>將data加到文本節(jié)點(diǎn)后面</td>
</tr>
<tr>
<td>deleteData(start,length);</td>
<td> 將從start處刪除length個(gè)字符
</td>
</tr>
<tr>
<td>insertData(start,data);</td>
<td>在start處插入字符,start的開(kāi)始值是0;
</td>
</tr>
<tr>
<td>replaceData(start,length,data);</td>
<td>在start處用data替換length個(gè)字符
</td>
</tr>
<tr>
<td>splitData(offset);</td>
<td>在offset處分割文本節(jié)點(diǎn)
</td>
</tr>
<tr>
<td>substringData(start,length);</td>
<td>從start處提取length個(gè)字符
</td>
</tr>
</table>
1.7 屬性操作
getAttribute(name) //通過(guò)屬性名稱獲取某個(gè)節(jié)點(diǎn)屬性的值
setAttribute(name,value); //修改某個(gè)節(jié)點(diǎn)屬性的值
removeAttribute(name); //刪除某個(gè)屬性
1.8 查找節(jié)點(diǎn)
parentObj.firstChild; //如果節(jié)點(diǎn)為已知節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)就可以使用這個(gè)方法露筒。此方法可以遞歸進(jìn)行使用 parentObj.firstChild.firstChild.....
parentObj.lastChild; //獲得一個(gè)節(jié)點(diǎn)的最后一個(gè)節(jié)點(diǎn)呐伞，與firstChild一樣也可以進(jìn)行遞歸使用 parentObj.lastChild.lastChild.....
parentObj.childNodes; //獲得節(jié)點(diǎn)的所有子節(jié)點(diǎn)，然后通過(guò)循環(huán)和索引找到目標(biāo)節(jié)點(diǎn)
1.9 獲取相鄰的節(jié)點(diǎn)
curtNode.previousSibling; //獲取已知節(jié)點(diǎn)的相鄰的上一個(gè)節(jié)點(diǎn)
curtNode.nextSlbling; // 獲取已知節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)
1.10 獲取父節(jié)點(diǎn)
childNode.parentNode; //得到已知節(jié)點(diǎn)的父節(jié)點(diǎn)
1.11 替換節(jié)點(diǎn)
replace(newNode,oldNode);
2. 獲取文本內(nèi)容
2.1 innerHTML
innerHTML可以作為獲取文本的方法也可以作為修改文本內(nèi)容的方法
element.innerHTML 會(huì)直接返回element節(jié)點(diǎn)下所有的HTML化的文本內(nèi)容
<body>
<div>文本</div>
<div>文本</div>
</body>
document.body.innerHTML //返回"<div>文本</div><div>文本</div>";
同樣逆向的：
document.body.innerHTM="<div>文本</div><div></div>"會(huì)生成
<body>
<div>文本</div>
<div>文本</div>
</body>
慎式！注意 innerHTML方法只能作用于元素節(jié)點(diǎn)調(diào)用伶氢；文本節(jié)點(diǎn)并不能使用這個(gè)方法返回undefined！
2.2 nodeValue
nodeValue是一個(gè)HTML DOM的對(duì)象屬性瘪吏；
同樣的 可以通過(guò) nodeValue設(shè)置節(jié)點(diǎn)的文本內(nèi)容也可以直接返回文本內(nèi)容
直接用節(jié)點(diǎn)對(duì)象調(diào)用就都可以： 如上例
document.getElementsByTagName(div)[0].childNodes[0].nodeValue //返回“文本”
另外 nodeValue 屬性并不只存在于文本節(jié)點(diǎn)下 元素節(jié)點(diǎn)和屬性節(jié)點(diǎn)對(duì)象也都具有nodeValue屬性
屬性節(jié)點(diǎn)的 nodeValue屬性返回屬性值
元素節(jié)點(diǎn)的 nodeValue屬性返回null
2.3 textContent
textContent與innerHTML方法類似會(huì)返回對(duì)象節(jié)點(diǎn)下所有的文本內(nèi)容
但是區(qū)別為 textContent返回的內(nèi)容只有去HTML化的文本節(jié)點(diǎn)的內(nèi)容 如上例：
document.body.textContent //返回"文本文本" 癣防！注意在DOM中標(biāo)簽換行產(chǎn)生的空白字符會(huì)計(jì)入DOM中作為文本節(jié)點(diǎn)
另外IE8以前不支持textContent屬性
2.4 innerText
innerText方法與textContent方法類似 并且和innerHTML一樣也是作用于元素節(jié)點(diǎn)上
但是瀏覽器對(duì)于這兩種方法解析空白字符的機(jī)制不一樣；不是很常用
類似的還有outText outHTML等類似操作文本相關(guān)的方法肪虎，不是很常用不介紹了劣砍；
最后要提醒一點(diǎn)：文本與文本節(jié)點(diǎn)一定要區(qū)分，有些方法是依靠元素節(jié)點(diǎn)返回子文本內(nèi)容扇救，有些方法是文本節(jié)點(diǎn)返回自身文本內(nèi)容刑枝，文本節(jié)點(diǎn)是對(duì)象而文本只是字符串香嗓；
