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

龍恩0707發表於2015-06-15

JavaScript

一：Node型別

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

Node.ELEMENT_NODE(1); 元素節點

Node.ATTRIBUTE_NODE(2); 屬性節點

Node.TEXT_NODE(3); 文字節點

Node.DOCUMENT_NODE(9); 文件節點

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

HTML程式碼如下：

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

JS如下：

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

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

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

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

理解nodeName與nodeValue

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

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

理解節點關係

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

如上程式碼，我們可以把head和body是html的子元素，同理html是他們的父級元素，那麼head和body就是兄弟元素了，那麼head及body裡面的就是子元素了，我們需要明白的是每個節點都有一個childNodes屬性，其儲存的是類似陣列的元素，其也有length屬性，但是他不是陣列Array的例項，比如我們可以看看如下測試程式碼即可：

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

JS程式碼如下：

var test = document.getElementById("test");
if(test.nodeType == 1) {
    console.log(test.childNodes);
    console.log(test.childNodes.length);
}

如上程式碼，在標準瀏覽器下及IE9+下第一行列印如下：

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

第二行列印7 長度為7，因為他們把文字節點那個空格也包括進去了，但是在IE8及以下，長度為3，他們不包括文字空格的節點，因此想要統一的話，我們可以編寫HTML程式碼去掉空格，如下HTML程式碼即可；

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

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

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

但是他們並不是陣列，我們可以測試下程式碼即可，如下程式碼：

console.log(Object.prototype.toString.call(test.childNodes) === "[object Array]"); // false

但是我們使其轉換為陣列，如下程式碼：

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

不過在IE8及之前不生效；由於IE8及更早版本將NodeList實現為一個COM物件，而我們不能像使用JScript物件那樣使用物件，要想在IE低版本中轉換為Array的形式，我們可以像下面一樣封裝一個方法即可；

function convertToArray(nodes){
    var array = null;
    try {
        array = Array.prototype.slice.call(nodes, 0); //針對非IE 瀏覽器
    } catch (ex) {
        array = new Array();
        for (var i=0, len=nodes.length; i < len; i++){
            array.push(nodes[i]);
        }
    }
    return array;
}
var test = document.getElementById("test");
var testArray = convertToArray(test.childNodes);
console.log(testArray instanceof Array); // true

理解parentNode（父節點），previousSibling(上一個兄弟節點)，nextSibling（下一個兄弟節點）;

每個節點都有一個parentNode屬性，該屬性指向文件中父節點，previousSibling是指當前節點的上一個同胞節點，nextSibling是指當前節點的下一個同胞節點，比如如下程式碼：

<div id="test"><p>aaaaaa</p><p>bbbbbb</p><p>cccccc</p></div>
var test = document.getElementById("test");
if(test.nodeType == 1) {
    var secodeChild = test.childNodes[1];
    console.log(secodeChild); // <p>bbbbbb</p>
    console.log(secodeChild.previousSibling); // <p>aaaaaa</p>
    console.log(secodeChild.nextSibling); // <p>cccccc</p>
}

如果該節點列表中只有一個節點的話，那麼該節點的previousSibling和nextSibling都為null；父節點的firstChild指向了父節點中第一個節點；如下程式碼：

<div id="test"><p class="a">aaaaaa</p><p class="b">bbbbbb</p><p class="c">cccccc</p></div>

JS如下：

var test = document.getElementById("test");
if(test.nodeType == 1) {    
    console.log(test.firstChild); // <p class="a">aaaaaa</p>
    console.log(test.lastChild);  // <p class="c">cccccc</p>
}

父節點的firstChild始終等於父節點的.childNodes[0],父節點的lastChild始終等於父節點的.childNodes[父節點的.childNodes.length - 1]; 如下程式碼：

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

如果沒有子節點的話，那麼firstChild和lastChild都指向為空null;

hasChildNodes()：如果需要判斷該父節點有沒有子節點的話，可以使用該方法判斷，返回的是一個布林型，有返回true，沒有返回false，如下程式碼：

<div id="test"><p class="a">aaaaaa</p><p class="b">bbbbbb</p><p class="c">cccccc</p></div>

JS程式碼如下：

var test = document.getElementById("test");
console.log(test.hasChildNodes());  // true

