你所不了解的javascript操作DOM的細(xì)節(jié)知識(shí)點(diǎn)(一)

更新時(shí)間：2015年06月17日 16:03:21 作者：涂根華

這篇文章主要介紹了你所不了解的javascript操作DOM的細(xì)節(jié)知識(shí)點(diǎn)的相關(guān)資料,需要的朋友可以參考下

一：Node類型

DOM1級(jí)定義了一個(gè)Node接口，該接口是由DOM中的所有節(jié)點(diǎn)類型實(shí)現(xiàn)。每個(gè)節(jié)點(diǎn)都有一個(gè)nodeType屬性，用于表明節(jié)點(diǎn)的類型，節(jié)點(diǎn)類型在Node類型中有以下幾種：

Node.ELEMENT_NODE(1); 元素節(jié)點(diǎn)
Node.ATTRIBUTE_NODE(2); 屬性節(jié)點(diǎn)
Node.TEXT_NODE(3); 文本節(jié)點(diǎn)
Node.DOCUMENT_NODE(9); 文檔節(jié)點(diǎn)

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

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及以下下是不行的，會(huì)報(bào)錯(cuò)，如下：

因?yàn)镮E沒有公開Node類型的構(gòu)造函數(shù)，因此在IE8-下會(huì)有錯(cuò)誤，但是我們可以通過數(shù)值來比較，比如上面的要比較元素節(jié)點(diǎn)的話，我們可以使用1來比較，同理屬性節(jié)點(diǎn)是2，文本節(jié)點(diǎn)是3；如下代碼：

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

理解nodeName與nodeValue

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

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

理解節(jié)點(diǎn)關(guān)系

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
 </head>
 <body>
</body>
</html>

如上代碼，我們可以把head和body是html的子元素，同理html是他們的父級(jí)元素，那么head和body就是兄弟元素了，那么head及body里面的就是子元素了，我們需要明白的是每個(gè)節(jié)點(diǎn)都有一個(gè)childNodes屬性，其保存的是類似數(shù)組的元素，其也有l(wèi)ength屬性，但是他不是數(shù)組Array的實(shí)例，比如我們可以看看如下測(cè)試代碼即可：

<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);
}

如上代碼，在標(biāo)準(zhǔn)瀏覽器下及IE9+下第一行打印如下：

[text, p, text, p, text, p, text, item: function]

第二行打印7 長(zhǎng)度為7，因?yàn)樗麄儼盐谋竟?jié)點(diǎn)那個(gè)空格也包括進(jìn)去了，但是在IE8及以下，長(zhǎng)度為3，他們不包括文本空格的節(jié)點(diǎn)，因此想要統(tǒng)一的話，我們可以編寫HTML代碼去掉空格，如下HTML代碼即可；

<div id="test"><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>

這個(gè)問題稍后在仔細(xì)考慮，我們現(xiàn)在來看看如何取得子元素，我們可以使用2種方法，第一種是使用中括號(hào)[index]索引，第二種是使用item[index]索引，如下代碼：

console.log(test.childNodes[1]); // <p>bbbbbb</p>
console.log(test.childNodes.item(1)); // <p>bbbbbb</p>

但是他們并不是數(shù)組，我們可以測(cè)試下代碼即可，如下代碼：

console.log(Object.prototype.toString.call(test.childNodes) === "[object Array]");
// false但是我們使其轉(zhuǎn)換為數(shù)組，如下代碼：

//在IE8 及之前版本中無效
var arrayOfNodes = Array.prototype.slice.call(test.childNodes,0);
console.log(arrayOfNodes instanceof Array);

// true不過在IE8及之前不生效；由于IE8及更早版本將NodeList實(shí)現(xiàn)為一個(gè)COM對(duì)象，而我們不能像使用JScript對(duì)象那樣使用對(duì)象，要想在IE低版本中轉(zhuǎn)換為Array的形式，我們可以像下面一樣封裝一個(gè)方法即可；

