實現瀏覽器相容版的element.children
阿新 • • 發佈:2018-11-05
element.children能夠獲取元素的元素子節點,但是低版本的ie不支援,相容實現:
//宣告一個函式,可以完成element.children相似的功能
function getChildElementNodes(element) {
//第一步是條件語句來判斷瀏覽器是否支援element.children屬性
//如果支援呢,element.children的值是一個集合而不是undefined
if (element.children == "undefined") {
// 既然沒有,自己為element元素建立一個children屬性,並把函式returnEle的返回值給這個屬性
element.children = returnEle();
return element.children;
}else {
alert("瀏覽器上有了,不需要相容");
}
//element.children等號右邊要進行的邏輯操作
function returnEle() {
var childNodes,
EleNodes = [],
i = 0 ,
// 等號右邊獲取的所有節點型別全部賦值給EleNodes這個變數
childNodes = element.childNodes;
//現在要為childNodes裡面的節點做迴圈判斷了,我們只要元素節點
for (var i; i<childNodes.length; i++) {
// 判斷節點是不是元素節點想到了兩種方法
// childNodes[i].nodeType === 1
if (Object.prototype.toString.call(childNodes[i]) === "[object Element]") {
EleNodes.push(childNodes[i]);
}
}
return EleNodes;
}
}
// 在文件中獲取你想要動動手腳的節點
var box = document.getElementById('pNode');
// 呼叫相容低版本可以實現跟真正的element.children一樣功能的函式
var childEles = getChildElementNodes(box);
console.log(childEles);