如果是如下的就返回false；如下程式碼：

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

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

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

<div id="test">
    <p class="a">11</p>
</div>
var test = document.getElementById("test");
console.log(test.ownerDocument); // document
var p = test.ownerDocument.getElementsByTagName("p");
console.log(p);  // <p class="a">11</p>

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

<div id="test">
    <p class="a">11</p>
</div>

JS程式碼如下：

var test = document.getElementById("test");
var newNode = document.createElement("p");
var returnNode = test.appendChild(newNode);
console.log(returnNode); // <p></p>
console.log(returnNode === newNode); // true
console.log(test.lastChild === newNode); // true

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

<div id="test">
    <p class="a">11</p>
</div>

JS程式碼如下：

var test = document.getElementById("test");
var newNode = document.createElement("div");
var returnNode = test.insertBefore(newNode,test.childNodes[0]);
console.log(returnNode); // <div></div>
console.log(returnNode === newNode); // true

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

<div id="test">
    <div></div>
    <p class="a">11</p>
</div>

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

var test = document.getElementById("test");
var newNode = document.createElement("div");
var returnNode = test.insertBefore(newNode,null);

插入後HTML結構如下：

<div id="test">
    <p class="a">11</p>
    <div></div>
</div>

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

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

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

<div id="test"><p class="a">11</p><p class="b">22</p></div>

JS程式碼如下：

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

替換後html程式碼結構變為如下：

<div id="test"><div></div><p class="b">22</p></div>

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

var test = document.getElementById("test");
var newNode = document.createElement("div");
// 替換最後一個節點
var returnNode = test.replaceChild(newNode,test.lastChild);
console.log(returnNode); // <p class="b">22</p>

替換後的程式碼如下：

<div id="test"><p class="a">11</p><div></div></div>

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

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

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

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

<div id="test"><p class="b">22</p></div>

移除最後一個節點的程式碼如下：

// 移除最後一個節點
var returnNode = test.removeChild(test.lastChild);
console.log(returnNode); // <p class="b">22</p>

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

<div id="test"><p class="a">11</p></div>

cloneNode(): 克隆一個相同的副本，該方法接收一個布林值引數，如果為true的話，說明是深複製，複製該節點及整個子節點書，如果為false的話，只複製該節點本身，比如如下程式碼：

var test = document.getElementById("test");
var deeplist = test.cloneNode(true);
console.log(deeplist);
// <div id="test"><p class="a">11</p><p class="b">22</p></div>
如果是淺複製的如下程式碼：
var test = document.getElementById("test");
var deeplist = test.cloneNode(false);
console.log(deeplist);// <div id="test"></div>

Document型別

JS通過Document型別表示文件，document繼承HTMLDocument(繼承自Document)型別的一個例項，表示整個HTML頁面。document物件是window的一個屬性，所以可以通過全域性物件來訪問，document物件有如下特點：

nodeType值為9，

nodeName值為”#document”,

nodeValue值為null，

parentNode值為null，

ownerDocument值為null

理解文件document的子節點

documentElement: 該屬性始終指向html元素，如下程式碼：

console.log(document.documentElement); // 指向html的引用

如果需要直接訪問html元素的引用可以直接使用該元素更快，更方便。

childNodes: 通過childNodes列表訪問文件元素；如下測試程式碼：

console.log(document.documentElement); // 指向html的引用
console.log(document.childNodes[0]);  // <!doctype html>
console.log(document.firstChild);  // <!doctype html>
console.log(document.firstChild === document.childNodes[0]); // true
console.log(document.body); // 指向body的引用

所有的瀏覽器都支援document.documentElement 和 document.body屬性;

title: 通過這個屬性可以取得網頁的標題，如下測試程式碼：

console.log(document.title);

也可以該方法設定網頁的標題；如下程式碼：

document.title = “我是龍恩”;

URL: 取得頁面中完整的url，如下程式碼測試：

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

domain: 該屬性包含頁面的域名；如下測試程式碼：

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

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

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

HTML程式碼如下：

<input name="aa"/>
<input name="bb"/>

JS程式碼如下：

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

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

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

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

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

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

該方法也會返回一個HTMLCollection.

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

Element型別

