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

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 你所不了解的javascript操作DOM的細節知識點(一)

編輯：JavaScript綜合知識

　　這篇文章主要介紹了你所不了解的javascript操作DOM的細節知識點的相關資料,需要的朋友可以參考下

　　一：Node類型

　　DOM1級定義了一個Node接口，該接口是由DOM中的所有節點類型實現。每個節點都有一個nodeType屬性，用於表明節點的類型，節點類型在Node類型中有以下幾種：

　　Node.ELEMENT_NODE(1); 元素節點

　　Node.ATTRIBUTE_NODE(2); 屬性節點

　　Node.TEXT_NODE(3); 文本節點

　　Node.DOCUMENT_NODE(9); 文檔節點

　　其實還有很多種，但是那些都不是很常用，所以就來理解這其中4種就可以了，我們先來看看節點類型，比如如下代碼：

　　HTML代碼如下：

1 2 3 4 5 <div id="test"> <p>aaaaaa</p> <p>bbbbbb</p> <p>cccccc</p> </div>

　　JS如下：

1 2 3 4 var test = document.getElementById("test"); if(test.nodeType === Node.ELEMENT_NODE) { alert(1) }

　　如上代碼在IE8及以下下是不行的，會報錯，如下：

　　因為IE沒有公開Node類型的構造函數，因此在IE8-下會有錯誤，但是我們可以通過數值來比較，比如上面的要比較元素節點的話，我們可以使用1來比較，同理屬性節點是2，文本節點是3;如下代碼：

1 2 3 4 5 var test = document.getElementById("test"); // 下面的所有的浏覽器都支持 if(test.nodeType == 1) { alert(1) }

　　理解nodeName與nodeValue

　　nodeName保存的是元素的標簽名，而nodeValue一般都是null;我們可以看如下代碼，沒有特殊的說明，HTML代碼都是上面的，因此這邊就不貼代碼了;如下JS代碼測試：

1 2 3 4 5 var test = document.getElementById("test"); if(test.nodeType == 1) { console.log(test.nodeName); // 打印DIV console.log(test.nodeValue); // 打印null }

　　理解節點關系

1 2 3 4 5 6 7 8 9 <!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的實例，比如我們可以看看如下測試代碼即可：

1 2 3 4 5 <div id="test"> <p>aaaaaa</p> <p>bbbbbb</p> <p>cccccc</p> </div>

　　JS代碼如下：

1 2 3 4 5 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代碼即可;

aaaaaa

bbbbbb

cccccc

　　這個問題稍後在仔細考慮，我們現在來看看如何取得子元素，我們可以使用2種方法，第一種是使用中括號[index]索引，第二種是使用item[index]索引，如下代碼：

　　console.log(test.childNodes[1]); //

bbbbbb

　　console.log(test.childNodes.item(1)); //

bbbbbb

　　但是他們並不是數組，我們可以測試下代碼即可，如下代碼：

　　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的形式，我們可以像下面一樣封裝一個方法即可;

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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是指當前節點的下一個同胞節點，比如如下代碼：

1 2 3 4 5 6 7 8 <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指向了父節點中第一個節點;如下代碼：

aaaaaa

bbbbbb

cccccc

　　JS如下：

1 2 3 4 5 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]; 如下代碼：

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

aaaaaa

bbbbbb

cccccc

　　JS代碼如下：

　　var test = document.getElementById("test");

　　console.log(test.hasChildNodes());

　　// true如果是如下的就返回false;如下代碼：

　　var test = document.getElementById("test");

　　console.log(test.hasChildNodes()); // false

　　ownerDocument: 所有節點都有最後一個屬性是ownerDocument，該屬性指向表示整個文檔的文檔節點，這種關系表示的任何節點都屬於它所在的文檔，任何節點都不能同時存在兩個或更多文檔中，通過這個屬性，我們可以不必在節點層次中通過層層回溯到達頂端，而是可以直接訪問文檔節點;如下測試代碼：

1 2 3 4 5 6 7 <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列表的末尾添加一個節點;返回的是新增加的節點;如下代碼：

