一：Node類型
DOM1級定義了一個Node接口，該接口是由DOM中的所有節點類型實現。每個節點都有一個nodeType屬性，用於表明節點的類型，節點類型在Node類型中有以下幾種：
Node.ELEMENT_NODE(1); 元素節點
Node.ATTRIBUTE_NODE(2); 屬性節點
Node.TEXT_NODE(3); 文本節點
Node.DOCUMENT_NODE(9); 文檔節點
其實還有很多種，但是那些都不是很常用，所以就來理解這其中4種就可以了，我們先來看看節點類型，比如如下代碼：
HTML代碼如下：
<div id="test"> <p>aaaaaa</p> <p>bbbbbb</p> <p>cccccc</p> </div>
JS如下：
var test = document.getElementById("test");
if(test.nodeType === Node.ELEMENT_NODE) {
alert(1)
}
如上代碼在IE8及以下下是不行的，會報錯，如下：
因為IE沒有公開Node類型的構造函數，因此在IE8-下會有錯誤，但是我們可以通過數值來比較，比如上面的要比較元素節點的話，我們可以使用1來比較，同理屬性節點是2，文本節點是3；如下代碼：
var test = document.getElementById("test");
// 下面的所有的浏覽器都支持
if(test.nodeType == 1) {
alert(1)
}
理解nodeName與nodeValue
nodeName保存的是元素的標簽名，而nodeValue一般都是null；我們可以看如下代碼，沒有特殊的說明，HTML代碼都是上面的，因此這邊就不貼代碼了；如下JS代碼測試：
var test = document.getElementById("test");
if(test.nodeType == 1) {
console.log(test.nodeName); // 打印DIV
console.log(test.nodeValue); // 打印null
}
理解節點關系
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
如上代碼，我們可以把head和body是html的子元素，同理html是他們的父級元素，那麼head和body就是兄弟元素了，那麼head及body裡面的就是子元素了，我們需要明白的是每個節點都有一個childNodes屬性，其保存的是類似數組的元素，其也有length屬性，但是他不是數組Array的實例，比如我們可以看看如下測試代碼即可：
<div id="test"> <p>aaaaaa</p> <p>bbbbbb</p> <p>cccccc</p> </div>
JS代碼如下：
var test = document.getElementById("test");
if(test.nodeType == 1) {
console.log(test.childNodes);
console.log(test.childNodes.length);
}
如上代碼，在標准浏覽器下及IE9+下 第一行打印如下：
[text, p, text, p, text, p, text, item: function]
第二行打印7 長度為7，因為他們把文本節點那個空格也包括進去了，但是在IE8及以下，長度為3，他們不包括文本空格的節點，因此想要統一的話，我們可以編寫HTML代碼去掉空格，如下HTML代碼即可；
<div id="test"><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>
這個問題稍後在仔細考慮，我們現在來看看如何取得子元素，我們可以使用2種方法，第一種是使用中括號[index]索引，第二種是使用item[index]索引，如下代碼：
console.log(test.childNodes[1]); // <p>bbbbbb</p>
console.log(test.childNodes.item(1)); // <p>bbbbbb</p>
但是他們並不是數組，我們可以測試下代碼即可，如下代碼：
console.log(Object.prototype.toString.call(test.childNodes) === "[object Array]");
// false但是我們使其轉換為數組，如下代碼：
//在IE8 及之前版本中無效
var arrayOfNodes = Array.prototype.slice.call(test.childNodes,0);
console.log(arrayOfNodes instanceof Array);
// true不過在IE8及之前不生效；由於IE8及更早版本將NodeList實現為一個COM對象，而我們不能像使用JScript對象那樣使用對象，要想在IE低版本中轉換為Array的形式，我們可以像下面一樣封裝一個方法即可；
function convertToArray(nodes){
var array = null;
try {
array = Array.prototype.slice.call(nodes, 0); //針對非IE 浏覽器
} catch (ex) {
array = new Array();
for (var i=0, len=nodes.length; i < len; i++){
array.push(nodes[i]);
}
}
return array;
}
var test = document.getElementById("test");
var testArray = convertToArray(test.childNodes);
console.log(testArray instanceof Array); // true
理解parentNode（父節點），previousSibling(上一個兄弟節點)，nextSibling（下一個兄弟節點）;
每個節點都有一個parentNode屬性，該屬性指向文檔中父節點，previousSibling是指當前節點的上一個同胞節點，nextSibling是指當前節點的下一個同胞節點，比如如下代碼：
<div id="test"><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>
var test = document.getElementById("test");
if(test.nodeType == 1) {
var secodeChild = test.childNodes[1];
console.log(secodeChild); // <p>bbbbbb</p>
console.log(secodeChild.previousSibling); // <p>aaaaaa</p>
console.log(secodeChild.nextSibling); // <p>cccccc</p>
}
如果該節點列表中只有一個節點的話，那麼該節點的previousSibling和nextSibling都為null；父節點的firstChild指向了父節點中第一個節點；如下代碼：
<div id="test"><p class="a">aaaaaa</p><p class="b">bbbbbb</p><p class="c">cccccc</p></div>
JS如下：
var test = document.getElementById("test");
if(test.nodeType == 1) {
console.log(test.firstChild); // <p class="a">aaaaaa</p>
console.log(test.lastChild); // <p class="c">cccccc</p>
}
父節點的firstChild始終等於父節點的.childNodes[0],父節點的lastChild始終等於父節點的.childNodes[父節點的.childNodes.length - 1]; 如下代碼：
console.log(test.firstChild === test.childNodes[0]); // true console.log(test.lastChild === test.childNodes[test.childNodes.length - 1]); // true
如果沒有子節點的話，那麼firstChild和lastChild都指向為空null;
hasChildNodes()：如果需要判斷該父節點有沒有子節點的話，可以使用該方法判斷，返回的是一個布爾型，有返回true，沒有返回false，如下代碼：
<div id="test"><p class="a">aaaaaa</p><p class="b">bbbbbb</p><p class="c">cccccc</p></div>
JS代碼如下：
var test = document.getElementById("test");
console.log(test.hasChildNodes());
// true如果是如下的 就返回false；如下代碼：
<div id="test"></div>
var test = document.getElementById("test");
console.log(test.hasChildNodes()); // false
ownerDocument: 所有節點都有最後一個屬性是ownerDocument，該屬性指向表示整個文檔的文檔節點，這種關系表示的任何節點都屬於它所在的文檔，任何節點都不能同時存在兩個或更多文檔中，通過這個屬性，我們可以不必在節點層次中通過層層回溯到達頂端，而是可以直接訪問文檔節點；如下測試代碼：
<div id="test">
<p class="a">11</p>
</div>
var test = document.getElementById("test");
console.log(test.ownerDocument); // document
var p = test.ownerDocument.getElementsByTagName("p");
console.log(p); // <p class="a">11</p>
appendChild(): 用於向childNodes列表的末尾添加一個節點；返回的是新增加的節點；如下代碼：
<div id="test">
<p class="a">11</p>
</div>
JS代碼如下：
var test = document.getElementById("test");
var newNode = document.createElement("p");
var returnNode = test.appendChild(newNode);
console.log(returnNode); // <p></p>
console.log(returnNode === newNode); // true
console.log(test.lastChild === newNode); // true
insertBefore(): 該方法是將新節點插入到指定的節點的前面去，該方法接收2個參數，要插入的節點和作為參照的節點；插入節點後，被插入的節點會變成參照節點的前一個同胞節點，同時被方法返回，如下代碼：
<div id="test">
<p class="a">11</p>
</div>
JS代碼如下：
var test = document.getElementById("test");
var newNode = document.createElement("div");
var returnNode = test.insertBefore(newNode,test.childNodes[0]);
console.log(returnNode); // <div></div>
console.log(returnNode === newNode); // true
插入節點後，結構變成如下：
復制代碼 代碼如下:
<div id="test">
<div></div>
<p class="a">11</p>
</div>
但是如果參照節點為null的話，那麼就會把新節點插入到最後面去了，如下代碼：
復制代碼 代碼如下:
var test = document.getElementById("test");
var newNode = document.createElement("div");
var returnNode = test.insertBefore(newNode,null);
插入後HTML結構如下：
復制代碼 代碼如下:
<div id="test">
<p class="a">11</p>
<div></div>
</div>
我們還可以更深入的看下如下測試代碼：
var test = document.getElementById("test");
var newNode = document.createElement("div");
// 插入後成為最後一個節點
var returnNode = test.insertBefore(newNode,null);
console.log(returnNode === test.lastChild); // true
// 插入後成為第一個節點
var returnNode = test.insertBefore(newNode,test.firstChild);
console.log(returnNode === newNode); // true
console.log(newNode === test.firstChild); // true
// 插入到最後一個子節點的前面
var returnNode = test.insertBefore(newNode,test.lastChild);
console.log(returnNode === test.childNodes[test.childNodes.length - 2]); // true
replaceChild(); 該方法接收2個參數，要插入的節點和要替換的節點，要替換的節點將由這個方法返回並從文檔樹中被移除，同時由插入的節點占據其位置，如下代碼：
<div id="test"><p class="a">11</p><p class="b">22</p></div>
JS代碼如下：
var test = document.getElementById("test");
var newNode = document.createElement("div");
// 替換第一個節點
var returnNode = test.replaceChild(newNode,test.firstChild);
console.log(returnNode); // <p class="a">11</p>
替換後html代碼結構變為如下：
<div id="test"><div></div><p class="b">22</p></div>
替換最後一個節點代碼如下：
var test = document.getElementById("test");
var newNode = document.createElement("div");
// 替換最後一個節點
var returnNode = test.replaceChild(newNode,test.lastChild);
console.log(returnNode); // <p class="b">22</p>
替換後的代碼如下：
<div id="test"><p class="a">11</p><div></div></div>removeChild()：移除節點，該方法接收一個參數，即要移除的節點；
被移除的節點將成為返回值，如下代碼：
var test = document.getElementById("test");
var newNode = document.createElement("div");
// 移除第一個節點
var returnNode = test.removeChild(test.firstChild);
console.log(returnNode); // <p class="a">11</p>
移除後的代碼結構變為如下：
<div id="test"><p class="b">22</p></div>
移除最後一個節點的代碼如下：
// 移除最後一個節點
var returnNode = test.removeChild(test.lastChild);
console.log(returnNode); // <p class="b">22</p>
移除後的代碼結構變為如下：
<div id="test"><p class="a">11</p></div>cloneNode():
克隆一個相同的副本，該方法接收一個布爾值參數，如果為true的話，說明是深復制，復制該節點及整個子節點書，如果為false的話，只復制該節點本身，比如如下代碼：
var test = document.getElementById("test");
var deeplist = test.cloneNode(true);
console.log(deeplist);
// <div id="test"><p class="a">11</p><p class="b">22</p></div>
如果是淺復制的如下代碼：
var test = document.getElementById("test");
var deeplist = test.cloneNode(false);
console.log(deeplist);// <div id="test"></div>
Document類型
JS通過Document類型表示文檔，document繼承HTMLDocument(繼承自Document)類型的一個實例，表示整個HTML頁面。document對象是window的一個屬性，所以可以通過全局對象來訪問，document對象有如下特點：
nodeType值為9，
nodeName值為”#document”,
nodeValue值為null，
parentNode值為null，
ownerDocument值為null
理解文檔document的子節點
documentElement: 該屬性始終指向html元素，如下代碼：
console.log(document.documentElement); // 指向html的引用
如果需要直接訪問html元素的引用可以直接使用該元素更快，更方便。
childNodes: 通過childNodes列表訪問文檔元素；如下測試代碼：
console.log(document.documentElement); // 指向html的引用 console.log(document.childNodes[0]); // <!doctype html> console.log(document.firstChild); // <!doctype html> console.log(document.firstChild === document.childNodes[0]); // true console.log(document.body); // 指向body的引用
所有的浏覽器都支持document.documentElement 和 document.body屬性;
title: 通過這個屬性可以取得網頁的標題，如下測試代碼：
console.log(document.title);
也可以該方法設置網頁的標題；如下代碼：
document.title = “我是龍恩”;
URL: 取得頁面中完整的url，如下代碼測試：
console.log(document.URL); // http://127.0.0.1/dom/dom.html
domain: 該屬性包含頁面的域名；如下測試代碼：
console.log(document.domain); // 127.0.0.1
域名也可以設置的，比如常見的跨子域的情況下，我們需要設置相同的父域即可完成跨域；
namedItem(): 該方法可以通過元素的name特性取得集合中的項，比如現在頁面上有很多input的框，我想通過他們的name屬性取得自己想要的哪一項，測試代碼如下：
HTML代碼如下：
<input name="aa"/>
<input name="bb"/>
JS代碼如下：
var inputs = document.getElementsByTagName("input");
console.log(inputs.namedItem("aa")); // <input name="aa"/>
我們還可以通過方括號的語法來訪問，如下代碼：
console.log(inputs["aa"]); // <input name="aa"/>
要想取得文檔中所有的元素，可以向getElementsByTagName()中傳入”*”; 星號表示全部的意思；
getElementsByName(); 該方法也是HTMLDocument類型才有的方法，這個方法會返回帶有給定name特性的所有元素，如下測試代碼：
<input name="aa" type="radio"/>
<input name="aa" type="radio"/>
var aa = document.getElementsByName("aa");
console.log(aa); // object
console.log(aa.length); // 2
該方法也會返回一個HTMLCollection.
浏覽器支持程度IE，firefox，chrome都支持；
Element類型
Element節點有以下特征：
nodeType的值為1；
nodeName的值為元素的標簽名；
nodeValue的值為null；
parentNode可能是Document或Element
要訪問元素的標簽名，可以使用nodeName屬性，也可以使用tagName屬性，這兩個屬性會返回相同的值，如下代碼：
<div id="test"></div>
var test = document.getElementById("test");
console.log(test.tagName); // DIV
console.log(test.nodeName); // DIV
console.log(test.nodeValue); // null;
console.log(test.parentNode); // body
console.log(test.nodeType); // 1
理解HTML元素中的獲取屬性的方法
所有HTML元素都由HTMLElement類型表示，HTMLElement類型直接繼承Element；如果想要取得HTML元素的特性的話，有下面幾個方法：
getAttribute(); 獲取元素的屬性的方法；如下測試代碼：
<div id="test" class="testName" title="aa"></div>
var test = document.getElementById("test");
console.log(test.getAttribute("id")); // test
console.log(test.getAttribute("class")); // testName
console.log(test.getAttribute("title")); // aa
注意：上面的獲取類名在IE8+及標准浏覽器下都是使用獲取屬性class來取得類名，上面的如果在IE7下會返回null, 但是在IE7及以下是使用className這個屬性來獲取的；如下代碼：在IE7下測試：
console.log(test.getAttribute("className")); // testName
當然也可以取得自定義的屬性；如下代碼：
<div id="test" data-value="test1"></div>
console.log(test.getAttribute("data-value")); // test1
setAttribute() 設置元素的屬性；該方法接收2個參數，第一個參數是屬性名稱，第二個參數是對應的值；如果該值存在，則會以現在的值替換之前的值，如果屬性名不存在，則會創建該屬性，並指定該屬性的值；如下代碼：
<div id="test"></div>
// JS代碼如下：
var test = document.getElementById("test");
test.setAttribute("id",'test');
test.setAttribute("class","testName");
test.setAttribute("title","aa");
test.setAttribute("data-value","test1");
生成HTML結構如下：
<div id="test" class="testName" title="aa" data-value="test1"></div>
removeAttribute(); 刪除元素的特性；如下代碼：
<div id="test" class="testName" title="aa" data-value="test1"></div>
JS代碼如下：
var test = document.getElementById("test");
test.removeAttribute("id");
test.removeAttribute("class");
test.removeAttribute("title");
test.removeAttribute("data-value");
IE7及以下刪除類名需要使用className;
attributes屬性
Element類型是使用attributes屬性的唯一一個dom節點類型，attributes屬性包含一個NamedNodeMap集合；該對象有以下方法：
getNamedItem(name): 返回nodeName屬性等於name的節點；
attributes屬性中包含一系列節點，每個節點的nodeName就是特性的名稱，而節點的nodeValue就是節點值，要取得元素id的特性，如下代碼：
<div id="test" class="testName" title="aa" data-value="test1"></div>JS代碼如下：
復制代碼 代碼如下:
var div = document.getElementById("test");
var id = div.attributes.getNamedItem("id").nodeValue;
console.log(id); // test
我們也可以通過中括號的語法來獲取的，如下代碼：
復制代碼 代碼如下:
var id = div.attributes['id'].nodeValue;
console.log(id); // test
同樣我們也可以通過上面介紹的getAttribute(“id”)方法來獲取元素，如下代碼：
console.log(div.getAttribute("id")); // test
也可以通過以下方法給元素設置id，如下方法：
div.attributes["id"].nodeValue = "aa";
removeNamedItem(name): 從列表中移除nodeName屬性等於name的節點;
調用removeNamedItem()方法與在元素上調用removeAttribute()方法的效果相同，是直接刪除具有給定名稱的特性。他們之間的區別是：removeNamedItem()方法返回表示被刪除特性的節點；
如下代碼：
<div id="test" class="testName" title="aa" data-value="test1"></div>
JS代碼如下：
復制代碼 代碼如下:
var div = document.getElementById("test");
var oldAttr = div.attributes.removeNamedItem("id");
console.log(oldAttr); // 返回是被刪除的節點 id="test"
現在的html結構變成如下：
<div class="testName" title="aa" data-value="test1"></div>
如上方法：目前IE，firefox，chrome浏覽器都支持；
但是上面我們有getAttribute,setAttribute(),removeAttribute()方法，我們可以使用這些方法足夠代替上面介紹的幾個方法，但是如果想遍歷一個元素上有多少個屬性時，attributes這個就可以派上用上了，如下代碼：
HTML代碼如下：
<div id="test" class="testName" title="aa" data-value="test1"></div>
JS代碼如下：
var div = document.getElementById("test");
function outputAttributes(element) {
var arrs = new Array();
var attrName,
attrValue,
i,
len;
for(i = 0, len = element.attributes.length; i < len; i++) {
attrName = element.attributes[i].nodeName;
attrValue = element.attributes[i].nodeValue;
arrs.push(attrName + "='" + attrValue + "'");
}
return arrs.join(" ");
}
console.log(outputAttributes(div));
結果打印如下：
id='test' class='testName' title='aa' data-value='test1'
上面的函數使用一個數組來保存名值對，最後再以空格為分隔符將它們拼接起來，但是上面的代碼我們需要注意兩點：
1.針對attributes對象中的特性，不同的浏覽器返回的順序不同。
2.IE7及更早的版本會返回HTML元素中所有可能的特性，包括沒有指定的特性；
針對IE7的問題我們可以進行改進，我們都知道，每個特性節點都有一個名為specified的屬性，這個屬性值如果為true，則意味著要麼在HTML中指定了相應的特性，要麼通過setAttribute方法設置了該特性，在IE中，所有為設置過的特性該屬性的之都為false；如下代碼：
var div = document.getElementById("test");
function outputAttributes(element) {
var arrs = new Array();
var attrName,
attrValue,
i,
len;
for(i = 0, len = element.attributes.length; i < len; i++) {
attrName = element.attributes[i].nodeName;
attrValue = element.attributes[i].nodeValue;
if(element.attributes[i].specified) {
arrs.push(attrName + "='" + attrValue + "'");
}
}
return arrs.join(" ");
}
console.log(outputAttributes(div));
理解元素的子節點
元素可以有任意數目的子節點和後代節點，元素的childNodes屬性中它包含了它的所有子節點，這些子節點可能是元素，文本節點，注釋或處理指令；不同的浏覽器子節點的個數不一樣，下面我們來看看demo如下：
<ul id="list"> <li>11</li> <li>22</li> <li>33</li> </ul>
JS代碼如下：
復制代碼 代碼如下:
var list = document.getElementById("list");
console.log(list.childNodes);
console.log(list.childNodes.length);
我們之前在上面講過，在標准浏覽器下(IE9+,firefox,chrome)下，打印的長度是7個，因為他們把空格也包含上去，在IE8-及以下的浏覽器返回的是3個子元素，這是表現的正常情況下，但是如果我現在把html元素的空格都去掉的話，那麼所有的浏覽器都會返回3個子元素，如下代碼：
<ul id="list"><li>11</li><li>22</li><li>33</li></ul>
JS代碼如下：
復制代碼 代碼如下:
var list = document.getElementById("list");
console.log(list.childNodes);
console.log(list.childNodes.length);
那麼平時我們不可能都這樣小心小意的編寫html代碼的，因為一步小心就有一個空格產生，因此我們可以如下判斷下是不是元素節點；如下代碼演示：
<ul id="list"> <li>11</li> <li>22</li> <li>33</li> </ul>
JS代碼如下：
var list = document.getElementById("list");
var arrs = [];
for(var i = 0, ilen = list.childNodes.length; i < ilen; i++) {
var curElement = list.childNodes[i];
if(curElement.nodeType === 1){
arrs.push(curElement);
}
}
console.log(arrs);
console.log(arrs.length); // 3
如上代碼在所有的浏覽器都支持，通過判斷該元素是不是元素節點，然後在執行後續操作；不是元素節點都會過濾掉，因此返回的長度都為3；
理解Text類型
Text節點具有以下特征：
nodeType的值為3；
nodeName的值為”#text”;
nodeValue的值為節點所包含的文本；
parentNode是一個Element；
沒有子節點；
1.創建文本節點；
可以使用document.createTextNode()創建新文本節點，這個方法需要一個參數，即要插入的文本，如下代碼：
var element = document.createElement("div");
var text = document.createTextNode("aa");
element.appendChild(text);
document.body.appendChild(element);
2. 分割文本節點splitText(offset); 從offset指定的位置將當前的文本節點分成2個文本節點；如下代碼：
var element = document.createElement("div");
var text = document.createTextNode("aabbbccc");
element.appendChild(text);
document.body.appendChild(element);
var newNode = element.firstChild.splitText(5);
console.log(element.firstChild.nodeValue); // aabbb
console.log(newNode.nodeValue); // ccc
console.log(element.childNodes.length); // 2
浏覽器支持的程度有IE，firefox,chrome都支持；
理解DOM操作—動態插入腳本
我們動態插入JS腳本，常見的寫法有如下代碼即可插入：
var script = document.createElement("script");
script.type ="text/javascript";
script.src = 'a.js';
document.body.appendChild(script);
即可在body最後面動態插如a.js，此動態插入不會堵塞浏覽器加載；我們為了更加擴張性，我們也可以封裝一個函數，如下代碼：
function loadScript(url) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
document.body.appendChild(script);
}
loadScript("a.js");
當頁面有多個js需要動態插入的話，可以依次調用loadScript函數即可；
但是假如我們現在有這麼一個需求，動態加載JS完後，我想在這後面做點事情，我們都知道，動態加載也可以理解為異步加載，不會堵塞浏覽器，但是我們需要如何知道動態JS已經加載完了呢？
我們之前講過一篇文章是 “Javascript事件總結”中有判斷JS動態加載完後使用load事件來監聽js是否動態加載完，現在我們再來復習下load事件；
Javascript中最常用的一個事件是load，當頁面加載完後(包括所有的圖片，javascript文件，css文件等外部資源)。就會觸發window上面的load事件；目前可以有2種觸發load事件，一種是直接放在body上面觸發；比如如下代碼：
<body onload=”a()”></body>
第二種是通過JS來觸發，如下代碼：
復制代碼 代碼如下:
EventUtil.addHandler(window,'load',function(event){
alert(1);
});
上面的EventUtil.addHandler 是我們之前在javascript事件總結中封裝的JS函數，現在我們直接拿過來使用，如下代碼：
var EventUtil = {
addHandler: function(element,type,handler) {
if(element.addEventListener) {
element.addEventListener(type,handler,false);
}else if(element.attachEvent) {
element.attachEvent("on"+type,handler);
}else {
element["on" +type] = handler;
}
},
removeHandler: function(element,type,handler){
if(element.removeEventListener) {
element.removeEventListener(type,handler,false);
}else if(element.detachEvent) {
element.detachEvent("on"+type,handler);
}else {
element["on" +type] = null;
}
},
getEvent: function(event) {
return event ? event : window.event;
},
getTarget: function(event) {
return event.target || event.srcElement;
},
preventDefault: function(event){
if(event.preventDefault) {
event.preventDefault();
}else {
event.returnValue = false;
}
},
stopPropagation: function(event) {
if(event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}
};
下面我們來看看如何使用JS事件來判斷JS是否加載完成的代碼，我們可以使用load事件來監聽，如下代碼：
EventUtil.addHandler(window,'load',function(){
var script = document.createElement("script");
EventUtil.addHandler(script,'load',function(event){
console.log(script.src);
});
script.src = 'a.js';
document.body.appendChild(script);
});
如上代碼，script元素也會觸發load事件，以便可以確定動態加載jS是否加載完成，上面的代碼指定src屬性和指定的事件處理程序的事件可以調換位置，先後順序不重要，如上代碼，我們也可以這樣寫，如下代碼：
EventUtil.addHandler(window,'load',function(){
var script = document.createElement("script");
script.src = 'a.js';
document.body.appendChild(script);
EventUtil.addHandler(script,'load',function(event){
console.log(script.src);
});
});
目前只有IE9+，Firefox，opera，chrome和safari3+支持，IE8及以下不支持該load事件，因此我們需要針對IE8及以下做處理；
理解readystatechange事件
IE為DOM文檔中的某些部分提供了readystatechange事件，這個事件的目的提供與文檔或元素的加載的狀態有關信息，此事件提供了下面5個值中的一個；
uninitialized（未初始化）：對象存在但尚未初始化；
loading(正在加載)：對象正在加載數據；
loaded(加載完畢): 對象加載數據完成；
interactive(交互)： 可以操作對象了，但沒有完全加載；
complete(完成)：對象已經加載完成；
<script>（在IE和opera）中和<link>(僅IE中)元素也會觸發readystatechange事件，可以用來確定外部的javascript和css文件是否已經加載完成，基於元素觸發的readystatechange事件，即readyState屬性無論等於”loaded”還是”complete”都可以表示資源已經可用；如下針對IE的判斷javascript是否已經加載完成的方案：
EventUtil.addHandler(window,'load',function(){
var script = document.createElement("script");
EventUtil.addHandler(script,'readystatechange',function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.readyState == "loaded" || target.readyState == "complete"){
EventUtil.removeHandler(target, "readystatechange", arguments. callee);
alert(script.src);
}
});
script.src = 'a.js';
document.body.appendChild(script);
});
下面我們可以使用javascript客戶端檢測技術來判斷是否是IE和其他標准浏覽器做一個簡單的封裝；如下代碼：
var ua = navigator.userAgent.toLowerCase();
EventUtil.addHandler(window,'load',function(){
var script = document.createElement("script");
if(/msie ([^;]+)/.test(ua) || "ActiveXObject" in window) {
// IE 浏覽器
EventUtil.addHandler(script,'readystatechange',function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.readyState == "loaded" || target.readyState == "complete"){
EventUtil.removeHandler(target, "readystatechange", arguments. callee);
console.log("javascript已經加載完成");
}
});
}else {
// 除IE之外的標准浏覽器
EventUtil.addHandler(script,'load',function(event){
console.log("javascript已經加載完成");
});
}
script.src = 'a.js';
document.body.appendChild(script);
});
上面的是針對所有的主要的浏覽器進行封裝來判斷動態加載的JS是否已經加載完成！
理解動態加載行內JS方式
另一種加載javascript代碼的方式是行內方式，如下代碼：
復制代碼 代碼如下:
<script src=”text/javascript”>
function sayHi(){alert(1);}
</script>
從理論來講，下面的代碼應該是有效的；
復制代碼 代碼如下:
var script = document.createElement('script');
script.type = 'text/javascript';
script.appendChild(document.createTextNode("function sayHi(){alert(1);} sayHi()"));
document.body.appendChild(script);
如上代碼在firefox，IE9+，chrome和opera中，都是正常的，可以運行的，但是在IE8及以下會報錯，如下：
IE8及以下將script視為一個特殊的元素，不允許dom訪問其子節點；但是我們可以使用script元素的text屬性來指定javascript代碼，如下代碼：
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = "function sayHi(){alert(1);} sayHi()";
document.body.appendChild(script);
現在在所有的主流的浏覽器都是正常的，在IE8及以下也是正常的；但是在safari3.0之前的版本不能正確的支持text屬性，但可以允許使用文本節點來指定代碼；如下代碼：
var script = document.createElement('script');
script.type = 'text/javascript';
var code = "function sayHi(){alert(1);} sayHi()";
try{
script.appendChild(document.createTextNode(code));
}catch(e){
script.text = code;
}
document.body.appendChild(script);
下面我們可以使用一個函數來封裝下；如下代碼：
function loadScriptString(code) {
var script = document.createElement('script');
script.type = 'text/javascript';
try{
script.appendChild(document.createTextNode(code));
}catch(e){
script.text = code;
}
document.body.appendChild(script);
}
loadScriptString("function sayHi(){alert(1);} sayHi()");
理解動態加載css樣式
與動態腳本類似，所謂動態樣式是指在頁面剛載入時不存在的樣式，動態樣式是在頁面加載完成後動態添加到頁面中的；
動態加載樣式如下代碼：
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
如上代碼即可動態生成css樣式；
我們也可以像JS一樣先封裝一個函數，為了調用更加方便；如下代碼：
function loadStyles(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
loadStyles("style.css");
我們也可以使用事件的方式來判斷css動態加載是否已經加載完成~
EventUtil.addHandler(window,'load',function(){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
EventUtil.addHandler(link, "load", function(event){
console.log("css loaded");
});
link.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(link);
});
注意：如上代碼：不僅在標准浏覽器下chrome，firefox，opera下支持，而且IE7-10都支持這種加載；但是safari不支持這種加載；
或者和javascript一樣，我們也可以針對IE下做一種這樣的處理；代碼如下，也可以支持所有的IE下：
EventUtil.addHandler(window, "load", function(){
var link = document.createElement("link");
link.type = "text/css";
link.rel= "stylesheet";
EventUtil.addHandler(link, "readystatechange", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.readyState == "loaded" || target.readyState == "complete"){
EventUtil.removeHandler(target, "readystatechange", arguments. callee);
alert("CSS Loaded");
}
});
link.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(link);
});
我們也可以像Javascript一樣，為了判斷所有的浏覽器下支持可以封裝一個所有都支持的代碼；當然除safari浏覽器除外，好像safari浏覽器沒有生效；
如下代碼：
var ua = navigator.userAgent.toLowerCase();
EventUtil.addHandler(window,'load',function(){
var link = document.createElement("link");
link.type = "text/css";
link.rel= "stylesheet";
if(/msie ([^;]+)/.test(ua) || "ActiveXObject" in window) {
// IE 浏覽器
EventUtil.addHandler(link,'readystatechange',function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.readyState == "loaded" || target.readyState == "complete"){
EventUtil.removeHandler(target, "readystatechange", arguments. callee);
alert("css已經加載完成");
}
});
}else {
// 除IE之外的標准浏覽器
EventUtil.addHandler(link,'load',function(event){
alert("css已經加載完成");
});
}
link.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(link);
});
另一種定義樣式的方式是使用<style>元素來包含嵌入式的css
如下所示代碼：
<style>
body {background-color:red;}
</style>
按照相同的原理，下面的代碼除了IE8及以下不支持，其他浏覽器下都支持；如下代碼：
var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
因此我們也可以像JS一樣封裝一個全兼容的css樣式；如下代碼所示：
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode("body{background-color:red}"));
} catch (ex){
style.styleSheet.cssText = "body{background-color:red}";
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
為了更方便調用，因此我們也可以封裝一個函數來；如下代碼：
function loadStyleString(css) {
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(css));
} catch (ex){
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
}
// 調用方式如下：
loadStyleString("body{background-color:red}");
DOM的擴展
1. querySelector()方法
querySelector()方法接收一個css選擇符，返回與該模式匹配的第一個元素，如果沒有找到匹配元素，則返回null；如下代碼：
復制代碼 代碼如下:
<div id="test">test</div>
<div class="cls">1111</div>
<div class="cls">2222</div>
<div class="cls">2222</div>
JS代碼如下：
// 取得body
var body = document.querySelector('body');
console.log(body); // body的引用
// 取得id為test的元素
var test = document.querySelector("#test");
console.log(test); // <div id="test">test</div>
// 取得類為cls的第一個元素
var cls = document.querySelector(".cls");
console.log(cls); // <div class="cls">1111</div>
同理我們也可以通過Element類型調用querySelector()方法時，只會在該元素後代范圍內查找匹配的元素，如下代碼：
復制代碼 代碼如下:
<div class="testParent">
<p>1111</p>
<p>2222</p>
</div>
我想通過先取得div中的testParent，然後再取得p元素(通過querySelector方法)；如下代碼：
var testParent = document.querySelector('.testParent');
var pfirst = testParent.querySelector("p");
console.log(pfirst); // <p>1111</p>
浏覽器支持程度：IE8+，firefox，chrome，safari3.1+，opera10+
2. querySelectorAll()方法
querySelectorAll()方法接收的參數與querySelector()方法一樣，都是一個css選擇符，但是返回的是所有匹配的元素，這個方法返回的是一個NodeList的實例。
如下代碼演示：
<div id="test"> <em class="selected">11111</em> <em class="selected">22222</em> <em>33333</em> <em>44444</em> </div>
JS代碼如下：
// 取得div中所有em元素
var em = document.getElementById("test").querySelectorAll('em');
console.log(em); // NodeList
console.log(em.length); // 4
// 第二種方式 也可以先使用querySelector
var test = document.querySelector("#test");
var em2 = test.querySelectorAll('em');
console.log(em2); // NodeList
console.log(em2.length); // 4
// 取得類為selected的所有元素
var selected = document.querySelectorAll('.selected');
console.log(selected); // <em class="selected">11111</em>
// <em class="selected">22222</em>
// 也可以通過以下的方式獲得所有的em元素
var em = document.querySelectorAll('div em');
console.log(em); // NodeList
console.log(em.length); // 4
要取得返回的NodeList中的每一個元素，可以使用item()方法，也可以使用方括號的語法；
var ems = document.querySelectorAll('#test em');
for(var i = 0, ilen = ems.length; i < ilen; i++) {
console.log(ems[i]); // 取得每一項em
console.log(ems.item(i)); // 取得每一項em
}
浏覽器支持程度：IE8+，firefox，chrome，safari3.1+，opera10+
3. matchesSelector()方法
這個方法接收一個參數，即css選擇符，如果調用元素與該選擇符匹配，返回true，否則，返回false；
如下代碼：
console.log(document.body.webkitMatchesSelector("body")); // true
IE9+通過msMatchesSelector()支持該方法，Firefox3.6+通過mozMatchesSelector()支持該方法；safari5+和chrome通過webkitMatchesSelector()支持該方法；因此我們可以包裝一個函數，如下代碼：
function matchesSelector(element,selector) {
if(element.MatchesSelector) {
return element.MatchesSelector(selector);
}else if(element.msMatchesSelector) {
return element.msMatchesSelector(selector);
}else if(element.webkitMatchesSelector) {
return element.webkitMatchesSelector(selector);
}else if(element.mozMatchesSelector) {
return element.mozMatchesSelector(selector);
}else {
throw new Error("Not supported");
}
}
console.log(matchesSelector(document.body,'body')); // true
var test = document.querySelector('#test');
console.log(matchesSelector(test,'#test')); // true
4. getElementsByClassName() 方法
該方法接收一個參數，即包含一個或者多個類名的字符串，返回帶有指定類的所有元素的NodeList；傳入多個類名時，類名的先後順序不重要。
復制代碼 代碼如下:
<p class="p1">111</p>
<p class="p1">222</p>
<p class="p1">333</p>
console.log(document.getElementsByClassName("p1")); // 返回NodeList
支持getElementsByClassName()方法的浏覽器有IE9+，firefox3+，safari3.1+,chrome和opera9.5+；
5. classList屬性
如下代碼：
<div class="aa bb cc" id="div">aaa</div>
我想刪除aa這個類名的時候，以前需要如下寫代碼：
var div = document.getElementById("div");
// 首先，取得類名字符串並拆分成數組
var classNames = div.className.split(/\s+/);
var pos = -1,
i,
len;
for(i = 0,len = classNames.length; i < len; i+=1) {
if(classNames[i] == 'aa') {
pos = i;
break;
}
}
// 刪除類名
classNames.splice(i,1);
// 把剩下的類名拼成字符串並重新設置
div.className = classNames.join(" ");
// <div class="bb cc" id="div">aaa</div>
但是現在HTML5新增了一種操作類名的方式，可以讓操作更簡單也更方便，那就是所有元素添加classList屬性。這個classList屬性是新集合類型DOMTokenList的實例；DOMTokenList有一個表示自己包含多少元素的length屬性，而要取得每個元素可以使用item()方法，也可以使用中括號；
還有以下方法：
add(value)：將給定的字符串值添加到列表中。如果值已經存在，就不添加了。
contains(value)：表示列表中是否存在給定的值，如果存在則返回true，否則返回false。
remove(value)：從列表中刪除給定的字符串。
toggle(value)：如果列表中已經存在給定的值，刪除它；如果列表中沒有給定的值，添加它。
現在我們可以來看看使用上面的方法的優點如下，我們可以來做個demo，代碼如下：
<div class="aa bb cc" id="div">aaa</div>
JS如下：
var div = document.getElementById("div");
// 刪除類名aa，如下方法即可
div.classList.remove("aa");
// html結構如下： <div class="bb cc" id="div">aaa</div>
// 添加類名current，如下方法即可
div.classList.add("current");
// html結構變為如下 <div class="bb cc current" id="div">aaa</div>
// 切換aa類名
div.classList.toggle("aa");
// html結構變為如下 <div class="aa bb cc current" id="div">aaa</div>
// 確定元素是否包含類名；
console.log(div.classList.contains("aa")); // true
支持classList屬性的浏覽器有IE10+，firefox3.6+和chrome
HTML5新增自定義數據屬性
HTML5中規定可以為元素添加非標准的屬性，但要添加前綴data-,比如如下代碼：
<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
添加了自定義屬性之後，可以通過元素的dataset屬性來訪問自定義屬性的值，dataset屬性的值是DOMStringMap的一個實例，也就是一個名值對的映射；比如如下代碼：
//本例中使用的方法僅用於演示
var div = document.getElementById("myDiv");
console.log(div.dataset); // DOMStringMap {value: "12345", name: "Nicholas"}
//取得自定義屬性的值
var value1 = div.dataset.value;
console.log(value1); // 12345
var name1 = div.dataset.name;
console.log(name1); // Nicholas
//設置值
div.dataset.value = 23456;
div.dataset.name = "Michael";
//有沒有"myname"值呢？
if (div.dataset.name){
console.log("Hello, " + div.dataset.name); // Hello, Michael
}
浏覽器支持的程度有；firefox6+和chrome浏覽器；