Element節點有以下特徵：

nodeType的值為1；

nodeName的值為元素的標籤名；

nodeValue的值為null；

parentNode可能是Document或Element

要訪問元素的標籤名，可以使用nodeName屬性，也可以使用tagName屬性，這兩個屬性會返回相同的值，如下程式碼：

<div id="test"></div>
var test = document.getElementById("test");
console.log(test.tagName);   // DIV
console.log(test.nodeName);  // DIV
console.log(test.nodeValue); // null;
console.log(test.parentNode); // body
console.log(test.nodeType);  // 1

理解HTML元素中的獲取屬性的方法

所有HTML元素都由HTMLElement型別表示，HTMLElement型別直接繼承Element；如果想要取得HTML元素的特性的話，有下面幾個方法：

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

<div id="test" class="testName" title="aa"></div>
var test = document.getElementById("test");
console.log(test.getAttribute("id"));  // test
console.log(test.getAttribute("class")); // testName
console.log(test.getAttribute("title"));  // aa

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

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

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

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

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

<div id="test"></div>
// JS程式碼如下：
var test = document.getElementById("test");
test.setAttribute("id",'test');
test.setAttribute("class","testName");
test.setAttribute("title","aa");
test.setAttribute("data-value","test1");

生成HTML結構如下：

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

<div id="test" class="testName" title="aa" data-value="test1"></div>

JS程式碼如下：

var test = document.getElementById("test");
test.removeAttribute("id");
test.removeAttribute("class");
test.removeAttribute("title");
test.removeAttribute("data-value");

IE7及以下刪除類名需要使用className;

attributes屬性

Element型別是使用attributes屬性的唯一一個dom節點型別，attributes屬性包含一個NamedNodeMap集合；該物件有以下方法：

getNamedItem(name): 返回nodeName屬性等於name的節點；

attributes屬性中包含一系列節點，每個節點的nodeName就是特性的名稱，而節點的nodeValue就是節點值，要取得元素id的特性，如下程式碼：

<div id="test" class="testName" title="aa" data-value="test1"></div>

JS程式碼如下：

var div = document.getElementById("test");
var id = div.attributes.getNamedItem("id").nodeValue;
console.log(id);  // test

我們也可以通過中括號的語法來獲取的，如下程式碼：

var id = div.attributes['id'].nodeValue;
console.log(id); // test

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

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

也可以通過以下方法給元素設定id，如下方法：

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

removeNamedItem(name): 從列表中移除nodeName屬性等於name的節點;

呼叫removeNamedItem()方法與在元素上呼叫removeAttribute()方法的效果相同，是直接刪除具有給定名稱的特性。他們之間的區別是：removeNamedItem()方法返回表示被刪除特性的節點；

如下程式碼：

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

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

現在的html結構變成如下：

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

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

HTML程式碼如下：

<div id="test" class="testName" title="aa" data-value="test1"></div>

JS程式碼如下：

var div = document.getElementById("test");
function outputAttributes(element) {
    var arrs = new Array();
    var attrName,
          attrValue,
        i,
        len;
    for(i = 0, len = element.attributes.length; i < len; i++) {
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        arrs.push(attrName + "='" + attrValue + "'");
    }
    return arrs.join(" ");
}
console.log(outputAttributes(div));

結果列印如下：

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

上面的函式使用一個陣列來儲存名值對，最後再以空格為分隔符將它們拼接起來，但是上面的程式碼我們需要注意兩點：

針對attributes物件中的特性，不同的瀏覽器返回的順序不同。
IE7及更早的版本會返回HTML元素中所有可能的特性，包括沒有指定的特性；

針對IE7的問題我們可以進行改進，我們都知道，每個特性節點都有一個名為specified的屬性，這個屬性值如果為true，則意味著要麼在HTML中指定了相應的特性，要麼通過setAttribute方法設定了該特性，在IE中，所有為設定過的特性該屬性的之都為false；如下程式碼：

var div = document.getElementById("test");
function outputAttributes(element) {
    var arrs = new Array();
    var attrName,
     attrValue,
    i,
    len;
    for(i = 0, len = element.attributes.length; i < len; i++) {
        attrName = element.attributes[i].nodeName;
        attrValue = element.attributes[i].nodeValue;
        if(element.attributes[i].specified) {
             arrs.push(attrName + "='" + attrValue + "'");
        }
    }
    return arrs.join(" ");
}
console.log(outputAttributes(div));

