js之element.children與element.childNodes區別&兼容

element.children 獲取的是當前元素的所有子節點元素(不包括文本元素),children返回的是HTMLCollection類型

element.childNodes 獲取的是當前元素的有所子元素(節點元素和文本元素),childNodes返回的是NodeList類型

children會出現不兼容問題,兼容性代碼如下:

1. 判斷該瀏覽器是否支持children屬性,是則返回element.children

2.如果不支持,則通過childNodes來獲取該元素的所有子元素

3.通過nodeType屬性過濾掉非節點元素,保存到elementArr中

4.返回elementArr

代碼如下:

function getElementChild(element){

if (!element.children) {

var elementList = element.childNodes;

var elementItem,

elementArr = [];

for(var i = 0; i < elementList.length; i++){

elementItem = elementList[i];

if(elementItem.nodeType == 1){//說明該節點為元素節點

elementArr.push(elementItem);

}

}

return elementArr;

}else{

return element.children;

}

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、JS前言 (1)認識JS 也許你已經了解HTML標記(也稱為結構),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,807評論 0 8
  • 本章內容 理解包含不同層次節點的 DOM 使用不同的節點類型 克服瀏覽器兼容性問題及各種陷阱 DOM 是針對 HT...
    悶油瓶小張閱讀 668評論 0 1
  • DOM DOM內容主要分為四部分: 什么是DOM和節點; 獲取節點; 節點操作(3種); 屬性操作(3種)。 什么...
    magic_pill閱讀 793評論 0 1
  • 原文 https://www.kancloud.cn/dennis/tgjavascript/241852 一、節...
    LuckyS007閱讀 863評論 0 0
  • “總覺得一段感情——"呃,后半截不知道該怎么接,只能夠就這么吊在這,戛然而止。 又或者這句可以作為一個小說的開篇,...
    彣言閱讀 271評論 0 0