摘要：指向后一個(gè)同輩元素的元素版。復(fù)制后返回的節(jié)點(diǎn)副本屬于文檔所有，但并沒有為它指定父節(jié)點(diǎn)。生成結(jié)束秒鐘后，將個(gè)顛倒過來，內(nèi)容也就變成了。

下周被內(nèi)推了百度糯米的面試，決定趁這個(gè)周末惡補(bǔ)下原生的js基礎(chǔ)，感覺自己被jQuery慣壞了吧！
前兩天聽首頁(yè)部同組的大牛師兄說：“其實(shí)還是js基礎(chǔ)重要，不要盲目追求新技術(shù)，基礎(chǔ)練好了就像把自己的內(nèi)功修煉好，內(nèi)功扎實(shí)才能修煉好武功秘籍！否則都是飄飄然”

說的好對(duì)！特別感謝同組的技術(shù)大牛師兄。今天我要說的是js原生的dom的操作！

關(guān)于原生的dom操作這一塊，由于ie瀏覽器的各種不支持，所以，這部分的兼容性問題是非常多的！
用慣了jQuery的你是不是也像我一樣，剛剛接觸感覺有點(diǎn)懵呢！

childNodes  //查找父元素的所有子元素（多層），返回一個(gè)類數(shù)組對(duì)象，支持到ie6
parentNode  //查找子元素的父節(jié)點(diǎn)（一層），返回父元素對(duì)象，支持到ie6
previousSibling //查找前一個(gè)緊鄰的兄弟元素，返回兄弟元素對(duì)象，支持到ie6
nextSibling     //查找后一個(gè)緊鄰的兄弟元素，返回兄弟元素對(duì)象，支持到ie6
firstChild  //查找父元素下的第一個(gè)子元素，返回子元素對(duì)象，支持到ie6
lastChild   //查找父元素下的最后一個(gè)子元素，返回子元素對(duì)象，支持到ie6

各項(xiàng)dom操作均支持到ie6，但是...有問題，什么問題？
舉個(gè)栗子：

    click
    單擊


var oDiv = document.getElementsByTagName("div")[0];
console.log(oDiv.firstChild)

大家猜會(huì)輸出什么，
答案是：IE9及其之前的瀏覽器會(huì)輸出：click,而其他標(biāo)準(zhǔn)瀏覽器會(huì)輸出""
原因是：對(duì)于元素間的空格，IE9 及之前版本不會(huì)返回文本節(jié)點(diǎn)，而其他所有瀏覽器都會(huì)返回文本節(jié)點(diǎn)
也就是說：除了IE9及之前的瀏覽器，會(huì)輸出標(biāo)簽之間的空格的空文本，因?yàn)樗麄円彩且粋€(gè)文本元素！

解決方案是，在其他瀏覽器下，除了ie9及其之前的瀏覽器，使用如下查找node節(jié)點(diǎn)的方法，可以忽略第一個(gè)文本節(jié)點(diǎn)，直接尋到html元素節(jié)點(diǎn)

childElementCount：返回子元素（不包括文本節(jié)點(diǎn)和注釋）的個(gè)數(shù)。
firstElementChild：指向第一個(gè)子元素；firstChild 的元素版。
lastElementChild：指向最后一個(gè)子元素；lastChild 的元素版。
previousElementSibling：指向前一個(gè)同輩元素；previousSibling 的元素版。
nextElementSibling：指向后一個(gè)同輩元素；nextSibling 的元素版。

1.2 通過元素自身屬性查找

getElementById("")  //通過元素的id進(jìn)行查找，兼容到IE6
getElementsByTagName("")    //通過元素的標(biāo)簽名進(jìn)行查找，兼容到ie6
getElementsByName("")   //通過元素的name屬性查找，兼容到IE8
getElementsByClass("") //通過元素的class屬性去查找，html5新出的。兼容性你懂的。

此外還有一個(gè)，選擇器：

querySelector() //接收一個(gè)CSS 選擇符，返回與該模式匹配的第一個(gè)元素，兼容到Ie8+
querySelectorAll()  //接收一個(gè)CSS 選擇符，返回與該模式匹配的第一數(shù)組

2. 創(chuàng)建元素