理解元素的子節點

元素可以有任意數目的子節點和後代節點，元素的childNodes屬性中它包含了它的所有子節點，這些子節點可能是元素，文字節點，註釋或處理指令；不同的瀏覽器子節點的個數不一樣，下面我們來看看demo如下：

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

JS程式碼如下：

var list = document.getElementById("list");
console.log(list.childNodes);
console.log(list.childNodes.length);

我們之前在上面講過，在標準瀏覽器下(IE9+,firefox,chrome)下，列印的長度是7個，因為他們把空格也包含上去，在IE8-及以下的瀏覽器返回的是3個子元素，這是表現的正常情況下，但是如果我現在把html元素的空格都去掉的話，那麼所有的瀏覽器都會返回3個子元素，如下程式碼：

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

JS程式碼如下：

var list = document.getElementById("list");
console.log(list.childNodes);
console.log(list.childNodes.length);

那麼平時我們不可能都這樣小心小意的編寫html程式碼的，因為一步小心就有一個空格產生，因此我們可以如下判斷下是不是元素節點；如下程式碼演示：

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

JS程式碼如下：

var list = document.getElementById("list");
var arrs = [];
for(var i = 0, ilen = list.childNodes.length; i < ilen; i++) {
    var curElement = list.childNodes[i];
    if(curElement.nodeType === 1){
         arrs.push(curElement);
    }
}
console.log(arrs); 
console.log(arrs.length); // 3

如上程式碼在所有的瀏覽器都支援，通過判斷該元素是不是元素節點，然後在執行後續操作；不是元素節點都會過濾掉，因此返回的長度都為3；

理解Text型別

Text節點具有以下特徵：

nodeType的值為3；

nodeName的值為”#text”;

nodeValue的值為節點所包含的文字；

parentNode是一個Element；

沒有子節點；

建立文字節點；

可以使用document.createTextNode()建立新文字節點，這個方法需要一個引數，即要插入的文字，如下程式碼：

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

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

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

var newNode = element.firstChild.splitText(5);
console.log(element.firstChild.nodeValue); // aabbb
console.log(newNode.nodeValue); // ccc 
console.log(element.childNodes.length); // 2

瀏覽器支援的程度有IE，firefox,chrome都支援；

理解DOM操作—動態插入指令碼

我們動態插入JS指令碼，常見的寫法有如下程式碼即可插入：

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

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

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

當頁面有多個js需要動態插入的話，可以依次呼叫loadScript函式即可；

但是假如我們現在有這麼一個需求，動態載入JS完後，我想在這後面做點事情，我們都知道，動態載入也可以理解為非同步載入，不會堵塞瀏覽器，但是我們需要如何知道動態JS已經載入完了呢？

我們之前講過一篇文章是 “Javascript事件總結”中有判斷JS動態載入完後使用load事件來監聽js是否動態載入完，現在我們再來複習下load事件；

Javascript中最常用的一個事件是load，當頁面載入完後(包括所有的圖片，javascript檔案，css檔案等外部資源)。就會觸發window上面的load事件；目前可以有2種觸發load事件，一種是直接放在body上面觸發；比如如下程式碼：

第二種是通過JS來觸發，如下程式碼：

EventUtil.addHandler(window,’load’,function(event){
      alert(1);
});

上面的EventUtil.addHandler 是我們之前在javascript事件總結中封裝的JS函式，現在我們直接拿過來使用，如下程式碼：

var EventUtil = {
    addHandler: function(element,type,handler) {
        if(element.addEventListener) {
                element.addEventListener(type,handler,false);
        }else if(element.attachEvent) {
            element.attachEvent("on"+type,handler);
        }else {
            element["on" +type] = handler;
        }
    },
    removeHandler: function(element,type,handler){
        if(element.removeEventListener) {
                element.removeEventListener(type,handler,false);
        }else if(element.detachEvent) {
            element.detachEvent("on"+type,handler);
        }else {
            element["on" +type] = null;
        }
    },
    getEvent: function(event) {
        return event ? event : window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event){
        if(event.preventDefault) {
            event.preventDefault();
        }else {
            event.returnValue = false;
        }
    },
    stopPropagation: function(event) {
        if(event.stopPropagation) {
            event.stopPropagation();
        }else {
            event.cancelBubble = true;
        }
    }
};

