DOM
- DOM的全稱叫做文本對(duì)象模型（Document Object Model）;是w3c定義的一種訪問(wèn)html和xml文檔的標(biāo)準(zhǔn)旦事，它提供了一系列接口，為程序和腳本動(dòng)態(tài)地訪問(wèn)和更新文檔的內(nèi)容疯搅，結(jié)構(gòu)和樣式。
- DOM將html或者xml文檔描繪成了一個(gè)由多節(jié)點(diǎn)構(gòu)成的結(jié)構(gòu)王带。如下便是DOM的節(jié)點(diǎn)層次圖
DOM節(jié)點(diǎn)層次圖
Node
- 說(shuō)到DOM埂软，有一個(gè)不得不說(shuō)的概念叫做node。什么是node峻凫？DOM將html中的整個(gè)文檔（document）渗鬼，每個(gè)元素，注釋荧琼，每個(gè)元素的屬性（特性）等等都看作是文檔中的一個(gè)個(gè)節(jié)點(diǎn)譬胎，而這些節(jié)點(diǎn)都屬于node類型，就是說(shuō)這些節(jié)點(diǎn)有著共同的屬性和方法（nodeType命锄，nodeName堰乔，nodeValue），但是又有其自己獨(dú)立的屬性和方法脐恩。
node總共有如下幾個(gè)類型（加粗的類型后面會(huì)詳細(xì)講解）：
1.Node.ELEMENT_NODE(1); 元素節(jié)點(diǎn)
2.Node.ATTRIBUTE_NODE(2); 屬性節(jié)點(diǎn)
3.Node.TEXT_NODE(3); 文本節(jié)點(diǎn)
4.Node.CDATA_SECTION_NODE(4); CDATA 區(qū)段
5.Node.ENTITY_REFERENCE_NODE(5); 實(shí)體引用元素
6.Node.ENTITY_NODE(6); 實(shí)體
7.Node.PROCESSING_INSTRUCTION_NODE(7); 表示處理指令
8.Node.COMMENT_NODE(8); 注釋節(jié)點(diǎn)
9.Node.DOCUMENT_NODE(9); 最外層的Root element,包括所有其它節(jié)點(diǎn)
10.Node.DOCUMENT_TYPE_NODE(10); <!DOCTYPE………..>
11.Node.DOCUMENT_FRAGMENT_NODE(11); 文檔碎片節(jié)點(diǎn)
12.Node.OTATION_NODE(12); DTD 中聲明的符號(hào)節(jié)點(diǎn)
var firstChild1 = someNode.childNodes[0];
var firstChild2 = someNode.childNodes.item(0);
var childCount = someNode.childNodes.length;//指的是訪問(wèn)NodeList時(shí)其中包含的節(jié)點(diǎn)數(shù)量
var hasChild = someNode.hasChildNodes()
var parentNode = someNode.parentNode
var dNode = someNode.ownerDocument
someNode.nodeName
someNode.nodeType //IE中是數(shù)字（例如1,2,3...）镐侯；其他瀏覽器是字符串（例如Node.DOCUMENT_FRAGMENT_NODE）
someNode.nodeValue
- nodeList對(duì)象
一種類數(shù)組對(duì)象，可以通過(guò)[1,2,3...]來(lái)索引得到里面的元素,也可以使用item()索引驶冒，同時(shí)具備length屬性苟翻；但是nodeLIst對(duì)象和數(shù)組不一樣的是，這個(gè)對(duì)象是時(shí)刻更新的骗污，而不是某一個(gè)時(shí)刻獲取它的時(shí)候得到的快照崇猫。
//將nodeList對(duì)象轉(zhuǎn)換成數(shù)組
var nodes = somenode.childNode; //childNode屬性可以返回一個(gè)nodeList對(duì)象來(lái)標(biāo)識(shí)節(jié)點(diǎn)的子節(jié)點(diǎn)
var array = [];
try{
array = Array.prototype.slice.call(nodes,0)
} catch (ex) { //針對(duì)ie
for(var i=0;i<nodes.length;i++){
array.push(nodes[i]);
}
}
- 節(jié)點(diǎn)操作
somenode.appendChild(othernode) //向末尾添加某個(gè)節(jié)點(diǎn)
somenode.insertBefore(newnode,innernode,null) //向指點(diǎn)位置插入某個(gè)節(jié)點(diǎn)
somenode.replaceChild(newnode,innernode) //替換某個(gè)節(jié)點(diǎn)
somenode.remove(innernode) //移除某個(gè)節(jié)點(diǎn)
Document類型
-
概念
js中通過(guò)Document類型表示文檔。doucment對(duì)象是HTMLDocument（繼承自Document類型）的一個(gè)實(shí)例需忿，表示整個(gè)HTML頁(yè)面诅炉。
Dcument節(jié)點(diǎn)的特征：
1.nodeType值為9
2.nodeName為"#document"
3.nodeValue為null
4.parentNode為null
5.ownerDocument為null
6.其子節(jié)點(diǎn)可能是一個(gè)DocumentType（最多一個(gè)）蜡歹、Element（最多一個(gè)）、processingInstruction或Comment涕烧。 -
子節(jié)點(diǎn)
1.documentElement和childNodes內(nèi)置的訪問(wèn)文檔子節(jié)點(diǎn)的快捷方式月而。
2.documentElement始終指向HTML頁(yè)面中的<html>元素。
3.作為HTMLDocument實(shí)例澈魄，document對(duì)象還有一個(gè)body屬性景鼠，直接指向<body>元素。
4.Document另一個(gè)可能的子節(jié)點(diǎn)是DocumentType痹扇。通常將<!DOCTYPE>標(biāo)簽看成一個(gè)與文檔其它部分不同的實(shí)體铛漓，可以通過(guò)doctype屬性訪問(wèn)。
var html = document.documentElement; //取得對(duì)html 引用
alert(html == document.childNodes[0]);//true
alert(html == document.firstChild);//true
var body = document.body; //取得對(duì)<body>引用
var doctype = document.doctype; //取得對(duì)<!DOCTYPE>引用
-
文檔信息
1.title屬性：包含著<title>元素中的文本鲫构∨ǘ瘢可以取得當(dāng)前頁(yè)面的標(biāo)題也可以修改。
2.對(duì)網(wǎng)頁(yè)的請(qǐng)求有關(guān)的3個(gè)屬性：URL结笨、domain和referrer包晰。URL屬性包含頁(yè)面完整的URL，domain屬性中只包含頁(yè)面的域名炕吸，referrer屬性保存著諒解到當(dāng)前頁(yè)面的那個(gè)頁(yè)面的URL伐憾。在沒有來(lái)源頁(yè)面的情況下，referrer屬性中可能會(huì)包含空字符串赫模。所有這些信息都存在于HTTP頭部树肃，只不過(guò)通過(guò)這些屬性讓我們能夠在JavaScript中訪問(wèn)它們而已。
var originalTitle = document.title;
document.title = "New page title"
var url = document.URL;
var domain = document.domain;
var referrer = document.referrer;
-
查找元素
1.getElemengById()接收一個(gè)參數(shù)瀑罗，要取得的元素的ID胸嘴。找到相應(yīng)元素放回該元素，否則返回null斩祭。如果頁(yè)面中多個(gè)元素的ID值相同劣像，則返回文檔中第一次出現(xiàn)的元素。
2.getElementsByTagName()接收一個(gè)參數(shù)摧玫，要取得的元素的標(biāo)簽名耳奕，返回0或多個(gè)元素的NodeList。在HTML文檔中席赂，這個(gè)方法會(huì)返回一個(gè)HTMLCollection對(duì)象吮铭，最為一個(gè)動(dòng)態(tài)集合，該對(duì)象與NodeList非常相似颅停。HTMLCollection對(duì)象有一個(gè)叫做namedItem()的方法谓晌。使用這個(gè)方法可以通過(guò)元素的name特性取得集合中的項(xiàng)。
var div = document.getElementById("divId");
var images = document.getElementsByTagName("img");
alert(images.length);
alert(images[0].src);
alert(images.item(0).src);
var myImage = images.namedItem("myImage");
特殊集合
除了屬性和方法癞揉，document對(duì)象還有一些特殊的集合纸肉，這些集合都是HTMLCollection對(duì)象溺欧，包括：
1.document.anchors,包含所有帶name特性的元素；
2.document.forms：包含文檔中所有<form>元素
3.document.images：包含文檔中所有圖像元素
4.document柏肪。links：包含文檔href特性的元素文檔寫入
document對(duì)象將輸出流寫入到網(wǎng)頁(yè)中的能力體現(xiàn)在下列4個(gè)方法中：write()姐刁、writeln()、open()和close()烦味。
1.open() 打開網(wǎng)頁(yè)的輸出流
2.write() 接收一個(gè)字符串參數(shù)聂使，要寫入到輸出流中的文本。write()原樣寫谬俄。
3.writeln() 接收一個(gè)字符串參數(shù)柏靶，要寫入到輸出流中的文本。與write()不同的是溃论，writeln()會(huì)在字符串末尾添加換行符（\n）屎蜓。
4.cloes()關(guān)閉網(wǎng)頁(yè)的輸出流。
Element類型
-
概念
js中通過(guò)Document類型表示文檔钥勋。doucment對(duì)象是HTMLDocument（繼承自Document類型）的一個(gè)實(shí)例炬转，表示整個(gè)HTML頁(yè)面。
Dcument節(jié)點(diǎn)的特征：
1.nodeType值為1
2.nodeName的值是元素的標(biāo)簽名
3.nodeValue的值為null算灸；
4.parentNode可能是Doucment或Element扼劈；
5.ownerDocument為null
6.子節(jié)點(diǎn)可能是Element、Text菲驴、Comment测僵、ProcessingInstruction、CDATASection或EntityReference谢翎。 -
HTML元素
所有HTML元素都由HTMLElement類型或者更具體的子類表示。HTMLElement直接繼承自Element并添加了一些屬性沐旨，分別對(duì)應(yīng)于每個(gè)HTML元素中都存在的標(biāo)準(zhǔn)特性：
1.id森逮，元素在文檔中的唯一標(biāo)識(shí)符
2.title，有關(guān)元素的附加說(shuō)明信息磁携。
3.lang褒侧，元素內(nèi)容的語(yǔ)言代碼。
4.dir谊迄，語(yǔ)言的方向闷供，值為“l(fā)tr”（left-to-right）或“rtl”。
5.className统诺，與元素的class特性對(duì)應(yīng)（class是ECMAScript的保留字）歪脏。
可以通過(guò)上面的屬性獲取和修改相應(yīng)的特性。
var id = element.id;
var title = element.title;
var lang = element.lang;
var dir = element.dir;
var className = element.className;
-
特性
每個(gè)元素都有一個(gè)或多個(gè)特性粮呢，這些特性的用途是給出相應(yīng)元素或其內(nèi)容的附加信息婿失。
1.getAttribute()可以獲得所有特性钞艇，包括自定義的特性，但是傳入的參數(shù)必須和特性的名稱相同（不區(qū)分大小寫）豪硅。
2.有兩類特殊的屬性哩照，他們雖然有對(duì)應(yīng)屬性名，但是屬性值和getAttribute()返回的不相同懒浮。第一類是style屬性飘弧，getAttribute()返回css文本，而屬性則是一個(gè)對(duì)象砚著。第二類是時(shí)間處理程序次伶，getAttribute()返回js代碼而屬性是一個(gè)js函數(shù)。(IE7-返回的值與屬性相同)
3.任何元素的所有特性也都可以通過(guò)DOM元素本身的屬性來(lái)訪問(wèn)赖草，但是只有公認(rèn)的特性才會(huì)以屬性的形式添加到DOM對(duì)象中（IE除外）学少。
4.一般只在獲取自定義特性時(shí)才用getAttribute().
5.setAttribute()方法接兩個(gè)參數(shù)，第一個(gè)是特性名秧骑，第二個(gè)是特性值版确。通過(guò)這個(gè)方法設(shè)置的特性名會(huì)同一轉(zhuǎn)換為小寫。
6.removeAttribute()徹底刪除元素的特性（IE6-不支持）乎折。
7.atrributes()屬性包含一個(gè)NamedNodeMap绒疗，與NodeList類似，也是一個(gè)“動(dòng)態(tài)”的集合骂澄。元素的每一個(gè)特性都用一個(gè)Attr節(jié)點(diǎn)表示吓蘑，每個(gè)節(jié)點(diǎn)都保存在NamedNodeMap中。
<div a="xxx"
id="div" class="div"
style="width:40px;height:40px;background:red"
onclick="handler">
</div>
var element = document.getElementById("div")
//getAttribute()不區(qū)分大小寫
var class2 = element.getAttribute("CLASS") //獲取class屬性
var class1 = element.getAttribute("class"); //獲取class屬性
//getAttribute()和屬性返回的值不一樣
var style1 = element.getAttribute("style"); //文本字符串
var style2 = element.style; //對(duì)象
function handler (argument) {
alert("xxx");
return "xxx";
}
var handler1 = element.getAttribute("onclick"); //function handler(){handler};
var handler2 = element.onclick; //handler
//getAttribute()可以獲取自定義屬性
var a = element.getAttribute("a"); //xxx
var a1 = element.a //undefined
//setAttribute()可以設(shè)置屬性
element.setAttribute("style", "width:40px;height:40px;background:blue");
//removeAttribute()可以刪除屬性
element.removeAttribute("a"); //徹底刪除了屬性a
//attributes()獲取屬性集合
var a = element.attributes; //獲取屬性集合
-
創(chuàng)建元素
可以通過(guò)document.createElement()來(lái)創(chuàng)建一個(gè)元素節(jié)點(diǎn)坟冲。有兩種方法：
1.接收你所要?jiǎng)?chuàng)建的元素的標(biāo)簽名
2.接收一個(gè)字符串磨镶；
var element = document.createElement("div") //創(chuàng)建一個(gè)div標(biāo)簽
var element = document.createElement("<div></div>") //創(chuàng)建一個(gè)div標(biāo)簽
-
元素的子節(jié)點(diǎn)
對(duì)元素的子元素節(jié)點(diǎn)進(jìn)行操作的正確方法應(yīng)該是：
for(var i=0;i<element.childNodes.length;i++){
if(element.childNodes[i].nodeType==1){
}
}
Text類型
-
概念
文本節(jié)點(diǎn)由 Text 類型表示，包含的是可以照字面解釋的純文本內(nèi)容健提。純文本中可以包含轉(zhuǎn)義后的 HTML 字符琳猫，但不能包含 HTML 代碼。Text 節(jié)點(diǎn)具有以下特征：
1.nodeType 3
2.nodeName '#text'
3.nodeValue 節(jié)點(diǎn)所包含的文本
4.parentNode Element -
操作
1.document.createTextNode() 接收一個(gè)參數(shù)：要?jiǎng)?chuàng)建的文本節(jié)點(diǎn)中的文本私痹。
2.normalize()合并相鄰文本節(jié)點(diǎn)
3.plitText() 將一個(gè)文本節(jié)點(diǎn)分成兩個(gè)文本節(jié)點(diǎn)脐嫂，接收一個(gè)參數(shù)代表切割開始的地方。
var element = document.createElement('div');
element.className = 'message';
var textNode = document.createTextNode('Hello'); //創(chuàng)建第一個(gè)文本節(jié)點(diǎn)
var anotherTextNode = document.createTextNode('World'); //創(chuàng)建另一個(gè)文本節(jié)點(diǎn)
element.appendChild(textNode);
element.appendChild(anotherTextNode);
element.normalize(); //合并文本節(jié)點(diǎn)
var newNode = element.firstChild.splitText(5); //以第五個(gè)字符為分界切割文本
Attr類型
-
概念
元素的特性在 DOM 中以 Attr 類型來(lái)表示紊遵。在所有瀏覽器中都可以訪問(wèn) Attr 類型的構(gòu)造函數(shù)和原型账千。從技術(shù)角度來(lái)講，特性就是存在于元素的 attributes 屬性中的節(jié)點(diǎn)暗膜。特性節(jié)點(diǎn)具有下列特征：
1.nodeType 2
2.nodeName 特性名稱
3.nodeValue 特性的值
4.parentNode null -
操作
1.Attr 對(duì)象有三個(gè)屬性匀奏，name value specified。其中桦山，name 是特性名稱攒射，value 是特性的值醋旦，specified 是布爾值，用以區(qū)別特性是代碼中指定的還是默認(rèn)的会放。
2.使用 document.createAttribute() 并傳入特性的名稱可以創(chuàng)建新的特性節(jié)點(diǎn)饲齐。
var attr = document.createAttribute('align');
attr.value = 'left';
element.setAttributeNode(attr);
最后最后最后介紹一下：動(dòng)態(tài)腳本
function loadScript(url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.body.appendChild(script);
}
