【面試系列】之四：關於原生dom操做

之四：關於原生dom操做

下週被內推了百度糯米的面試，決定趁這個週末惡補下原生的js基礎，感受本身被jQuery慣壞了吧！
前兩天聽首頁部同組的大牛師兄說：「其實仍是js基礎重要，不要盲目追求新技術，基礎練好了就像把本身的內功修煉好，內功紮實才能修煉好武功祕籍！不然都是飄飄然」

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

關於原生的dom操做這一塊，因爲ie瀏覽器的各類不支持，因此，這部分的兼容性問題是很是多的！
用慣了jQuery的你是否是也像我同樣，剛剛接觸感受有點懵呢！

1. 關於查找

1.1 經過父子兄弟關係查找

childNodes  //查找父元素的全部子元素（多層），返回一個類數組對象，支持到ie6
parentNode  //查找子元素的父節點（一層），返回父元素對象，支持到ie6
previousSibling //查找前一個緊鄰的兄弟元素，返回兄弟元素對象，支持到ie6
nextSibling     //查找後一個緊鄰的兄弟元素，返回兄弟元素對象，支持到ie6
firstChild  //查找父元素下的第一個子元素，返回子元素對象，支持到ie6
lastChild   //查找父元素下的最後一個子元素，返回子元素對象，支持到ie6

各項dom操做均支持到ie6，可是...有問題，什麼問題？
舉個栗子：

<div>
    <button>click</button>
    <button>單擊</button>
</div>

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

你們猜會輸出什麼，
答案是：IE9及其以前的瀏覽器會輸出：<button>click<button>,而其餘標準瀏覽器會輸出''
緣由是：對於元素間的空格，IE9 及以前版本不會返回文本節點，而其餘全部瀏覽器都會返回文本節點
也就是說：除了IE9及以前的瀏覽器，會輸出標籤之間的空格的空文本，由於他們也是一個文本元素！

解決方案是，在其餘瀏覽器下，除了ie9及其以前的瀏覽器，使用以下查找node節點的方法，能夠忽略第一個文本節點，直接尋到html元素節點

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

1.2 經過元素自身屬性查找

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

此外還有一個，選擇器：

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

2. 建立元素

document.createElement()   //建立HTML元素節點
document.createTextNode()   //建立文本元素節點

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

appendChild()   //向父元素的最後一個子元素處插入
insertBefore()  //兩個參數，要插入的節點和做爲參照的節點
replaceChild()  //兩個參數，要插入的節點和要替換的節點
removeChild()   //要移除的對象

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

cloneNode()
// cloneNode()方法接受一個布爾值參數，表示是否執行深複製。在參數爲true
// 的狀況下，執行深複製，也就是複製節點及其整個子節點樹；在參數爲false 的狀況下，執行淺複製，
// 即只複製節點自己。複製後返回的節點副本屬於文檔全部，但並無爲它指定父節點。所以，這個節點
// 副本就成爲了一個「孤兒」，除非經過appendChild()、insertBefore()或replaceChild()將它添加到文檔中

既然說了這麼多，我們學以至用一下，分享一道騰訊的筆試題，前兩天個人小夥伴剛剛作完這個題
題目：在網頁中生成一個ul，裏面有100個li，每一個li的內容從上到下內容從1-100。生成結束1秒鐘後，將100個li顛倒過來，內容也就變成了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);

// 封裝了一個函數，用於返回須要位置的元素
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()  // 傳入一個參數，獲取相應屬性的值
setAttribute()  // 兩個參數，第一個：屬性名稱，第二個：屬性的值
removeAttribute()   // 刪除屬性，輸入要刪除的屬性名稱

4.2 焦點管理

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

4.3 獲取內容

innerHTML   // 屬性返回與調用元素的全部子節點（包括元素、註釋和文本節點），固然也能夠寫入父元素下的子元素
innerText   // 功能和上一條相似，可是隻對操做元素下的文本元素有影響

5. 最後

以上就是關於原生dom的所有內容，但願下週的糯米麪試成功，麼麼噠

下一次準備和你們聊聊事件那些事，關於js的事件