你所不了解的javascript操作DOM的細節知識點(一)

2019-11-20 12:13:35

字體：大中小

來源：轉載

供稿：網友

一：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]); // trueconsole.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); // documentvar p = test.ownerDocument.getElementsByTagName("p");console.log(p); // <p class="a">11</p>

appendChild(): 用于向childNodes列表的末尾添加一個節點；返回的是新增加的節點；如下代碼：

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); // trueconsole.log(test.lastChild === newNode); // true

insertBefore(): 該方法是將新節點插入到指定的節點的前面去，該方法接收2個參數，要插入的節點和作為參照的節點；插入節點后，被插入的節點會變成參照節點的前一個同胞節點，同時被方法返回，如下代碼：

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); // trueconsole.log(newNode === test.firstChild); // true// 插入到最后一個子節點的前面var returnNode = test.insertBefore(newNode,test.lastChild);console.log(returnNode === test.childNodes[test.childNodes.length - 2]); // true

replaceChild(); 該方法接收2個參數，要插入的節點和要替換的節點，要替換的節點將由這個方法返回并從文檔樹中被移除，同時由插入的節點占據其位置，如下代碼：

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代碼結構變為如下：

替換最后一個節點代碼如下：

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>

移除后的代碼結構變為如下：

移除最后一個節點的代碼如下：

// 移除最后一個節點
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]); // trueconsole.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代碼如下：

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); // objectconsole.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); // DIVconsole.log(test.nodeName); // DIVconsole.log(test.nodeValue); // null;console.log(test.parentNode); // bodyconsole.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")); // testconsole.log(test.getAttribute("class")); // testNameconsole.log(test.getAttribute("title")); // aa

注意：上面的獲取類名在IE8+及標準瀏覽器下都是使用獲取屬性class來取得類名，上面的如果在IE7下會返回null, 但是在IE7及以下是使用className這個屬性來獲取的；如下代碼：在IE7下測試：

console.log(test.getAttribute("className")); // testName

當然也可以取得自定義的屬性；如下代碼：

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結構如下：

removeAttribute(); 刪除元素的特性；如下代碼：

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()方法返回表示被刪除特性的節點；

如下代碼：

JS代碼如下：

復制代碼代碼如下:

var div = document.getElementById("test");
var oldAttr = div.attributes.removeNamedItem("id");
console.log(oldAttr); // 返回是被刪除的節點  id="test"

現在的html結構變成如下：

如上方法：目前IE，firefox，chrome瀏覽器都支持；

但是上面我們有getAttribute,setAttribute(),removeAttribute()方法，我們可以使用這些方法足夠代替上面介紹的幾個方法，但是如果想遍歷一個元素上有多少個屬性時，attributes這個就可以派上用上了，如下代碼：

HTML代碼如下：

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個子元素，如下代碼：

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); // aabbbconsole.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上面觸發；比如如下代碼：

第二種是通過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(完成)：對象已經加載完成；

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代碼如下：

// 取得bodyvar 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); // NodeListconsole.log(em.length); // 4// 第二種方式 也可以先使用querySelectorvar test = document.querySelector("#test");var em2 = test.querySelectorAll('em');console.log(em2); // NodeListconsole.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); // NodeListconsole.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')); // truevar 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屬性

如下代碼：

我想刪除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，代碼如下：

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-,比如如下代碼：

添加了自定義屬性之后，可以通過元素的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); // 12345var 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}