文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法畴博。DOM 將HTML文檔呈現(xiàn)為帶有元素源哩、屬性和文本的樹結構（節(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 與標簽名相同 2.屬性節(jié)點的 nodeName 是屬性的名稱 3.文本節(jié)點的 nodeName 永遠是text 4.文檔節(jié)點的 nodeName 永遠是document-
nodeValue屬性囱挑，表示屬性的值
1.元素節(jié)點的 nodeValue 是 undefined 或 null 2.文本節(jié)點的 nodeValue 是文本自身 3.屬性節(jié)點的 nodeValue 是屬性的值 - 每個節(jié)點都有一個
-
節(jié)點之間的關系醉顽，就像一個家譜
-
childNodes屬性，該屬性保存著一個NodeList對象平挑，是個類數(shù)組對象游添，用于保存一組有序的節(jié)點，可以通過位置訪問的節(jié)點通熄，并且該對象還有length屬性唆涝；NodeList對象的獨特之處在于它是基于DOM結構動態(tài)執(zhí)行查詢的結果，DOM結構的變化能夠自動反映在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，則相當于執(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表示深復制项鬼，也就是復制節(jié)點及其整個子節(jié)點樹，false表示淺復制劲阎，只復制節(jié)點本身
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
//假設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>元素中的文本，這個屬性可以獲取也可以修改當前頁面的標題并顯示在瀏覽器標題欄中
var title = document.title;
document.title = " this is new title ";
URL屬性：包含頁面完整的URL锡垄，也就是地址欄中的URL
domain屬性：只包含頁面的域名沦零，該屬性是可以設置的，具體可以參考跨域相關內(nèi)容
referrer屬性：保存著鏈接到當前頁的那個頁面的URL货岭，沒有來源的情況下可能保存著空字符串
3.查找內(nèi)容
getElementById()：接收一個參數(shù)路操，即要獲取的元素的ID，必須嚴格匹配千贯，區(qū)分大小寫屯仗，如找到元素則返回該元素，如沒有找到則返回null
getElementsByTagName()：接收一個參數(shù)搔谴，即要獲取元素的標簽名魁袜，返回包含零個或多個元素的NodeList；在HTML中返回一個集合對象敦第，該集合擁有length屬性峰弹，還可以用下標獲取對象中的項
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ù)灭将，分別是要設置的特性名和值
div.setAttribute('class','newClass');
div.setAttribute('title','text'); //如果特性不存在疼鸟，則創(chuà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)建元素的標簽名
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í)行相應操作
console.log(ul.childNodes[i].innerHTML);
}
}