下面我們來看看如何使用JS事件來判斷JS是否載入完成的程式碼，我們可以使用load事件來監聽，如下程式碼：

EventUtil.addHandler(window,'load',function(){
    var script = document.createElement("script");
    EventUtil.addHandler(script,'load',function(event){
        console.log(script.src);
    });
    script.src = 'a.js';
    document.body.appendChild(script);
});

如上程式碼，script元素也會觸發load事件，以便可以確定動態載入jS是否載入完成，上面的程式碼指定src屬性和指定的事件處理程式的事件可以調換位置，先後順序不重要，如上程式碼，我們也可以這樣寫，如下程式碼：

EventUtil.addHandler(window,'load',function(){
    var script = document.createElement("script");
    script.src = 'a.js';
    document.body.appendChild(script);
    EventUtil.addHandler(script,'load',function(event){
        console.log(script.src);
    });        
});

目前只有IE9+，Firefox，opera，chrome和safari3+支援，IE8及以下不支援該load事件，因此我們需要針對IE8及以下做處理；

理解readystatechange事件

IE為DOM文件中的某些部分提供了readystatechange事件，這個事件的目的提供與文件或元素的載入的狀態有關資訊，此事件提供了下面5個值中的一個；

uninitialized（未初始化）：物件存在但尚未初始化；

loading(正在載入)：物件正在載入資料；

loaded(載入完畢): 物件載入資料完成；

interactive(互動)：可以操作物件了，但沒有完全載入；

complete(完成)：物件已經載入完成；

EventUtil.addHandler(window,'load',function(){
    var script = document.createElement("script");
    EventUtil.addHandler(script,'readystatechange',function(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if (target.readyState == "loaded" || target.readyState == "complete"){
            EventUtil.removeHandler(target, "readystatechange", arguments. callee);
            alert(script.src);
        }
    });
    script.src = 'a.js';
    document.body.appendChild(script);    
});

下面我們可以使用javascript客戶端檢測技術來判斷是否是IE和其他標準瀏覽器做一個簡單的封裝；如下程式碼：

var ua = navigator.userAgent.toLowerCase();
EventUtil.addHandler(window,'load',function(){
    var script = document.createElement("script");
    if(/msie ([^;]+)/.test(ua) || "ActiveXObject" in window) {
        // IE 瀏覽器
        EventUtil.addHandler(script,'readystatechange',function(event){
            event = EventUtil.getEvent(event);
            var target = EventUtil.getTarget(event);
            if (target.readyState == "loaded" || target.readyState == "complete"){
                EventUtil.removeHandler(target, "readystatechange", arguments. callee);
                console.log("javascript已經載入完成");
            }
        });
    }else {
        // 除IE之外的標準瀏覽器
        EventUtil.addHandler(script,'load',function(event){
            console.log("javascript已經載入完成");
        });
    }
    script.src = 'a.js';
    document.body.appendChild(script);
});

上面的是針對所有的主要的瀏覽器進行封裝來判斷動態載入的JS是否已經載入完成！

理解動態載入行內JS方式

另一種載入javascript程式碼的方式是行內方式，如下程式碼：

<script src=”text/javascript”>
       function sayHi(){alert(1);}
</script>

從理論來講，下面的程式碼應該是有效的；

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

如上程式碼在firefox，IE9+，chrome和opera中，都是正常的，可以執行的，但是在IE8及以下會報錯，如下：

IE8及以下將script視為一個特殊的元素，不允許dom訪問其子節點；但是我們可以使用script元素的text屬性來指定javascript程式碼，如下程式碼：

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

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

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

下面我們可以使用一個函式來封裝下；如下程式碼：

function loadScriptString(code) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    try{
        script.appendChild(document.createTextNode(code));
    }catch(e){
        script.text = code;
    }
    document.body.appendChild(script);
}
loadScriptString("function sayHi(){alert(1);} sayHi()");