function convertToArray(nodes){
 var array = null;
 try {
  array = Array.prototype.slice.call(nodes, 0); //針對(duì)非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（父節(jié)點(diǎn)），previousSibling(上一個(gè)兄弟節(jié)點(diǎn))，nextSibling（下一個(gè)兄弟節(jié)點(diǎn)）;

每個(gè)節(jié)點(diǎn)都有一個(gè)parentNode屬性，該屬性指向文檔中父節(jié)點(diǎn)，previousSibling是指當(dāng)前節(jié)點(diǎn)的上一個(gè)同胞節(jié)點(diǎn)，nextSibling是指當(dāng)前節(jié)點(diǎn)的下一個(gè)同胞節(jié)點(diǎn)，比如如下代碼：

<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>
}

如果該節(jié)點(diǎn)列表中只有一個(gè)節(jié)點(diǎn)的話，那么該節(jié)點(diǎn)的previousSibling和nextSibling都為null；父節(jié)點(diǎn)的firstChild指向了父節(jié)點(diǎn)中第一個(gè)節(jié)點(diǎn)；如下代碼：

<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>
}

父節(jié)點(diǎn)的firstChild始終等于父節(jié)點(diǎn)的.childNodes[0],父節(jié)點(diǎn)的lastChild始終等于父節(jié)點(diǎn)的.childNodes[父節(jié)點(diǎn)的.childNodes.length - 1]; 如下代碼：

console.log(test.firstChild === test.childNodes[0]); // true
console.log(test.lastChild === test.childNodes[test.childNodes.length - 1]); // true

如果沒有子節(jié)點(diǎn)的話，那么firstChild和lastChild都指向?yàn)榭課ull;

hasChildNodes()：如果需要判斷該父節(jié)點(diǎn)有沒有子節(jié)點(diǎn)的話，可以使用該方法判斷，返回的是一個(gè)布爾型，有返回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: 所有節(jié)點(diǎn)都有最后一個(gè)屬性是ownerDocument，該屬性指向表示整個(gè)文檔的文檔節(jié)點(diǎn)，這種關(guān)系表示的任何節(jié)點(diǎn)都屬于它所在的文檔，任何節(jié)點(diǎn)都不能同時(shí)存在兩個(gè)或更多文檔中，通過這個(gè)屬性，我們可以不必在節(jié)點(diǎn)層次中通過層層回溯到達(dá)頂端，而是可以直接訪問文檔節(jié)點(diǎn)；如下測(cè)試代碼：

<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列表的末尾添加一個(gè)節(jié)點(diǎn)；返回的是新增加的節(jié)點(diǎn)；如下代碼：

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(): 該方法是將新節(jié)點(diǎn)插入到指定的節(jié)點(diǎn)的前面去，該方法接收2個(gè)參數(shù)，要插入的節(jié)點(diǎn)和作為參照的節(jié)點(diǎn)；插入節(jié)點(diǎn)后，被插入的節(jié)點(diǎn)會(huì)變成參照節(jié)點(diǎn)的前一個(gè)同胞節(jié)點(diǎn)，同時(shí)被方法返回，如下代碼：

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

插入節(jié)點(diǎn)后，結(jié)構(gòu)變成如下：

復(fù)制代碼代碼如下:

<div id="test">

<div></div>

<p class="a">11</p>

</div>

但是如果參照節(jié)點(diǎn)為null的話，那么就會(huì)把新節(jié)點(diǎn)插入到最后面去了，如下代碼：

復(fù)制代碼代碼如下:

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

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

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

插入后HTML結(jié)構(gòu)如下：

復(fù)制代碼代碼如下:

<div id="test">

    <p class="a">11</p>

    <div></div>

</div>

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

var test = document.getElementById("test");
var newNode = document.createElement("div");
// 插入后成為最后一個(gè)節(jié)點(diǎn)
var returnNode = test.insertBefore(newNode,null);
console.log(returnNode === test.lastChild); // true 
// 插入后成為第一個(gè)節(jié)點(diǎn)
var returnNode = test.insertBefore(newNode,test.firstChild);
console.log(returnNode === newNode); // true
console.log(newNode === test.firstChild); // true
// 插入到最后一個(gè)子節(jié)點(diǎn)的前面
var returnNode = test.insertBefore(newNode,test.lastChild);
console.log(returnNode === test.childNodes[test.childNodes.length - 2]); // true

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

JS代碼如下：

var test = document.getElementById("test");
var newNode = document.createElement("div");
// 替換第一個(gè)節(jié)點(diǎn)
var returnNode = test.replaceChild(newNode,test.firstChild);
console.log(returnNode); // <p class="a">11</p>

替換后html代碼結(jié)構(gòu)變?yōu)槿缦拢?/p>

替換最后一個(gè)節(jié)點(diǎn)代碼如下：

