一稚疹、node類型
nodeType屬性:表明節(jié)點(diǎn)的類型
nodeName
nodeValue
2秫筏、節(jié)點(diǎn)關(guān)系
childNode
parentNode
previousSibling
nextSibling
firstChild
lastChild
hasChildNodes():這個方法在節(jié)點(diǎn)包含一或多個子節(jié)點(diǎn)的情況下返回true
DOM節(jié)點(diǎn)之間的關(guān)系如下圖所示:
3广鳍、操作節(jié)點(diǎn)
appendChild(node):用于向childNodes 列表的末尾添加一個節(jié)點(diǎn)。返回值是插入的節(jié)點(diǎn)。
var obody = document.body;
var oP = document.getElementById("p");
var node = document.createElement("strong"); //創(chuàng)建一個元素節(jié)點(diǎn)
var textNode = document.createTextNode("I am strong");//創(chuàng)建一個文本節(jié)點(diǎn)
node.appendChild(textNode); // 文本節(jié)點(diǎn)掛載到元素節(jié)點(diǎn)strong上
var returnedNode = obody.appendChild(node); //strong 掛載到body節(jié)點(diǎn)上
console.log(returnedNode == node); //true
console.log(obody.lastChild == node); //true
注意：如果傳入到appendChild()中的節(jié)點(diǎn)已經(jīng)是文檔的一部分了赢赊，那結(jié)果就是將該節(jié)點(diǎn)從原來的位置轉(zhuǎn)移到新位置。即使可以將DOM樹看成是由一系列指針連接起來的聂示，但任何DOM節(jié)點(diǎn)也不能同時(shí)出現(xiàn)在文檔中的多個位置上域携。
insertBefore(newChild, refChild)
這個方法接受兩個參數(shù)：要插入的節(jié)點(diǎn)和作為參照的節(jié)點(diǎn)。插入節(jié)點(diǎn)后鱼喉，被插入的節(jié)點(diǎn)會變成參照節(jié)點(diǎn)的前一個同胞節(jié)點(diǎn)（previousSibling）秀鞭，同時(shí)被方法返回。
replaceChild(newChild, oldChild)
接受的兩個參數(shù)是：要插入的節(jié)點(diǎn)和要替換的節(jié)點(diǎn)扛禽。要替換的節(jié)點(diǎn)將由這個方法返回并從文檔樹中被移除锋边，同時(shí)由要插入的節(jié)點(diǎn)占據(jù)其位置。
removeChild()
與使用replaceChild()方法一樣编曼，通過removeChild()移除的節(jié)點(diǎn)仍然為文檔所有豆巨，只不過在文檔中已經(jīng)沒有了自己的位置。
4掐场、其他方法
cloneNode(boolean)
用于創(chuàng)建調(diào)用這個方法的節(jié)點(diǎn)的一個完全相同的副本往扔。
注意：cloneNode()方法不會復(fù)制添加到DOM 節(jié)點(diǎn)中的JavaScript 屬性，例如事件處理程序等熊户。這個方法只復(fù)制特性萍膛、（在明確指定的情況下也復(fù)制）子節(jié)點(diǎn)，其他一切都不會復(fù)制嚷堡。IE 在此存在一個bug蝗罗，即它會復(fù)制事件處理程序，所以我們建議在復(fù)制之前最好先移除事件處理程序蝌戒。
normalize()
這個方法唯一的作用就是處理文檔樹中的文本節(jié)點(diǎn)串塑。
二、Document類型
JavaScript 通過Document 類型表示文檔北苟。在瀏覽器中桩匪，document 對象是HTMLDocument（繼承自Document 類型）的一個實(shí)例，表示整個HTML 頁面友鼻。而且吸祟，document 對象是window 對象的一個屬性瑟慈，因此可以將其作為全局對象來訪問。Document 節(jié)點(diǎn)具有下列特征：
nodeType 的值為9屋匕；
nodeName 的值為"#document"葛碧；
nodeValue 的值為null；
parentNode 的值為null过吻；
ownerDocument 的值為 null进泼；
其子節(jié)點(diǎn)可能是一個DocumentType（最多一個）、Element（最多一個）纤虽、ProcessingInstruction或Comment乳绕。
1、文檔的子節(jié)點(diǎn)
documentElement屬性
該屬性始終指向HTML 頁面中的<html>元素
documentBody屬性
指向body元素
document.doctype
var doctype = document.doctype; //取得對<!DOCTYPE>的引用
2逼纸、文檔信息
document.title
document.URL
document.domain 可以設(shè)置
document.referrer 獲取來源頁面的URL
由于跨域安全限制洋措， 來自不同子域的頁面無法通過JavaScript 通信。而通過將每個頁面的document.domain 設(shè)置為相同的值杰刽，這些頁面就可以互相訪問對方包含的JavaScript 對象了
3菠发、查找元素
document.getElementById
document.getElementsByTagName
getElementsByName()
4、特殊集合
document.anchors贺嫂，包含文檔中所有帶name 特性的<a>元素滓鸠；
document.applets，包含文檔中所有的<applet>元素第喳，因?yàn)椴辉偻扑]使用<applet>元素糜俗，所以這個集合已經(jīng)不建議使用了
document.forms，包含文檔中所有的<form>元素
document.images曲饱，包含文檔中所有的<img>元素
document.links悠抹，包含文檔中所有帶href 特性的<a>元素。
5扩淀、DOM一致性檢測
document.implementation.hasFeature(feature, version)
6楔敌、文檔寫入
document.write()
document.writeIn()
document.open()
document.close()
三、Element類型
Element 類型用于表現(xiàn)XML或HTML元素引矩，提供了對元素標(biāo)簽名、子節(jié)點(diǎn)及特性的訪問侵浸。
- nodeType 的值為1旺韭；
- nodeName 的值為元素的標(biāo)簽名；
- nodeValue 的值為null掏觉；
- parentNode 可能是Document 或Element区端；
- 其子節(jié)點(diǎn)可能是Element、Text澳腹、Comment织盼、ProcessingInstruction杨何、CDATASection 或EntityReference。
nodeNametagName訪問元素的標(biāo)簽名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="myDiv"></div>
<script>
var div = document.getElementById("myDiv");
console.log(div.tagName); //"DIV"
console.log(div.tagName === div.nodeName); //true
</script>
</body>
</html>
這里的元素標(biāo)簽名是div沥邻，它擁有一個值為"myDiv"的ID危虱。可是唐全，div.tagName 實(shí)際上輸出的是"DIV"而非"div"埃跷。在HTML 中，標(biāo)簽名始終都以全部大寫表示邮利；而在XML（有時(shí)候也包括XHTML）中弥雹，標(biāo)簽名則始終會與源代碼中的保持一致。假如你不確定自己的腳本將會在HTML 還是XML 文檔中執(zhí)行延届，最好是在比較之前將標(biāo)簽名轉(zhuǎn)換為相同的大小寫形式
1剪勿、HTML元素
id，元素在文檔中的唯一標(biāo)識符方庭。
title厕吉，有關(guān)元素的附加說明信息，一般通過工具提示條顯示出來二鳄。
lang赴涵，元素內(nèi)容的語言代碼，很少使用订讼。
dir髓窜，語言的方向，值為"ltr"（left-to-right欺殿，從左至右）或"rtl"（right-to-left寄纵，從右至左），也很少使用脖苏。
className程拭，與元素的class 特性對應(yīng)，即為元素指定的CSS類棍潘。沒有將這個屬性命名為class恃鞋，是因?yàn)閏lass 是ECMAScript 的保留字
var div = document.getElementById("myDiv");
console.log(div.id);
console.log(div.className);
console.log(div.title);
console.log(div.lang);
console.log(div.dir);
2、獲取特性
getAttribute()
注意：有兩類特殊的特性亦歉，它們雖然有對應(yīng)的屬性名恤浪，但屬性的值與通過getAttribute()返回的值并不相同
第一類：style屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"
style="padding:10px;"
></div>
<script>
var div = document.getElementById("myDiv");
console.log(div.style == div.getAttribute("style")); //false
</script>
</body>
</html>
3、設(shè)置特性
setAttribute()
這個方法接受兩個參數(shù)：要設(shè)置的特性名和值肴楷。如果特性已經(jīng)存在水由，setAttribute()會以指定的值替換現(xiàn)有的值；如果特性不存在赛蔫，setAttribute()則創(chuàng)建該屬性并設(shè)置相應(yīng)的值砂客。
注意：這里我們要區(qū)分[特性]和][屬性]的概念泥张。
- 特性：比如class、id……
- 屬性：包括特性鞠值，可以自定義屬性媚创。
當(dāng)我們?yōu)橐粋€元素添加一個屬性時(shí)，如果是特性齿诉，則可以直接添加筝野，如果是自定義屬性，必須用setAttribute()
removeAttribute
這個方法用于徹底刪除元素的特性粤剧。調(diào)用這個方法不僅會清除特性的值歇竟，而且也會從元素中完全刪除特性
4、attributes屬性
5抵恋、創(chuàng)建元素
document.createElement()
6焕议、元素的子節(jié)點(diǎn)
childNodes
四、Text類型
文本節(jié)點(diǎn)由Text 類型表示弧关，包含的是可以照字面解釋的純文本內(nèi)容盅安。純文本中可以包含轉(zhuǎn)義后的HTML 字符，但不能包含HTML 代碼世囊。Text 節(jié)點(diǎn)具有以下特征：
nodeType 的值為3别瞭；
nodeName 的值為"#text"；
nodeValue 的值為節(jié)點(diǎn)所包含的文本株憾；
parentNode 是一個Element蝙寨；
不支持（沒有）子節(jié)點(diǎn)。
nodeValue 屬性或data 屬性: 訪問Text節(jié)點(diǎn)中包含的文本
appendData(text)：將text 添加到節(jié)點(diǎn)的末尾嗤瞎。
deleteData(offset, count)：從offset 指定的位置開始刪除count 個字符墙歪。
insertData(offset, text)：在offset 指定的位置插入text。
replaceData(offset, count, text)：用text 替換從offset 指定的位置開始到offset+count 為止處的文本贝奇。
splitText(offset)：從offset 指定的位置將當(dāng)前文本節(jié)點(diǎn)分成兩個文本節(jié)點(diǎn)虹菲。
substringData(offset, count)：提取從offset 指定的位置開始到offset+count 為止處的字符串。
1掉瞳、創(chuàng)建文本節(jié)點(diǎn)
document.createTextNode(text)
2毕源、規(guī)范化文本節(jié)點(diǎn)
normalize()
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("hello! Tom");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("Jerry");
element.appendChild(anotherTextNode);
document.body.appendChild(element);
console.log(element.childNodes.length); //2
element.normalize();
console.log(element.childNodes.length); //1
console.log(element.firstChild.nodeValue); //hello! TomJerry
3、分割文本節(jié)點(diǎn)
Text 類型提供了一個作用與normalize()相反的方法：splitText()陕习。這個方法會將一個文本節(jié)點(diǎn)分成兩個文本節(jié)點(diǎn)霎褐，即按照指定的位置分割nodeValue 值。原來的文本節(jié)點(diǎn)將包含從開始到指定位置之前的內(nèi)容衡查，新文本節(jié)點(diǎn)將包含剩下的文本瘩欺。這個方法會返回一個新文本節(jié)點(diǎn)必盖，該節(jié)點(diǎn)與原節(jié)點(diǎn)的parentNode 相同拌牲。來看下面的例子俱饿。
var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("hello Tom");
element.appendChild(textNode);
document.body.appendChild(element);
var newNode = element.firstChild.splitText(5);
console.log(element.firstChild.nodeValue); //hello
console.log(newNode.nodeValue); // Tom
console.log(element.childNodes.length); //2
五、Attr類型
attr表示特性類型
