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

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

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

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

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

各項dom操作均支持到ie6，但是...有問題，什么問題？
舉個栗子：

    click
    單擊


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

大家猜會輸出什么，
答案是：IE9及其之前的瀏覽器會輸出：click,而其他標(biāo)準(zhǔn)瀏覽器會輸出""
原因是：對于元素間的空格，IE9 及之前版本不會返回文本節(jié)點，而其他所有瀏覽器都會返回文本節(jié)點
也就是說：除了IE9及之前的瀏覽器，會輸出標(biāo)簽之間的空格的空文本，因為他們也是一個文本元素！

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

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

1.2 通過元素自身屬性查找

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

此外還有一個，選擇器：

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

2. 創(chuàng)建元素

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

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

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

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

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

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

// 封裝了一個函數(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()  // 傳入一個參數(shù)，獲取相應(yīng)屬性的值
setAttribute()  // 兩個參數(shù)，第一個：屬性名稱，第二個：屬性的值
removeAttribute()   // 刪除屬性，輸入要刪除的屬性名稱

4.2 焦點管理

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

4.3 獲取內(nèi)容

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

5. 最后

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

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