　　JS代碼如下：

1 2 3 4 5 6 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個參數，要插入的節點和作為參照的節點;插入節點後，被插入的節點會變成參照節點的前一個同胞節點，同時被方法返回，如下代碼：

　　JS代碼如下：

1 2 3 4 5 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

　　插入節點後，結構變成如下：

　　復制代碼代碼如下:

　　但是如果參照節點為null的話，那麼就會把新節點插入到最後面去了，如下代碼：

　　復制代碼代碼如下:

　　var test = document.getElementById("test");

　　var newNode = document.createElement("div");

　　var returnNode = test.insertBefore(newNode,null);

　　插入後HTML結構如下：

　　復制代碼代碼如下:

　　我們還可以更深入的看下如下測試代碼：

1 2 3 4 5 6 7 8 9 10 11 12 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個參數，要插入的節點和要替換的節點，要替換的節點將由這個方法返回並從文檔樹中被移除，同時由插入的節點占據其位置，如下代碼：

　　JS代碼如下：

1 2 3 4 5 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代碼結構變為如下：

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

1 2 3 4 5 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>

　　替換後的代碼如下：

removeChild()：移除節點，該方法接收一個參數，即要移除的節點;

　　被移除的節點將成為返回值，如下代碼：

1 2 3 4 5 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); //

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

cloneNode():

　　克隆一個相同的副本，該方法接收一個布爾值參數，如果為true的話，說明是深復制，復制該節點及整個子節點書，如果為false的話，只復制該節點本身，比如如下代碼：

1 2 3 4 5 6 7 8 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列表訪問文檔元素;如下測試代碼：

1 2 3 4 5 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代碼如下：

　　JS代碼如下：

　　var inputs = document.getElementsByTagName("input");

　　console.log(inputs.namedItem("aa")); //

　　我們還可以通過方括號的語法來訪問，如下代碼：

　　console.log(inputs["aa"]); //

　　要想取得文檔中所有的元素，可以向getElementsByTagName()中傳入”*”; 星號表示全部的意思;

　　getElementsByName(); 該方法也是HTMLDocument類型才有的方法，這個方法會返回帶有給定name特性的所有元素，如下測試代碼：

1 2 3 4 5 <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屬性，這兩個屬性會返回相同的值，如下代碼：

1 2 3 4 5 6 7 <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(); 獲取元素的屬性的方法;如下測試代碼：

1 2 3 4 5 <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

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

　　console.log(test.getAttribute("data-value")); // test1

　　setAttribute() 設置元素的屬性;該方法接收2個參數，第一個參數是屬性名稱，第二個參數是對應的值;如果該值存在，則會以現在的值替換之前的值，如果屬性名不存在，則會創建該屬性，並指定該屬性的值;如下代碼：

1 2 3 4 5 6 7 <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代碼如下：

1 2 3 4 5 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的特性，如下代碼：

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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;如下代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 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如下：

1 2 3 4 5 <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代碼的，因為一步小心就有一個空格產生，因此我們可以如下判斷下是不是元素節點;如下代碼演示：

1 2 3 4 5 <ul id="list"> <li>11</li> <li>22</li> <li>33</li> </ul>

　　JS代碼如下：

1 2 3 4 5 6 7 8 9 10 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()創建新文本節點，這個方法需要一個參數，即要插入的文本，如下代碼：

1 2 3 4 var element = document.createElement("div"); var text = document.createTextNode("aa"); element.appendChild(text); document.body.appendChild(element);

　　2. 分割文本節點splitText(offset); 從offset指定的位置將當前的文本節點分成2個文本節點;如下代碼：

1 2 3 4 5 6 7 8 9 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腳本，常見的寫法有如下代碼即可插入：

1 2 3 4 var script = document.createElement("script"); script.type ="text/javascript"; script.src = 'a.js'; document.body.appendChild(script);

　　即可在body最後面動態插如a.js，此動態插入不會堵塞浏覽器加載;我們為了更加擴張性，我們也可以封裝一個函數，如下代碼：

