文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點樹）
-
在DOM中，每個節(jié)點都是一個對象；DOM節(jié)點有3個重要的屬性：
nodeName節(jié)點名稱、nodeValue節(jié)點值、nodeType節(jié)點類型- 每個節(jié)點都有一個
nodeType屬性，用于表明節(jié)點的類型，該屬性是只讀的
元素類型 節(jié)點類型 元素 1 屬性 2 文本 3 注釋 8 文檔 9//判斷某個節(jié)點的類型 if(someNode.nodeType == 1){ //兼容所有瀏覽器 console.log("Node is an Element"); }-
nodeName只讀屬性，表示節(jié)點的名稱
1.元素節(jié)點的 nodeName 與標(biāo)簽名相同 2.屬性節(jié)點的 nodeName 是屬性的名稱 3.文本節(jié)點的 nodeName 永遠(yuǎn)是text 4.文檔節(jié)點的 nodeName 永遠(yuǎn)是document-
nodeValue屬性，表示屬性的值
1.元素節(jié)點的 nodeValue 是 undefined 或 null 2.文本節(jié)點的 nodeValue 是文本自身 3.屬性節(jié)點的 nodeValue 是屬性的值 - 每個節(jié)點都有一個
-
節(jié)點之間的關(guān)系，就像一個家譜
-
childNodes屬性，該屬性保存著一個NodeList對象，是個類數(shù)組對象，用于保存一組有序的節(jié)點，可以通過位置訪問的節(jié)點，并且該對象還有length屬性；NodeList對象的獨特之處在于它是基于DOM結(jié)構(gòu)動態(tài)執(zhí)行查詢的結(jié)果，DOM結(jié)構(gòu)的變化能夠自動反映在NodeList對象中
-
var firstChild = someNode.childNodes[0];
var count = someNode.childNodes.length; //length屬性表示訪問NodeList那一刻時包含的節(jié)點數(shù)量
-
parentNode屬性，指向文檔樹中的父節(jié)點，childNodes列表中的所有節(jié)點都擁有相同的父節(jié)點，并且這些節(jié)點相互之間都是兄弟節(jié)點 -
previousSibling屬性，返回某個節(jié)點之前緊跟的節(jié)點（處于同一樹層級中）；nextSibling屬性，返回某個節(jié)點之后緊跟的節(jié)點（處于同一樹層級中）；2者相同點是，如果無此節(jié)點則返回null；因此，列表中第一個節(jié)點的previousSibling屬性和最后一個節(jié)點的nextSibling屬性都返回null
if(someNode.nextSibling == null){
console.log("Last node");
}else if(someNode.previousSibling == null){
console.log("First node");
}
//如果列表中只有一個節(jié)點，那么這2個屬性都為null
-
firstChild屬性和lastChild屬性分別返回childNodes列表的第一個子節(jié)點和最后一個子節(jié)點，如果沒有則返回null
someNode.firstChild == someNode.childNodes[0];
someNode.lastChild == someNode.childNodes[someNode.childNodes.length-1];
//只有一個子節(jié)點的情況下，2者指向同一個節(jié)點
-
操作節(jié)點
-
appendChild()在指定節(jié)點的最后一個子節(jié)點列表之后添加一個新的子節(jié)點，返回新增節(jié)點
var returnNode = someNode.appendChild(newNode); console.log(returnNode == newNode); //true console.log(newNode == someNode.lastChild); //true //如果傳入的節(jié)點已經(jīng)存在于節(jié)點樹中，則將該節(jié)點從原來的位置轉(zhuǎn)移到新位置 var returnNode = someNode.appendChild(someNode.firstChild); console.log(returnNode == someNode.firstChild); //false console.log(returnNode == someNode.lastChild); //true-
insertBefore()在已有的子節(jié)點前插入一個新的子節(jié)點，接收2個參數(shù)，分別表示要插入的新節(jié)點和參照節(jié)點，新節(jié)點將成為參照節(jié)點的前一個兄弟節(jié)點（previousSibling）；如果參照節(jié)點是null，則相當(dāng)于執(zhí)行appendChild()
-
someNode.insertBefore(newNode,null); //添加成為最后一個子節(jié)點
someNode.insertBefore(newNode,someNode.firstChild); //添加成為第一個子節(jié)點
-
replaceChild()實現(xiàn)子節(jié)點(對象)的替換，返回被替換對象的引用；接收2個參數(shù)，分別表示要插入的節(jié)點和被替換節(jié)點；被替換的節(jié)點仍然在文檔中，只是沒有位置了
someNode.replaceChild(newNode,someNode.firstChild); //替換第一個子節(jié)點
-
removeChild()從子節(jié)點列表中移除節(jié)點，返回被移除節(jié)點；移除失敗，返回null；同replaceChild()被移除的節(jié)點仍在文檔中
someNode.removeChild(someNode.lastChild); //移除最后一個子節(jié)點
-
cloneNode()用于創(chuàng)建調(diào)用這個方法的節(jié)點的完全相同的副本，接收一個布爾值參數(shù)，true表示深復(fù)制，也就是復(fù)制節(jié)點及其整個子節(jié)點樹，false表示淺復(fù)制，只復(fù)制節(jié)點本身
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
//假設(shè)myList保存了<ul>的引用
var deepList = myList.cloneNode(true);
var shallowList = myList.cloneNode(false);
console.log(deepList .childNodes.length); //3（非IE）
console.log(shallowList .childNodes.length); //0
-
Document類型
Document類型表示文檔；在瀏覽器中，document對象是HTMLDocument（繼承自Document類型）的一個實例，表示整個HTML頁面，而且document對象是window對象的一個屬性
1.文檔的子節(jié)點
documentElement屬性：始終指向頁面中<html>元素
var html = document.documentElement;
html === document.firstChild; //true
body屬性：指向<body>元素
var body = document.body;
2.文檔信息
title屬性：包含<title>元素中的文本，這個屬性可以獲取也可以修改當(dāng)前頁面的標(biāo)題并顯示在瀏覽器標(biāo)題欄中
var title = document.title;
document.title = " this is new title ";
URL屬性：包含頁面完整的URL，也就是地址欄中的URL
domain屬性：只包含頁面的域名，該屬性是可以設(shè)置的，具體可以參考跨域相關(guān)內(nèi)容
referrer屬性：保存著鏈接到當(dāng)前頁的那個頁面的URL，沒有來源的情況下可能保存著空字符串
3.查找內(nèi)容
getElementById()：接收一個參數(shù)，即要獲取的元素的ID，必須嚴(yán)格匹配，區(qū)分大小寫，如找到元素則返回該元素，如沒有找到則返回null
getElementsByTagName()：接收一個參數(shù)，即要獲取元素的標(biāo)簽名，返回包含零個或多個元素的NodeList；在HTML中返回一個集合對象，該集合擁有length屬性，還可以用下標(biāo)獲取對象中的項
getElementsByName()：返回帶有給定name特性的元素；多用在單選按鈕中，同樣返回一個集合
4.文檔寫入
write()：接收一個字符串參數(shù)
document.write("<strong>" + (new Date()).toString() + "</strong>")
-
Element類型
1.HTML元素
所有HTML元素都由HTMLElement類型表示，具有以下屬性：
var div = document.getElementById("mydiv");
console.log( div.id ); //mydiv
div.className = "text";
console.log( div.className ); //text；因為class是保留字，因此該屬性用className命名
2.取得特性
操作特性的3個方法：getAttribute()、setAttribute()、removeAttribute()
<div id="mydiv" class="bgColor"></div>
var div = document.getElementById("mydiv");
var divId = div.getAttribute('id');
var divClass = div.getAttribute('class'); //注意這里傳的參數(shù)是class不是className，className只在通過對象屬性訪問特性時才使用
var divTitle = div.getAttribute('title');
console.log( divId ); //mydiv
console.log( divClass ); //bgColor
console.log( divTitle ); //特性不存在時返回null
var div = document.getElementById("mydiv");
div.setAttribute('id','newDiv'); //接收2個參數(shù)，分別是要設(shè)置的特性名和值
div.setAttribute('class','newClass');
div.setAttribute('title','text'); //如果特性不存在，則創(chuàng)建屬性并設(shè)置相應(yīng)的值
var divId = div.getAttribute('id');
var divClass = div.getAttribute('class');
var divTitle = div.getAttribute('title');
console.log( divId ); //newDiv
console.log( divClass ); //newClass
console.log( divTitle ); //text
3.創(chuàng)建元素
var div = document.creatElement('div'); //接收1個參數(shù)，即要創(chuàng)建元素的標(biāo)簽名
div.id = "mydiv";
div.className = "bgColor";
4.元素的子節(jié)點
元素的childNodes屬性包含了元素的所有子節(jié)點，這些子節(jié)點可能是元素、文本節(jié)點、注釋等；需要注意的是瀏覽器在解析時的差別：
<ul id="myList">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
//IE8及以下版本解析這段代碼時，會顯示ul有3個子節(jié)點，分別是3個<li>
//其他瀏覽器解析時則顯示7個元素，除了3個<li>之外還有4個文本節(jié)點，包括空白符
var ul = document.getElementById('myList');
for(var i=0;i<ul.childNodes.length;i++){
if(ul.childNodes[i].nodeType == 1){ //更好的兼容瀏覽器，先提前檢查下節(jié)點類型，確定是元素節(jié)點之后再執(zhí)行相應(yīng)操作
console.log(ul.childNodes[i].innerHTML);
}
}