var test = document.getElementById("test");
var newNode = document.createElement("div");
// 替換最后一個(gè)節(jié)點(diǎn)
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()：移除節(jié)點(diǎn)，該方法接收一個(gè)參數(shù)，即要移除的節(jié)點(diǎn)；

被移除的節(jié)點(diǎn)將成為返回值，如下代碼：

var test = document.getElementById("test");
var newNode = document.createElement("div");
// 移除第一個(gè)節(jié)點(diǎn)
var returnNode = test.removeChild(test.firstChild);
console.log(returnNode); // <p class="a">11</p>

移除后的代碼結(jié)構(gòu)變?yōu)槿缦拢?/p>

移除最后一個(gè)節(jié)點(diǎn)的代碼如下：

// 移除最后一個(gè)節(jié)點(diǎn)
var returnNode = test.removeChild(test.lastChild);
console.log(returnNode); // <p class="b">22</p>
移除后的代碼結(jié)構(gòu)變?yōu)槿缦拢?/p>

<div id="test"><p class="a">11</p></div>cloneNode():

克隆一個(gè)相同的副本，該方法接收一個(gè)布爾值參數(shù)，如果為true的話，說明是深復(fù)制，復(fù)制該節(jié)點(diǎn)及整個(gè)子節(jié)點(diǎn)書，如果為false的話，只復(fù)制該節(jié)點(diǎn)本身，比如如下代碼：

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>
如果是淺復(fù)制的如下代碼：
var test = document.getElementById("test");
var deeplist = test.cloneNode(false);
console.log(deeplist);// <div id="test"></div>

Document類型

JS通過Document類型表示文檔，document繼承HTMLDocument(繼承自Document)類型的一個(gè)實(shí)例，表示整個(gè)HTML頁面。document對(duì)象是window的一個(gè)屬性，所以可以通過全局對(duì)象來訪問，document對(duì)象有如下特點(diǎn)：

nodeType值為9，
nodeName值為”#document”,
nodeValue值為null，
parentNode值為null，
ownerDocument值為null
理解文檔document的子節(jié)點(diǎn)
documentElement: 該屬性始終指向html元素，如下代碼：
console.log(document.documentElement); // 指向html的引用
如果需要直接訪問html元素的引用可以直接使用該元素更快，更方便。
childNodes: 通過childNodes列表訪問文檔元素；如下測(cè)試代碼：

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: 通過這個(gè)屬性可以取得網(wǎng)頁的標(biāo)題，如下測(cè)試代碼：

console.log(document.title);

也可以該方法設(shè)置網(wǎng)頁的標(biāo)題；如下代碼：

document.title = “我是龍恩”;

URL: 取得頁面中完整的url，如下代碼測(cè)試：

console.log(document.URL); // http://127.0.0.1/dom/dom.html

domain: 該屬性包含頁面的域名；如下測(cè)試代碼：

console.log(document.domain); // 127.0.0.1

域名也可以設(shè)置的，比如常見的跨子域的情況下，我們需要設(shè)置相同的父域即可完成跨域；

namedItem(): 該方法可以通過元素的name特性取得集合中的項(xiàng)，比如現(xiàn)在頁面上有很多input的框，我想通過他們的name屬性取得自己想要的哪一項(xiàng)，測(cè)試代碼如下：

HTML代碼如下：

JS代碼如下：

var inputs = document.getElementsByTagName("input");
console.log(inputs.namedItem("aa")); // <input name="aa"/>

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

console.log(inputs["aa"]); // <input name="aa"/>

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

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

<input name="aa" type="radio"/>
<input name="aa" type="radio"/>
var aa = document.getElementsByName("aa");
console.log(aa); // object
console.log(aa.length); // 2

該方法也會(huì)返回一個(gè)HTMLCollection.

瀏覽器支持程度IE，firefox，chrome都支持；

Element類型

Element節(jié)點(diǎn)有以下特征：

nodeType的值為1；

nodeName的值為元素的標(biāo)簽名；

nodeValue的值為null；

parentNode可能是Document或Element

要訪問元素的標(biāo)簽名，可以使用nodeName屬性，也可以使用tagName屬性，這兩個(gè)屬性會(huì)返回相同的值，如下代碼：

<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元素的特性的話，有下面幾個(gè)方法：

getAttribute(); 獲取元素的屬性的方法；如下測(cè)試代碼：