1 2 3 4 5 6 7 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函數，現在我們直接拿過來使用，如下代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 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事件來監聽，如下代碼：

1 2 3 4 5 6 7 8 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屬性和指定的事件處理程序的事件可以調換位置，先後順序不重要，如上代碼，我們也可以這樣寫，如下代碼：

1 2 3 4 5 6 7 8 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(完成)：對象已經加載完成;

　　從理論來講，下面的代碼應該是有效的;

　　復制代碼代碼如下:

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

1 2 3 4 var script = document.createElement('script'); script.type = 'text/javascript'; script.text = "function sayHi(){alert(1);} sayHi()"; document.body.appendChild(script);

　　現在在所有的主流的浏覽器都是正常的，在IE8及以下也是正常的;但是在safari3.0之前的版本不能正確的支持text屬性，但可以允許使用文本節點來指定代碼;如下代碼：

1 2 3 4 5 6 7 8 9 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);

　　下面我們可以使用一個函數來封裝下;如下代碼：

1 2 3 4 5 6 7 8 9 10 11 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樣式

　　與動態腳本類似，所謂動態樣式是指在頁面剛載入時不存在的樣式，動態樣式是在頁面加載完成後動態添加到頁面中的;

　　動態加載樣式如下代碼：

1 2 3 4 5 6 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一樣先封裝一個函數，為了調用更加方便;如下代碼：

1 2 3 4 5 6 7 8 9 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動態加載是否已經加載完成~

1 2 3 4 5 6 7 8 9 10 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下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 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浏覽器沒有生效;

　　如下代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 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); });

　　另一種定義樣式的方式是使用

　　按照相同的原理，下面的代碼除了IE8及以下不支持，其他浏覽器下都支持;如下代碼：

1 2 3 4 5 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樣式;如下代碼所示：

1 2 3 4 5 6 7 8 9 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);

　　為了更方便調用，因此我們也可以封裝一個函數來;如下代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 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;如下代碼：

　　復制代碼代碼如下:

test

1111

2222

　　JS代碼如下：

1 2 3 4 5 6 7 8 9 // 取得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()方法時，只會在該元素後代范圍內查找匹配的元素，如下代碼：

　　復制代碼代碼如下:

1111

2222

　　我想通過先取得div中的testParent，然後再取得p元素(通過querySelector方法);如下代碼：

1 2 3 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的實例。

　　如下代碼演示：

1 2 3 4 5 6 <div id="test"> <em class="selected">11111</em> <em class="selected">22222</em> <em>33333</em> <em>44444</em> </div>

　　JS代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 // 取得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()方法，也可以使用方括號的語法;

1 2 3 4 5 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()支持該方法;因此我們可以包裝一個函數，如下代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 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;傳入多個類名時，類名的先後順序不重要。

　　復制代碼代碼如下:

111

222

333

　　console.log(document.getElementsByClassName("p1")); // 返回NodeList

　　支持getElementsByClassName()方法的浏覽器有IE9+，firefox3+，safari3.1+,chrome和opera9.5+;

　　5. classList屬性

　　如下代碼：

aaa

　　我想刪除aa這個類名的時候，以前需要如下寫代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 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，代碼如下：

aaa

　　JS如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 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的一個實例，也就是一個名值對的映射;比如如下代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 //本例中使用的方法僅用於演示 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浏覽器;

上一頁:jQuery實現復選框批量選擇與反選的方法
下一頁:理解Javascript的動態語言特性

JavaScript綜合知識

批量實現面向對象的實例代碼: 本文為大家詳細介紹下面向對象的繼承以及如何實現批量實現面向對象，感興趣的可以參考下哈，希望對大家有所
Javascript常用小技巧匯總: 　　本文實例講述了Javascript常用小技巧。分享給大家供大家參考。具體分析如下：　
JS判斷字符串長度的5個方法: 這篇文章主要介紹了JS判斷字符串長度的5個方法,並且區分中文和英文,需要的朋友可以參考下

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章