理解動態載入css樣式

與動態指令碼類似，所謂動態樣式是指在頁面剛載入時不存在的樣式，動態樣式是在頁面載入完成後動態新增到頁面中的；

動態載入樣式如下程式碼：

var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);

如上程式碼即可動態生成css樣式；

我們也可以像JS一樣先封裝一個函式，為了呼叫更加方便；如下程式碼：

function loadStyles(url) {
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}
loadStyles("style.css");

我們也可以使用事件的方式來判斷css動態載入是否已經載入完成~

EventUtil.addHandler(window,'load',function(){
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    EventUtil.addHandler(link, "load", function(event){
        console.log("css loaded");
    });
    link.href = "style.css";
    document.getElementsByTagName("head")[0].appendChild(link);
});

注意：如上程式碼：不僅在標準瀏覽器下chrome，firefox，opera下支援，而且IE7-10都支援這種載入；但是safari不支援這種載入；

或者和javascript一樣，我們也可以針對IE下做一種這樣的處理；程式碼如下，也可以支援所有的IE下：

EventUtil.addHandler(window, "load", function(){
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel= "stylesheet";
    EventUtil.addHandler(link, "readystatechange", function(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if (target.readyState == "loaded" || target.readyState == "complete"){
            EventUtil.removeHandler(target, "readystatechange", arguments. callee);
            alert("CSS Loaded");
        }
    });
    link.href = "style.css";
    document.getElementsByTagName("head")[0].appendChild(link);
});

我們也可以像Javascript一樣，為了判斷所有的瀏覽器下支援可以封裝一個所有都支援的程式碼；當然除safari瀏覽器除外，好像safari瀏覽器沒有生效；

如下程式碼：

var ua = navigator.userAgent.toLowerCase();
EventUtil.addHandler(window,'load',function(){
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel= "stylesheet";
    if(/msie ([^;]+)/.test(ua) || "ActiveXObject" in window) {
        // IE 瀏覽器
        EventUtil.addHandler(link,'readystatechange',function(event){
            event = EventUtil.getEvent(event);
            var target = EventUtil.getTarget(event);
            if (target.readyState == "loaded" || target.readyState == "complete"){
            EventUtil.removeHandler(target, "readystatechange", arguments. callee);
                alert("css已經載入完成");
            }
        });
    }else {
        // 除IE之外的標準瀏覽器
        EventUtil.addHandler(link,'load',function(event){
            alert("css已經載入完成");
        });
    }
    link.href = "style.css";
    document.getElementsByTagName("head")[0].appendChild(link);
});

另一種定義樣式的方式是使用<style>元素來包含嵌入式的css

如下所示程式碼：

<style>

body {background-color:red;}

</style>

按照相同的原理，下面的程式碼除了IE8及以下不支援，其他瀏覽器下都支援；如下程式碼：

var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

因此我們也可以像JS一樣封裝一個全相容的css樣式；如下程式碼所示：