document.createElement()   //創(chuàng)建HTML元素節(jié)點(diǎn)
document.createTextNode()   //創(chuàng)建文本元素節(jié)點(diǎn)

3. 插入、替換、刪除、克隆元素

appendChild()   //向父元素的最后一個(gè)子元素處插入
insertBefore()  //兩個(gè)參數(shù)，要插入的節(jié)點(diǎn)和作為參照的節(jié)點(diǎn)
replaceChild()  //兩個(gè)參數(shù)，要插入的節(jié)點(diǎn)和要替換的節(jié)點(diǎn)
removeChild()   //要移除的對(duì)象

特別注意：前面介紹的四個(gè)方法操作的都是某個(gè)節(jié)點(diǎn)的子節(jié)點(diǎn)，也就是說，這都是父元素對(duì)子元素的操作

cloneNode()
// cloneNode()方法接受一個(gè)布爾值參數(shù)，表示是否執(zhí)行深復(fù)制。在參數(shù)為true
// 的情況下，執(zhí)行深復(fù)制，也就是復(fù)制節(jié)點(diǎn)及其整個(gè)子節(jié)點(diǎn)樹；在參數(shù)為false 的情況下，執(zhí)行淺復(fù)制，
// 即只復(fù)制節(jié)點(diǎn)本身。復(fù)制后返回的節(jié)點(diǎn)副本屬于文檔所有，但并沒有為它指定父節(jié)點(diǎn)。因此，這個(gè)節(jié)點(diǎn)
// 副本就成為了一個(gè)“孤兒”，除非通過appendChild()、insertBefore()或replaceChild()將它添加到文檔中

既然說了這么多，咱們學(xué)以致用一下，分享一道騰訊的筆試題，前兩天我的小伙伴剛剛做完這個(gè)題
題目：在網(wǎng)頁(yè)中生成一個(gè)ul，里面有100個(gè)li，每個(gè)li的內(nèi)容從上到下內(nèi)容從1-100。生成結(jié)束1秒鐘后，將100個(gè)li顛倒過來，內(nèi)容也就變成了100-1。
要求：不許使用了innerHTML以及innerText這兩個(gè)方法，兼容性到IE8+

po上我的解題代碼：

var oUl = document.createElement("ul");
document.body.appendChild(oUl);

for (var i=0;i<100;i++) {
    var oLi = document.createElement("li");
    oLi.appendChild(document.createTextNode(i + 1));
    oUl.appendChild(oLi);
}

setTimeout(function () {
    for (var i=0;i<100;i++) {
        var oSpecialLi = document.createElement("li");
        oUl.insertBefore(oSpecialLi, findElementByPos(i));
        oUl.replaceChild(oUl.lastElementChild, oSpecialLi);
    }
}, 1000);

// 封裝了一個(gè)函數(shù)，用于返回需要位置的元素
function findElementByPos(pos) {
    var oLiChange = oUl.firstElementChild;
    for (var j=0;j<(pos-0);j++) {
        oLiChange = oLiChange.nextElementSibling;
    }
    return oLiChange;
}

4. 其他 4.1 操作html元素下的屬性

getAttribute()  // 傳入一個(gè)參數(shù)，獲取相應(yīng)屬性的值
setAttribute()  // 兩個(gè)參數(shù)，第一個(gè)：屬性名稱，第二個(gè)：屬性的值
removeAttribute()   // 刪除屬性，輸入要?jiǎng)h除的屬性名稱

4.2 焦點(diǎn)管理

document.activeElement  // 沒有兼容性問題，這個(gè)屬性始終會(huì)引用DOM 中當(dāng)前獲得了焦點(diǎn)的元素

4.3 獲取內(nèi)容

innerHTML   // 屬性返回與調(diào)用元素的所有子節(jié)點(diǎn)（包括元素、注釋和文本節(jié)點(diǎn)），當(dāng)然也可以寫入父元素下的子元素
innerText   // 功能和上一條類似，但是只對(duì)操作元素下的文本元素有影響

5. 最后

以上就是關(guān)于原生dom的全部?jī)?nèi)容，希望下周的糯米面試成功，么么噠

下一次準(zhǔn)備和大家聊聊事件那些事，關(guān)于js的事件