資訊專欄INFORMATION COLUMN
摘要：指向后一個同輩元素的元素版。復制后返回的節點副本屬于文檔所有，但并沒有為它指定父節點。生成結束秒鐘后，將個顛倒過來，內容也就變成了。
之四：關于原生dom操作
下周被內推了百度糯米的面試，決定趁這個周末惡補下原生的js基礎，感覺自己被jQuery慣壞了吧！
前兩天聽首頁部同組的大牛師兄說：“其實還是js基礎重要，不要盲目追求新技術，基礎練好了就像把自己的內功修煉好，內功扎實才能修煉好武功秘籍！否則都是飄飄然”
說的好對！特別感謝同組的技術大牛師兄。今天我要說的是js原生的dom的操作！
關于原生的dom操作這一塊，由于ie瀏覽器的各種不支持，所以，這部分的兼容性問題是非常多的！
用慣了jQuery的你是不是也像我一樣，剛剛接觸感覺有點懵呢！
childNodes //查找父元素的所有子元素（多層），返回一個類數組對象，支持到ie6 parentNode //查找子元素的父節點（一層），返回父元素對象，支持到ie6 previousSibling //查找前一個緊鄰的兄弟元素，返回兄弟元素對象，支持到ie6 nextSibling //查找后一個緊鄰的兄弟元素，返回兄弟元素對象，支持到ie6 firstChild //查找父元素下的第一個子元素，返回子元素對象，支持到ie6 lastChild //查找父元素下的最后一個子元素，返回子元素對象，支持到ie6
各項dom操作均支持到ie6，但是...有問題，什么問題？
舉個栗子：
var oDiv = document.getElementsByTagName("div")[0]; console.log(oDiv.firstChild)
大家猜會輸出什么，
答案是：IE9及其之前的瀏覽器會輸出：,而其他標準瀏覽器會輸出""
原因是：對于元素間的空格，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的事件
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80117.html
摘要：是分發器，是數據與邏輯處理器，會在注冊針對各個命令字的響應回調函數。當按如下方式觸發回調時，回調函數具備事件的特性。 本系列博文從 Shadow Widget 作者的視角，解釋該框架的設計要點。本篇解釋 Shadow Widget 在 MVC、MVVM、Flux 框架之間如何做選擇。 showImg(https://segmentfault.com/img/bVOODj?w=380&h...
摘要：前端面試題及答案總結掘金技術征文金三銀四，金九銀十，用來形容求職最好的幾個月。因為的存在，至少在被標準化的那一刻起，就支持異步編程了。然而異步編程真正發展壯大，的流行功不可沒。 showImg(https://segmentfault.com/img/bVVQOH?w=640&h=319); 1、2017前端面試題及答案總結 |掘金技術征文 金三銀四，金九銀十，用來形容求職最好的幾個月...
摘要：函數式編程前端掘金引言面向對象編程一直以來都是中的主導范式。函數式編程是一種強調減少對程序外部狀態產生改變的方式。 JavaScript 函數式編程 - 前端 - 掘金引言 面向對象編程一直以來都是JavaScript中的主導范式。JavaScript作為一門多范式編程語言，然而，近幾年，函數式編程越來越多得受到開發者的青睞。函數式編程是一種強調減少對程序外部狀態產生改變的方式。因此，...
摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當作你的競爭對手，你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...
閱讀 3637·2021-11-19 09:40
閱讀 3096·2019-08-30 15:54
閱讀 2313·2019-08-30 15:44
閱讀 3196·2019-08-29 15:35
閱讀 3331·2019-08-29 12:22
閱讀 2861·2019-08-28 18:01
閱讀 3141·2019-08-26 13:54
閱讀 902·2019-08-26 12:24