<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+及標(biāo)準(zhǔn)瀏覽器下都是使用獲取屬性class來取得類名，上面的如果在IE7下會(huì)返回null, 但是在IE7及以下是使用className這個(gè)屬性來獲取的；如下代碼：在IE7下測(cè)試：

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

當(dāng)然也可以取得自定義的屬性；如下代碼：

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

setAttribute() 設(shè)置元素的屬性；該方法接收2個(gè)參數(shù)，第一個(gè)參數(shù)是屬性名稱，第二個(gè)參數(shù)是對(duì)應(yīng)的值；如果該值存在，則會(huì)以現(xiàn)在的值替換之前的值，如果屬性名不存在，則會(huì)創(chuàng)建該屬性，并指定該屬性的值；如下代碼：

<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結(jié)構(gòu)如下：

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屬性的唯一一個(gè)dom節(jié)點(diǎn)類型，attributes屬性包含一個(gè)NamedNodeMap集合；該對(duì)象有以下方法：

getNamedItem(name): 返回nodeName屬性等于name的節(jié)點(diǎn)；

attributes屬性中包含一系列節(jié)點(diǎn)，每個(gè)節(jié)點(diǎn)的nodeName就是特性的名稱，而節(jié)點(diǎn)的nodeValue就是節(jié)點(diǎn)值，要取得元素id的特性，如下代碼：

<div id="test" class="testName" title="aa" data-value="test1"></div>JS代碼如下：

復(fù)制代碼代碼如下:

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

var id = div.attributes.getNamedItem("id").nodeValue;

console.log(id);  // test

我們也可以通過中括號(hào)的語法來獲取的，如下代碼：

復(fù)制代碼代碼如下:

var id = div.attributes['id'].nodeValue;

console.log(id); // test

同樣我們也可以通過上面介紹的getAttribute(“id”)方法來獲取元素，如下代碼：

console.log(div.getAttribute("id")); // test

也可以通過以下方法給元素設(shè)置id，如下方法：

div.attributes["id"].nodeValue = "aa";

removeNamedItem(name): 從列表中移除nodeName屬性等于name的節(jié)點(diǎn);

調(diào)用removeNamedItem()方法與在元素上調(diào)用removeAttribute()方法的效果相同，是直接刪除具有給定名稱的特性。他們之間的區(qū)別是：removeNamedItem()方法返回表示被刪除特性的節(jié)點(diǎn)；

如下代碼：

JS代碼如下：

復(fù)制代碼代碼如下:

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

var oldAttr = div.attributes.removeNamedItem("id");

console.log(oldAttr); // 返回是被刪除的節(jié)點(diǎn)  id="test"

現(xiàn)在的html結(jié)構(gòu)變成如下：

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

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

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));

結(jié)果打印如下：

id='test' class='testName' title='aa' data-value='test1'

上面的函數(shù)使用一個(gè)數(shù)組來保存名值對(duì)，最后再以空格為分隔符將它們拼接起來，但是上面的代碼我們需要注意兩點(diǎn)：

1.針對(duì)attributes對(duì)象中的特性，不同的瀏覽器返回的順序不同。
2.IE7及更早的版本會(huì)返回HTML元素中所有可能的特性，包括沒有指定的特性；
針對(duì)IE7的問題我們可以進(jìn)行改進(jìn)，我們都知道，每個(gè)特性節(jié)點(diǎn)都有一個(gè)名為specified的屬性，這個(gè)屬性值如果為true，則意味著要么在HTML中指定了相應(yīng)的特性，要么通過setAttribute方法設(shè)置了該特性，在IE中，所有為設(shè)置過的特性該屬性的之都為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));

理解元素的子節(jié)點(diǎn)

元素可以有任意數(shù)目的子節(jié)點(diǎn)和后代節(jié)點(diǎn)，元素的childNodes屬性中它包含了它的所有子節(jié)點(diǎn)，這些子節(jié)點(diǎn)可能是元素，文本節(jié)點(diǎn)，注釋或處理指令；不同的瀏覽器子節(jié)點(diǎn)的個(gè)數(shù)不一樣，下面我們來看看demo如下：

<ul id="list">
 <li>11</li>
 <li>22</li>
 <li>33</li>
</ul>

JS代碼如下：

復(fù)制代碼代碼如下:

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

console.log(list.childNodes);

console.log(list.childNodes.length);