var style = document.createElement("style");
style.type = "text/css";
try{
    style.appendChild(document.createTextNode("body{background-color:red}"));
} catch (ex){
    style.styleSheet.cssText = "body{background-color:red}";
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

為了更方便呼叫，因此我們也可以封裝一個函式來；如下程式碼：

function loadStyleString(css) {
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        style.appendChild(document.createTextNode(css));
    } catch (ex){
        style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}
// 呼叫方式如下：
loadStyleString("body{background-color:red}");

DOM的擴充套件

1. querySelector()方法

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

<div id="test">test</div>
<div class="cls">1111</div>
<div class="cls">2222</div>
<div class="cls">2222</div>

JS程式碼如下：

// 取得body
var body = document.querySelector('body');
console.log(body);  // body的引用
// 取得id為test的元素
var test = document.querySelector("#test");
console.log(test); // <div id="test">test</div>
// 取得類為cls的第一個元素
var cls = document.querySelector(".cls");
console.log(cls);  // <div class="cls">1111</div>

同理我們也可以通過Element型別呼叫querySelector()方法時，只會在該元素後代範圍內查詢匹配的元素，如下程式碼：

<div class="testParent">
   <p>1111</p>
   <p>2222</p>
</div>

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

var testParent = document.querySelector('.testParent');
var pfirst = testParent.querySelector("p");
console.log(pfirst); // <p>1111</p>

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

2. querySelectorAll()方法

querySelectorAll()方法接收的引數與querySelector()方法一樣，都是一個css選擇符，但是返回的是所有匹配的元素，這個方法返回的是一個NodeList的例項。

如下程式碼演示：

<div id="test">
   <em class="selected">11111</em>
    <em class="selected">22222</em>
    <em>33333</em>
    <em>44444</em>
</div>

JS程式碼如下：

// 取得div中所有em元素
var em = document.getElementById("test").querySelectorAll('em');
console.log(em); // NodeList
console.log(em.length); // 4

// 第二種方式 也可以先使用querySelector
var test = document.querySelector("#test");
var em2 = test.querySelectorAll('em');
console.log(em2); // NodeList
console.log(em2.length); // 4

// 取得類為selected的所有元素
var selected = document.querySelectorAll('.selected');
console.log(selected); // <em class="selected">11111</em>
              // <em class="selected">22222</em>
// 也可以通過以下的方式獲得所有的em元素
var em = document.querySelectorAll('div em');
console.log(em); // NodeList
console.log(em.length); // 4

要取得返回的NodeList中的每一個元素，可以使用item()方法，也可以使用方括號的語法；

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

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

3. matchesSelector()方法

這個方法接收一個引數，即css選擇符，如果呼叫元素與該選擇符匹配，返回true，否則，返回false；

如下程式碼：

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

IE9+通過msMatchesSelector()支援該方法，Firefox3.6+通過mozMatchesSelector()支援該方法；safari5+和chrome通過webkitMatchesSelector()支援該方法；因此我們可以包裝一個函式，如下程式碼：

function matchesSelector(element,selector) {
if(element.MatchesSelector) {
    return element.MatchesSelector(selector);
}else if(element.msMatchesSelector) {
    return element.msMatchesSelector(selector);
}else if(element.webkitMatchesSelector) {
    return element.webkitMatchesSelector(selector);
}else if(element.mozMatchesSelector) {
    return element.mozMatchesSelector(selector);
}else {
        throw new Error("Not supported");
    }
}
console.log(matchesSelector(document.body,'body')); // true
var test = document.querySelector('#test');
console.log(matchesSelector(test,'#test')); // true

4. getElementsByClassName() 方法

該方法接收一個引數，即包含一個或者多個類名的字串，返回帶有指定類的所有元素的NodeList；傳入多個類名時，類名的先後順序不重要。

<p class="p1">111</p>
<p class="p1">222</p>
<p class="p1">333</p>

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

支援getElementsByClassName()方法的瀏覽器有IE9+，firefox3+，safari3.1+,chrome和opera9.5+；

5. classList屬性

如下程式碼：

<div class="aa bb cc" id="div">aaa</div>

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

var div = document.getElementById("div");
// 首先，取得類名字串並拆分成陣列
var classNames = div.className.split(/\s+/);
var pos = -1,
     i, 
    len;
for(i = 0,len = classNames.length; i < len; i+=1) {
    if(classNames[i] == 'aa') {
        pos = i;
        break;
    }
}
// 刪除類名
classNames.splice(i,1);
// 把剩下的類名拼成字串並重新設定
div.className = classNames.join(" "); 
// <div class="bb cc" id="div">aaa</div>

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

還有以下方法：

add(value)：將給定的字串值新增到列表中。如果值已經存在，就不新增了。

contains(value)：表示列表中是否存在給定的值，如果存在則返回true，否則返回false。

remove(value)：從列表中刪除給定的字串。

toggle(value)：如果列表中已經存在給定的值，刪除它；如果列表中沒有給定的值，新增它。

現在我們可以來看看使用上面的方法的優點如下，我們可以來做個demo，程式碼如下：

<div class="aa bb cc" id="div">aaa</div>

JS如下：

var div = document.getElementById("div");
// 刪除類名aa，如下方法即可
div.classList.remove("aa");
// html結構如下： <div class="bb cc" id="div">aaa</div>
// 新增類名current，如下方法即可
div.classList.add("current");
// html結構變為如下 <div class="bb cc current" id="div">aaa</div>

// 切換aa類名
div.classList.toggle("aa");
// html結構變為如下 <div class="aa bb cc current" id="div">aaa</div>
// 確定元素是否包含類名；
console.log(div.classList.contains("aa")); // true

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

HTML5新增自定義資料屬性

HTML5中規定可以為元素新增非標準的屬性，但要新增字首data-,比如如下程式碼：

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

新增了自定義屬性之後，可以通過元素的dataset屬性來訪問自定義屬性的值，dataset屬性的值是DOMStringMap的一個例項，也就是一個名值對的對映；比如如下程式碼：

//本例中使用的方法僅用於演示
var div = document.getElementById("myDiv");
console.log(div.dataset); // DOMStringMap {value: "12345", name: "Nicholas"}
//取得自定義屬性的值
var value1 = div.dataset.value;
console.log(value1); // 12345
var name1 = div.dataset.name;
console.log(name1); // Nicholas
//設定值
div.dataset.value = 23456;
div.dataset.name = "Michael";
//有沒有"myname"值呢？
if (div.dataset.name){
    console.log("Hello, " + div.dataset.name); // Hello, Michael
}

瀏覽器支援的程度有；firefox6+和chrome瀏覽器；

JavaScript學習之DOM（節點、節點層級、節點操作）
2021-09-09
JavaScript
css細節知識點
2018-06-21
CSS
JS中的DOM— —節點以及操作
2021-09-09
JS
Android的細節知識彙總系列（一）
2019-02-25
Android
你所不知道的js的小知識點(1)
2018-09-12
JS
Flutter 上的一個 Bug 帶你瞭解鍵盤與路由的另類知識點
2020-05-15
Flutter路由
jQuery操作dom節點empty()方法
2021-09-11
jQuery
Java 異常你必須瞭解的一些知識
2019-02-14
Java
HTML DOM 知識點整理（一）—— Document物件
2018-11-29
HTML物件
瞭解少的知識
2018-04-03
jQuery關於DOM操作節點一些方法
2020-11-14
jQuery
你所不瞭解的辦公小技巧：excel插入圖表
2022-03-01
Excel
JavaScript操作DOM常用的API
2018-05-10
JavaScriptAPI
JS知識總結之DOM操作
2019-04-10
JS
jQuery知識總結之DOM操作
2019-03-22
jQuery
詳細瞭解文件物件模型（DOM）
2019-03-25
物件模型
說說你對影子(Shadow)DOM的瞭解
2024-11-21
前端知識點總結——DOM
2019-06-18
前端
帶你瞭解 MySQL Binlog 不為人知的祕密
2020-10-19
MySql
人生苦短，瞭解一下前端必須明白的http知識點
2018-06-29
前端HTTP
面試官：你瞭解es6的知識嗎？
2019-04-06
面試
索引的知識要點與操作
2024-04-28
索引
JavaScript ----- 操作DOM物件的屬性
2018-06-18
JavaScript物件
Python——基礎知識細節
2019-08-02
Python
JS基礎細節知識
2019-02-25
JS
關於Linux知識你瞭解多少呢?
2020-07-10
Linux
Java註解在Android中必須學習的細節知識
2019-05-02
JavaAndroid
關於JavaScript的作用域你應該瞭解的那點事！
2021-06-28
JavaScript
JavaScript知識點整理
2019-02-17
JavaScript
學習筆記：Android這四個你不可不知的知識點，你都瞭解多少？
2020-03-24
筆記Android
react的詳細知識講解！
2021-05-26
React
JavaScript DOM、BOM操作
2020-12-14
JavaScript
軟體工程師必須知道20個知識點你瞭解多少?
2019-02-18
軟體工程工程師
jquery中dom節點操作方法empty和remove的區別
2021-09-11
jQueryREM
理解virtual dom的實現細節-snabbdom
2019-01-01
你所不知道的 CSS 陰影技巧與細節
2018-11-06
CSS
五個你所不知道的Flutter開發細節
2018-10-14
Flutter
[譯]13 種有用的 JavaScript DOM 操作
2019-06-04
JavaScript
程式設計師必須瞭解的知識點——你搞懂mysql索引機制了嗎？
2020-09-20
程式設計師MySql索引

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

相關文章