你所不了解的javascript操作DOM的細(xì)節(jié)知識點(一)
一：Node類型
DOM1級定義了一個Node接口，該接口是由DOM中的所有節(jié)點類型實現(xiàn)。每個節(jié)點都有一個nodeType屬性，用于表明節(jié)點的類型，節(jié)點類型在Node類型中有以下幾種：
Node.ELEMENT_NODE(1); 元素節(jié)點
Node.ATTRIBUTE_NODE(2); 屬性節(jié)點
Node.TEXT_NODE(3); 文本節(jié)點
Node.DOCUMENT_NODE(9); 文檔節(jié)點
其實還有很多種，但是那些都不是很常用，所以就來理解這其中4種就可以了，我們先來看看節(jié)點類型，比如如下代碼：
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類型的構(gòu)造函數(shù)，因此在IE8-下會有錯誤，但是我們可以通過數(shù)值來比較，比如上面的要比較元素節(jié)點的話，我們可以使用1來比較，同理屬性節(jié)點是2，文本節(jié)點是3；如下代碼：
var test = document.getElementById("test");
// 下面的所有的瀏覽器都支持
if(test.nodeType == 1) {
alert(1)
}
理解nodeName與nodeValue
nodeName保存的是元素的標(biāo)簽名，而nodeValue一般都是null；我們可以看如下代碼，沒有特殊的說明，HTML代碼都是上面的，因此這邊就不貼代碼了；如下JS代碼測試：
var test = document.getElementById("test");
if(test.nodeType == 1) {
console.log(test.nodeName); // 打印DIV
console.log(test.nodeValue); // 打印null
}
理解節(jié)點關(guān)系
<!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里面的就是子元素了，我們需要明白的是每個節(jié)點都有一個childNodes屬性，其保存的是類似數(shù)組的元素，其也有l(wèi)ength屬性，但是他不是數(shù)組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);
}
如上代碼，在標(biāo)準(zhǔn)瀏覽器下及IE9+下 第一行打印如下：
[text, p, text, p, text, p, text, item: function]
第二行打印7 長度為7，因為他們把文本節(jié)點那個空格也包括進去了，但是在IE8及以下，長度為3，他們不包括文本空格的節(jié)點，因此想要統(tǒng)一的話，我們可以編寫HTML代碼去掉空格，如下HTML代碼即可；
<div id="test"><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>
這個問題稍后在仔細(xì)考慮，我們現(xiàn)在來看看如何取得子元素，我們可以使用2種方法，第一種是使用中括號[index]索引，第二種是使用item[index]索引，如下代碼：
console.log(test.childNodes[1]); // <p>bbbbbb</p>
console.log(test.childNodes.item(1)); // <p>bbbbbb</p>
但是他們并不是數(shù)組，我們可以測試下代碼即可，如下代碼：
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實現(xiàn)為一個COM對象，而我們不能像使用JScript對象那樣使用對象，要想在IE低版本中轉(zhuǎn)換為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（父節(jié)點），previousSibling(上一個兄弟節(jié)點)，nextSibling（下一個兄弟節(jié)點）;
每個節(jié)點都有一個parentNode屬性，該屬性指向文檔中父節(jié)點，previousSibling是指當(dāng)前節(jié)點的上一個同胞節(jié)點，nextSibling是指當(dāng)前節(jié)點的下一個同胞節(jié)點，比如如下代碼：
<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é)點列表中只有一個節(jié)點的話，那么該節(jié)點的previousSibling和nextSibling都為null；父節(jié)點的firstChild指向了父節(jié)點中第一個節(jié)點；如下代碼：
<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é)點的firstChild始終等于父節(jié)點的.childNodes[0],父節(jié)點的lastChild始終等于父節(jié)點的.childNodes[父節(jié)點的.childNodes.length - 1]; 如下代碼：
console.log(test.firstChild === test.childNodes[0]); // true console.log(test.lastChild === test.childNodes[test.childNodes.length - 1]); // true
如果沒有子節(jié)點的話，那么firstChild和lastChild都指向為空null;
hasChildNodes()：如果需要判斷該父節(jié)點有沒有子節(jié)點的話，可以使用該方法判斷，返回的是一個布爾型，有返回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é)點都有最后一個屬性是ownerDocument，該屬性指向表示整個文檔的文檔節(jié)點，這種關(guān)系表示的任何節(jié)點都屬于它所在的文檔，任何節(jié)點都不能同時存在兩個或更多文檔中，通過這個屬性，我們可以不必在節(jié)點層次中通過層層回溯到達頂端，而是可以直接訪問文檔節(jié)點；如下測試代碼：
<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列表的末尾添加一個節(jié)點；返回的是新增加的節(jié)點；如下代碼：
<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(): 該方法是將新節(jié)點插入到指定的節(jié)點的前面去，該方法接收2個參數(shù)，要插入的節(jié)點和作為參照的節(jié)點；插入節(jié)點后，被插入的節(jié)點會變成參照節(jié)點的前一個同胞節(jié)點，同時被方法返回，如下代碼：
<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
插入節(jié)點后，結(jié)構(gòu)變成如下：
<div id="test">
<div></div>
<p class="a">11</p>
</div>
但是如果參照節(jié)點為null的話，那么就會把新節(jié)點插入到最后面去了，如下代碼：
var test = document.getElementById("test");
var newNode = document.createElement("div");
var returnNode = test.insertBefore(newNode,null);
插入后HTML結(jié)構(gòu)如下：
<div id="test">
<p class="a">11</p>
<div></div>
</div>
我們還可以更深入的看下如下測試代碼：
var test = document.getElementById("test");
var newNode = document.createElement("div");
// 插入后成為最后一個節(jié)點
var returnNode = test.insertBefore(newNode,null);
console.log(returnNode === test.lastChild); // true
// 插入后成為第一個節(jié)點
var returnNode = test.insertBefore(newNode,test.firstChild);
console.log(returnNode === newNode); // true
console.log(newNode === test.firstChild); // true
// 插入到最后一個子節(jié)點的前面
var returnNode = test.insertBefore(newNode,test.lastChild);
console.log(returnNode === test.childNodes[test.childNodes.length - 2]); // true
replaceChild(); 該方法接收2個參數(shù)，要插入的節(jié)點和要替換的節(jié)點，要替換的節(jié)點將由這個方法返回并從文檔樹中被移除，同時由插入的節(jié)點占據(jù)其位置，如下代碼：
<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");
// 替換第一個節(jié)點
var returnNode = test.replaceChild(newNode,test.firstChild);
console.log(returnNode); // <p class="a">11</p>
替換后html代碼結(jié)構(gòu)變?yōu)槿缦拢?/p>
<div id="test"><div></div><p class="b">22</p></div>
替換最后一個節(jié)點代碼如下：
var test = document.getElementById("test");
var newNode = document.createElement("div");
// 替換最后一個節(jié)點
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é)點，該方法接收一個參數(shù)，即要移除的節(jié)點；
被移除的節(jié)點將成為返回值，如下代碼：
var test = document.getElementById("test");
var newNode = document.createElement("div");
// 移除第一個節(jié)點
var returnNode = test.removeChild(test.firstChild);
console.log(returnNode); // <p class="a">11</p>
移除后的代碼結(jié)構(gòu)變?yōu)槿缦拢?/p>
<div id="test"><p class="b">22</p></div>
移除最后一個節(jié)點的代碼如下：
// 移除最后一個節(jié)點
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():
克隆一個相同的副本，該方法接收一個布爾值參數(shù)，如果為true的話，說明是深復(fù)制，復(fù)制該節(jié)點及整個子節(jié)點書，如果為false的話，只復(fù)制該節(jié)點本身，比如如下代碼：
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)類型的一個實例，表示整個HTML頁面。document對象是window的一個屬性，所以可以通過全局對象來訪問，document對象有如下特點：
nodeType值為9，
nodeName值為”#document”,
nodeValue值為null，
parentNode值為null，
ownerDocument值為null
理解文檔document的子節(jié)點
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: 通過這個屬性可以取得網(wǎng)頁的標(biāo)題，如下測試代碼：
console.log(document.title);
也可以該方法設(shè)置網(wǎng)頁的標(biāo)題；如下代碼：
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
域名也可以設(shè)置的，比如常見的跨子域的情況下，我們需要設(shè)置相同的父域即可完成跨域；
namedItem(): 該方法可以通過元素的name特性取得集合中的項，比如現(xiàn)在頁面上有很多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節(jié)點有以下特征：
nodeType的值為1；
nodeName的值為元素的標(biāo)簽名；
nodeValue的值為null；
parentNode可能是Document或Element
要訪問元素的標(biāo)簽名，可以使用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+及標(biāo)準(zhǔn)瀏覽器下都是使用獲取屬性class來取得類名，上面的如果在IE7下會返回null, 但是在IE7及以下是使用className這個屬性來獲取的；如下代碼：在IE7下測試：
console.log(test.getAttribute("className")); // testName
當(dāng)然也可以取得自定義的屬性；如下代碼：
<div id="test" data-value="test1"></div>
console.log(test.getAttribute("data-value")); // test1
setAttribute() 設(shè)置元素的屬性；該方法接收2個參數(shù)，第一個參數(shù)是屬性名稱，第二個參數(shù)是對應(yīng)的值；如果該值存在，則會以現(xiàn)在的值替換之前的值，如果屬性名不存在，則會創(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)如下：
<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節(jié)點類型，attributes屬性包含一個NamedNodeMap集合；該對象有以下方法：
getNamedItem(name): 返回nodeName屬性等于name的節(jié)點；
attributes屬性中包含一系列節(jié)點，每個節(jié)點的nodeName就是特性的名稱，而節(jié)點的nodeValue就是節(jié)點值，要取得元素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
也可以通過以下方法給元素設(shè)置id，如下方法：
div.attributes["id"].nodeValue = "aa";
removeNamedItem(name): 從列表中移除nodeName屬性等于name的節(jié)點;
調(diào)用removeNamedItem()方法與在元素上調(diào)用removeAttribute()方法的效果相同，是直接刪除具有給定名稱的特性。他們之間的區(qū)別是：removeNamedItem()方法返回表示被刪除特性的節(jié)點；
如下代碼：
<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); // 返回是被刪除的節(jié)點 id="test"
現(xiàn)在的html結(jié)構(gòu)變成如下：
<div class="testName" title="aa" data-value="test1"></div>
如上方法：目前IE，firefox，chrome瀏覽器都支持；
但是上面我們有g(shù)etAttribute,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));
結(jié)果打印如下：
id='test' class='testName' title='aa' data-value='test1'
上面的函數(shù)使用一個數(shù)組來保存名值對，最后再以空格為分隔符將它們拼接起來，但是上面的代碼我們需要注意兩點：
1.針對attributes對象中的特性，不同的瀏覽器返回的順序不同。
2.IE7及更早的版本會返回HTML元素中所有可能的特性，包括沒有指定的特性；
針對IE7的問題我們可以進行改進，我們都知道，每個特性節(jié)點都有一個名為specified的屬性，這個屬性值如果為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é)點
元素可以有任意數(shù)目的子節(jié)點和后代節(jié)點，元素的childNodes屬性中它包含了它的所有子節(jié)點，這些子節(jié)點可能是元素，文本節(jié)點，注釋或處理指令；不同的瀏覽器子節(jié)點的個數(shù)不一樣，下面我們來看看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);
我們之前在上面講過，在標(biāo)準(zhǔn)瀏覽器下(IE9+,firefox,chrome)下，打印的長度是7個，因為他們把空格也包含上去，在IE8-及以下的瀏覽器返回的是3個子元素，這是表現(xiàn)的正常情況下，但是如果我現(xiàn)在把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代碼的，因為一步小心就有一個空格產(chǎn)生，因此我們可以如下判斷下是不是元素節(jié)點；如下代碼演示：
<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é)點，然后在執(zhí)行后續(xù)操作；不是元素節(jié)點都會過濾掉，因此返回的長度都為3；
理解Text類型
Text節(jié)點具有以下特征：
nodeType的值為3；
nodeName的值為”#text”;
nodeValue的值為節(jié)點所包含的文本；
parentNode是一個Element；
沒有子節(jié)點；
1.創(chuàng)建文本節(jié)點；
可以使用document.createTextNode()創(chuàng)建新文本節(jié)點，這個方法需要一個參數(shù)，即要插入的文本，如下代碼：
var element = document.createElement("div");
var text = document.createTextNode("aa");
element.appendChild(text);
document.body.appendChild(element);
2. 分割文本節(jié)點splitText(offset); 從offset指定的位置將當(dāng)前的文本節(jié)點分成2個文本節(jié)點；如下代碼：
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操作—動態(tài)插入腳本
我們動態(tài)插入JS腳本，常見的寫法有如下代碼即可插入：
var script = document.createElement("script");
script.type ="text/javascript";
script.src = 'a.js';
document.body.appendChild(script);
即可在body最后面動態(tài)插如a.js，此動態(tài)插入不會堵塞瀏覽器加載；我們?yōu)榱烁訑U張性，我們也可以封裝一個函數(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)頁面有多個js需要動態(tài)插入的話，可以依次調(diào)用loadScript函數(shù)即可；
但是假如我們現(xiàn)在有這么一個需求，動態(tài)加載JS完后，我想在這后面做點事情，我們都知道，動態(tài)加載也可以理解為異步加載，不會堵塞瀏覽器，但是我們需要如何知道動態(tài)JS已經(jīng)加載完了呢？
我們之前講過一篇文章是 “Javascript事件總結(jié)”中有判斷JS動態(tài)加載完后使用load事件來監(jiān)聽js是否動態(tài)加載完，現(xiàn)在我們再來復(fù)習(xí)下load事件；
Javascript中最常用的一個事件是load，當(dāng)頁面加載完后(包括所有的圖片，javascript文件，css文件等外部資源)。就會觸發(fā)window上面的load事件；目前可以有2種觸發(fā)load事件，一種是直接放在body上面觸發(fā)；比如如下代碼：
<body onload=”a()”></body>
第二種是通過JS來觸發(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元素也會觸發(fā)load事件，以便可以確定動態(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事件，因此我們需要針對IE8及以下做處理；
理解readystatechange事件
IE為DOM文檔中的某些部分提供了readystatechange事件，這個事件的目的提供與文檔或元素的加載的狀態(tài)有關(guān)信息，此事件提供了下面5個值中的一個；
uninitialized（未初始化）：對象存在但尚未初始化；
loading(正在加載)：對象正在加載數(shù)據(jù)；
loaded(加載完畢): 對象加載數(shù)據(jù)完成；
interactive(交互)： 可以操作對象了，但沒有完全加載；
complete(完成)：對象已經(jīng)加載完成；
<script>（在IE和opera）中和<link>(僅IE中)元素也會觸發(fā)readystatechange事件，可以用來確定外部的javascript和css文件是否已經(jīng)加載完成，基于元素觸發(fā)的readystatechange事件，即readyState屬性無論等于”loaded”還是”complete”都可以表示資源已經(jīng)可用；如下針對IE的判斷javascript是否已經(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客戶端檢測技術(shù)來判斷是否是IE和其他標(biāo)準(zhǔ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);
});
上面的是針對所有的主要的瀏覽器進行封裝來判斷動態(tài)加載的JS是否已經(jīng)加載完成！
理解動態(tài)加載行內(nèi)JS方式
另一種加載javascript代碼的方式是行內(nèi)方式，如下代碼：
<script src=”text/javascript”>
function sayHi(){alert(1);}
</script>
從理論來講，下面的代碼應(yīng)該是有效的；
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訪問其子節(jié)點；但是我們可以使用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é)點來指定代碼；如下代碼：
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);
下面我們可以使用一個函數(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()");
理解動態(tài)加載css樣式
與動態(tài)腳本類似，所謂動態(tài)樣式是指在頁面剛載入時不存在的樣式，動態(tài)樣式是在頁面加載完成后動態(tài)添加到頁面中的；
動態(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);
如上代碼即可動態(tài)生成css樣式；
我們也可以像JS一樣先封裝一個函數(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動態(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一樣，我們也可以針對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一樣，為了判斷所有的瀏覽器下支持可以封裝一個所有都支持的代碼；當(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一樣封裝一個全兼容的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)用，因此我們也可以封裝一個函數(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的擴展
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類型調(diào)用querySelector()方法時，只會在該元素后代范圍內(nèi)查找匹配的元素，如下代碼：
<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()方法一樣，都是一個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()方法
這個方法接收一個參數(shù)，即css選擇符，如果調(diào)用元素與該選擇符匹配，返回true，否則，返回false；
如下代碼：
console.log(document.body.webkitMatchesSelector("body")); // true
IE9+通過msMatchesSelector()支持該方法，F(xiàn)irefox3.6+通過mozMatchesSelector()支持該方法；safari5+和chrome通過webkitMatchesSelector()支持該方法；因此我們可以包裝一個函數(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() 方法
該方法接收一個參數(shù)，即包含一個或者多個類名的字符串，返回帶有指定類的所有元素的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");
// 首先，取得類名字符串并拆分成數(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新增了一種操作類名的方式，可以讓操作更簡單也更方便，那就是所有元素添加classList屬性。這個classList屬性是新集合類型DOMTokenList的實例；DOMTokenList有一個表示自己包含多少元素的length屬性，而要取得每個元素可以使用item()方法，也可以使用中括號；
還有以下方法：
add(value)：將給定的字符串值添加到列表中。如果值已經(jīng)存在，就不添加了。
contains(value)：表示列表中是否存在給定的值，如果存在則返回true，否則返回false。
remove(value)：從列表中刪除給定的字符串。
toggle(value)：如果列表中已經(jīng)存在給定的值，刪除它；如果列表中沒有給定的值，添加它。
現(xiàn)在我們可以來看看使用上面的方法的優(yōu)點如下，我們可以來做個demo，代碼如下：
<div class="aa bb cc" id="div">aaa</div>
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-,比如如下代碼：
<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
//設(shè)置值
div.dataset.value = 23456;
div.dataset.name = "Michael";
//有沒有"myname"值呢？
if (div.dataset.name){
console.log("Hello, " + div.dataset.name); // Hello, Michael
}
瀏覽器支持的程度有；firefox6+和chrome瀏覽器；
- 整理JavaScript對DOM中各種類型的元素的常用操作
- JavaScript利用HTML DOM進行文檔操作的方法
- JavaScript操作HTML DOM節(jié)點的基礎(chǔ)教程
- JavaScript對HTML DOM使用EventListener進行操作
- 詳解JavaScript操作HTML DOM的基本方式
- JavaScript DOM操作表格及樣式
- js使用DOM操作實現(xiàn)簡單留言板的方法
- JavaScript操作DOM元素的childNodes和children區(qū)別
- javascript中HTMLDOM操作詳解
- JavaScript基礎(chǔ)語法、dom操作樹及document對象
- JS操作iframe里的dom(實例講解)
- 淺析JS操作DOM的一些常用方法
相關(guān)文章
這篇文章給大家分享了java線程中斷的辦法以及相關(guān)知識點內(nèi)容，有需要的朋友們可以學(xué)習(xí)參考下。2018-07-07
javascript 利用arguments實現(xiàn)可變長參數(shù)
在C#中，有可變長參數(shù)params[]，但是在js中，如何實現(xiàn)這種可變參數(shù)呢？本片文章主要介紹利用arguments，實現(xiàn)可變長參數(shù)。有需要的請參考下2016-11-11
JavaScript算法題之如何將一個數(shù)組旋轉(zhuǎn)k步
這篇文章主要給大家介紹了關(guān)于JavaScript算法題之如何將一個數(shù)組旋轉(zhuǎn)k步的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03
JavaScript如何實現(xiàn)對數(shù)字保留兩位小數(shù)一位自動補零
本文給大家介紹基于JavaScript如何實現(xiàn)對數(shù)字保留兩位小數(shù)一位自動補零的實例代碼，代碼簡單易懂，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
eval()函數(shù)，這個函數(shù)可以把一個字符串當(dāng)作一個JavaScript表達式一樣去執(zhí)行它。2010-03-03
微信小程序?qū)崿F(xiàn)發(fā)送模板消息功能示例【通過openid推送消息給用戶】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)發(fā)送模板消息功能,結(jié)合實例形式分析了微信小程序?qū)崿F(xiàn)通過openid推送消息給用戶相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
判斷字符串的長度的方法有很多，本例介紹的是優(yōu)化之前的方法，記住中文占兩個字符，需要的朋友不要錯過2014-10-10
這篇文章主要介紹了jQuery實現(xiàn)div浮動層跟隨頁面滾動效果,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細(xì)介紹了JavaScript的運動函數(shù)，使用實例在論證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02