我們之前在上面講過，在標(biāo)準(zhǔn)瀏覽器下(IE9+,firefox,chrome)下，打印的長(zhǎng)度是7個(gè)，因?yàn)樗麄儼芽崭褚舶先?，在IE8-及以下的瀏覽器返回的是3個(gè)子元素，這是表現(xiàn)的正常情況下，但是如果我現(xiàn)在把html元素的空格都去掉的話，那么所有的瀏覽器都會(huì)返回3個(gè)子元素，如下代碼：

JS代碼如下：

復(fù)制代碼代碼如下:

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

console.log(list.childNodes);

console.log(list.childNodes.length);

那么平時(shí)我們不可能都這樣小心小意的編寫html代碼的，因?yàn)橐徊叫⌒木陀幸粋€(gè)空格產(chǎn)生，因此我們可以如下判斷下是不是元素節(jié)點(diǎn)；如下代碼演示：

<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

如上代碼在所有的瀏覽器都支持，通過判斷該元素是不是元素節(jié)點(diǎn)，然后在執(zhí)行后續(xù)操作；不是元素節(jié)點(diǎn)都會(huì)過濾掉，因此返回的長(zhǎng)度都為3；

理解Text類型

Text節(jié)點(diǎn)具有以下特征：

nodeType的值為3；
nodeName的值為”#text”;
nodeValue的值為節(jié)點(diǎn)所包含的文本；
parentNode是一個(gè)Element；

沒有子節(jié)點(diǎn)；

1.創(chuàng)建文本節(jié)點(diǎn)；
可以使用document.createTextNode()創(chuàng)建新文本節(jié)點(diǎn)，這個(gè)方法需要一個(gè)參數(shù)，即要插入的文本，如下代碼：

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

2. 分割文本節(jié)點(diǎn)splitText(offset); 從offset指定的位置將當(dāng)前的文本節(jié)點(diǎn)分成2個(gè)文本節(jié)點(diǎn)；如下代碼：

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操作—?jiǎng)討B(tài)插入腳本

我們動(dòng)態(tài)插入JS腳本，常見的寫法有如下代碼即可插入：

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

即可在body最后面動(dòng)態(tài)插如a.js，此動(dòng)態(tài)插入不會(huì)堵塞瀏覽器加載；我們?yōu)榱烁訑U(kuò)張性，我們也可以封裝一個(gè)函數(shù)，如下代碼：

function loadScript(url) {
 var script = document.createElement("script");
 script.type = "text/javascript";
 script.src = url;
 document.body.appendChild(script);
}
loadScript("a.js");

當(dāng)頁面有多個(gè)js需要?jiǎng)討B(tài)插入的話，可以依次調(diào)用loadScript函數(shù)即可；
但是假如我們現(xiàn)在有這么一個(gè)需求，動(dòng)態(tài)加載JS完后，我想在這后面做點(diǎn)事情，我們都知道，動(dòng)態(tài)加載也可以理解為異步加載，不會(huì)堵塞瀏覽器，但是我們需要如何知道動(dòng)態(tài)JS已經(jīng)加載完了呢？

我們之前講過一篇文章是 “Javascript事件總結(jié)”中有判斷JS動(dòng)態(tài)加載完后使用load事件來監(jiān)聽js是否動(dòng)態(tài)加載完，現(xiàn)在我們?cè)賮韽?fù)習(xí)下load事件；
Javascript中最常用的一個(gè)事件是load，當(dāng)頁面加載完后(包括所有的圖片，javascript文件，css文件等外部資源)。就會(huì)觸發(fā)window上面的load事件；目前可以有2種觸發(fā)load事件，一種是直接放在body上面觸發(fā)；比如如下代碼：

第二種是通過JS來觸發(fā)，如下代碼：

復(fù)制代碼代碼如下:

EventUtil.addHandler(window,'load',function(event){

      alert(1);

});

上面的EventUtil.addHandler 是我們之前在javascript事件總結(jié)中封裝的JS函數(shù)，現(xiàn)在我們直接拿過來使用，如下代碼：

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事件來監(jiān)聽，如下代碼：

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元素也會(huì)觸發(fā)load事件，以便可以確定動(dòng)態(tài)加載jS是否加載完成，上面的代碼指定src屬性和指定的事件處理程序的事件可以調(diào)換位置，先后順序不重要，如上代碼，我們也可以這樣寫，如下代碼：

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+，F(xiàn)irefox，opera，chrome和safari3+支持，IE8及以下不支持該load事件，因此我們需要針對(duì)IE8及以下做處理；

理解readystatechange事件

IE為DOM文檔中的某些部分提供了readystatechange事件，這個(gè)事件的目的提供與文檔或元素的加載的狀態(tài)有關(guān)信息，此事件提供了下面5個(gè)值中的一個(gè)；

uninitialized（未初始化）：對(duì)象存在但尚未初始化；
loading(正在加載)：對(duì)象正在加載數(shù)據(jù)；
loaded(加載完畢): 對(duì)象加載數(shù)據(jù)完成；
interactive(交互)：可以操作對(duì)象了，但沒有完全加載；
complete(完成)：對(duì)象已經(jīng)加載完成；

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客戶端檢測(cè)技術(shù)來判斷是否是IE和其他標(biāo)準(zhǔn)瀏覽器做一個(gè)簡(jiǎn)單的封裝；如下代碼：

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已經(jīng)加載完成");
   }
  });
 }else {
  // 除IE之外的標(biāo)準(zhǔn)瀏覽器
  EventUtil.addHandler(script,'load',function(event){
   console.log("javascript已經(jīng)加載完成");
  });
 }
 script.src = 'a.js';
 document.body.appendChild(script);
});

上面的是針對(duì)所有的主要的瀏覽器進(jìn)行封裝來判斷動(dòng)態(tài)加載的JS是否已經(jīng)加載完成！

理解動(dòng)態(tài)加載行內(nèi)JS方式

另一種加載javascript代碼的方式是行內(nèi)方式，如下代碼：

復(fù)制代碼代碼如下:

<script src=”text/javascript”>

       function sayHi(){alert(1);}

</script>

從理論來講，下面的代碼應(yīng)該是有效的；

復(fù)制代碼代碼如下:

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中，都是正常的，可以運(yùn)行的，但是在IE8及以下會(huì)報(bào)錯(cuò)，如下：

IE8及以下將script視為一個(gè)特殊的元素，不允許dom訪問其子節(jié)點(diǎn)；但是我們可以使用script元素的text屬性來指定javascript代碼，如下代碼：

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

現(xiàn)在在所有的主流的瀏覽器都是正常的，在IE8及以下也是正常的；但是在safari3.0之前的版本不能正確的支持text屬性，但可以允許使用文本節(jié)點(diǎn)來指定代碼；如下代碼：

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);

下面我們可以使用一個(gè)函數(shù)來封裝下；如下代碼：

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()");

理解動(dòng)態(tài)加載css樣式

與動(dòng)態(tài)腳本類似，所謂動(dòng)態(tài)樣式是指在頁面剛載入時(shí)不存在的樣式，動(dòng)態(tài)樣式是在頁面加載完成后動(dòng)態(tài)添加到頁面中的；

動(dòng)態(tài)加載樣式如下代碼：

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);

如上代碼即可動(dòng)態(tài)生成css樣式；

我們也可以像JS一樣先封裝一個(gè)函數(shù)，為了調(diào)用更加方便；如下代碼：

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動(dòng)態(tài)加載是否已經(jīng)加載完成~

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);
});

注意：如上代碼：不僅在標(biāo)準(zhǔn)瀏覽器下chrome，firefox，opera下支持，而且IE7-10都支持這種加載；但是safari不支持這種加載；

或者和javascript一樣，我們也可以針對(duì)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一樣，為了判斷所有的瀏覽器下支持可以封裝一個(gè)所有都支持的代碼；當(dāng)然除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已經(jīng)加載完成");
   }
  });
 }else {
  // 除IE之外的標(biāo)準(zhǔn)瀏覽器
  EventUtil.addHandler(link,'load',function(event){
   alert("css已經(jīng)加載完成");
  });
 }
 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一樣封裝一個(gè)全兼容的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);

為了更方便調(diào)用，因此我們也可以封裝一個(gè)函數(shù)來；如下代碼：

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);
}
// 調(diào)用方式如下：
loadStyleString("body{background-color:red}");

DOM的擴(kuò)展

1. querySelector()方法

querySelector()方法接收一個(gè)css選擇符，返回與該模式匹配的第一個(gè)元素，如果沒有找到匹配元素，則返回null；如下代碼：

復(fù)制代碼代碼如下:

<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的第一個(gè)元素
var cls = document.querySelector(".cls");
console.log(cls); // <div class="cls">1111</div>

同理我們也可以通過Element類型調(diào)用querySelector()方法時(shí)，只會(huì)在該元素后代范圍內(nèi)查找匹配的元素，如下代碼：

復(fù)制代碼代碼如下:

<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()方法接收的參數(shù)與querySelector()方法一樣，都是一個(gè)css選擇符，但是返回的是所有匹配的元素，這個(gè)方法返回的是一個(gè)NodeList的實(shí)例。

如下代碼演示：

<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中的每一個(gè)元素，可以使用item()方法，也可以使用方括號(hào)的語法；

var ems = document.querySelectorAll('#test em');
for(var i = 0, ilen = ems.length; i < ilen; i++) {
 console.log(ems[i]); // 取得每一項(xiàng)em
 console.log(ems.item(i)); // 取得每一項(xiàng)em
}

瀏覽器支持程度：IE8+，firefox，chrome，safari3.1+，opera10+

3. matchesSelector()方法

這個(gè)方法接收一個(gè)參數(shù)，即css選擇符，如果調(diào)用元素與該選擇符匹配，返回true，否則，返回false；

如下代碼：

console.log(document.body.webkitMatchesSelector("body")); // true

IE9+通過msMatchesSelector()支持該方法，F(xiàn)irefox3.6+通過mozMatchesSelector()支持該方法；safari5+和chrome通過webkitMatchesSelector()支持該方法；因此我們可以包裝一個(gè)函數(shù)，如下代碼：

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() 方法

該方法接收一個(gè)參數(shù)，即包含一個(gè)或者多個(gè)類名的字符串，返回帶有指定類的所有元素的NodeList；傳入多個(gè)類名時(shí)，類名的先后順序不重要。

復(fù)制代碼代碼如下:

<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這個(gè)類名的時(shí)候，以前需要如下寫代碼：

var div = document.getElementById("div");
// 首先，取得類名字符串并拆分成數(shù)組
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);
// 把剩下的類名拼成字符串并重新設(shè)置
div.className = classNames.join(" "); 
// <div class="bb cc" id="div">aaa</div>

但是現(xiàn)在HTML5新增了一種操作類名的方式，可以讓操作更簡(jiǎn)單也更方便，那就是所有元素添加classList屬性。這個(gè)classList屬性是新集合類型DOMTokenList的實(shí)例；DOMTokenList有一個(gè)表示自己包含多少元素的length屬性，而要取得每個(gè)元素可以使用item()方法，也可以使用中括號(hào)；

還有以下方法：

add(value)：將給定的字符串值添加到列表中。如果值已經(jīng)存在，就不添加了。
contains(value)：表示列表中是否存在給定的值，如果存在則返回true，否則返回false。
remove(value)：從列表中刪除給定的字符串。
toggle(value)：如果列表中已經(jīng)存在給定的值，刪除它；如果列表中沒有給定的值，添加它。
現(xiàn)在我們可以來看看使用上面的方法的優(yōu)點(diǎn)如下，我們可以來做個(gè)demo，代碼如下：

JS如下：

var div = document.getElementById("div");
// 刪除類名aa，如下方法即可
div.classList.remove("aa");
// html結(jié)構(gòu)如下： <div class="bb cc" id="div">aaa</div>
// 添加類名current，如下方法即可
div.classList.add("current");
// html結(jié)構(gòu)變?yōu)槿缦?<div class="bb cc current" id="div">aaa</div>

// 切換aa類名
div.classList.toggle("aa");
// html結(jié)構(gòu)變?yōu)槿缦?<div class="aa bb cc current" id="div">aaa</div>
// 確定元素是否包含類名；
console.log(div.classList.contains("aa")); // true

支持classList屬性的瀏覽器有IE10+，firefox3.6+和chrome

HTML5新增自定義數(shù)據(jù)屬性

HTML5中規(guī)定可以為元素添加非標(biāo)準(zhǔn)的屬性，但要添加前綴data-,比如如下代碼：

添加了自定義屬性之后，可以通過元素的dataset屬性來訪問自定義屬性的值，dataset屬性的值是DOMStringMap的一個(gè)實(shí)例，也就是一個(gè)名值對(duì)的映射；比如如下代碼：

//本例中使用的方法僅用于演示
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
//設(shè)置值
div.dataset.value = 23456;
div.dataset.name = "Michael";
//有沒有"myname"值呢？
if (div.dataset.name){
 console.log("Hello, " + div.dataset.name); // Hello, Michael
}