實現(xiàn)瀏覽器兼容版的ParentNode.children

ParentNode.children兼容性說明

  1. element.children屬性桌面端和手機端所有瀏覽器都是支持的

注意:IE6受葛、7衅谷、8上面element.children的結(jié)果集中還會包括注釋標簽

2.document.children屬性桌面端和手機端針對IE和Safari都不支持,其他一些瀏覽器低版本也不支持

關(guān)于更多兼容性的問題可以點擊這里進行查看

ParentNode.children兼容版實現(xiàn)函數(shù)

/**
 * [兼容低版本IE的element.children]
 * @param  {[type]} element [父元素]
 * @return {[type]}         [孩子節(jié)點集合]
 */
function getElementChildren(element) {
    if (!element.children) { //判斷是否有children屬性
        var childNodesList = element.childNodes; //獲取元素下面所有的孩子節(jié)點
        var len = childNodesList.length;
        var childrenList = [];
        for (var i = 0; i < len; i++) {
            if (childNodesList[i].nodeType === Node.ELEMENT_NODE) {
                //如果是標簽?zāi)敲醇尤牒⒆庸?jié)點數(shù)組
                childrenList.push(childNodesList[i]);
            }
        }
        return childrenList;
    } else {
        return element.children;
    }
}

函數(shù)返回值問題

從上面的實現(xiàn)代碼可以看出:在支持element.children的瀏覽器中返回的值element.childrenHTMLCollection類型,但是在不支持element.children的瀏覽器中氏淑,返回的是一個數(shù)組對象。對于js中是否需要統(tǒng)一函數(shù)的返回值類型我還不是很清楚硕噩,所以暫時沒有處理假残,如果清楚的朋友可以給我留言說明。

節(jié)點類型判斷

1.Node.nodeType知識

| 常數(shù) | 值 | 說明 |
| ------- |:----------:| :--------|
| Node.ELEMENT_NODE | 1 | 元素節(jié)點炉擅,如:<div>辉懒、<span> 。|
| Node.TEXT_NODE | 3 | 文本 |
| Node.COMMENT_NODE | 8 | 注釋節(jié)點 |
| Node.DOCUMENT_NODE | 8 | document節(jié)點 |

說明:上面列出了部分js中nodeType的常量谍失,更多信息請點擊這里查看

使用childNodesList[i].nodeType === Node.ELEMENT_NODE來進行節(jié)點類型的判斷眶俩,在不支持element.children的瀏覽器中篩選符合要求的孩子節(jié)點。

2.最開始我是使用childNodesList[i].tagName來篩選符合要求的節(jié)點的快鱼,后來發(fā)現(xiàn)注釋節(jié)點篩選失敗颠印,所以換了一種方式。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末抹竹,一起剝皮案震驚了整個濱河市线罕,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌柒莉,老刑警劉巖闻坚,帶你破解...
    沈念sama閱讀 217,826評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件沽翔,死亡現(xiàn)場離奇詭異兢孝,居然都是意外死亡,警方通過查閱死者的電腦和手機仅偎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3 395
  • 文/潘曉璐 我一進店門跨蟹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人橘沥,你說我怎么就攤上這事窗轩。” “怎么了座咆?”我有些...
    開封第一講書人閱讀 164,234評論 0 354
  • 文/不壞的土叔 我叫張陵痢艺,是天一觀的道長仓洼。 經(jīng)常有香客問我,道長堤舒,這世上最難降的妖魔是什么色建? 我笑而不...
    開封第一講書人閱讀 58,562評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮舌缤,結(jié)果婚禮上箕戳,老公的妹妹穿的比我還像新娘。我一直安慰自己国撵,他們只是感情好陵吸,可當我...
    茶點故事閱讀 67,611評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著介牙,像睡著了一般壮虫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上耻瑟,一...
    開封第一講書人閱讀 51,482評論 1 302
  • 那天旨指,我揣著相機與錄音,去河邊找鬼喳整。 笑死谆构,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的框都。 我是一名探鬼主播搬素,決...
    沈念sama閱讀 40,271評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼魏保!你這毒婦竟也來了熬尺?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,166評論 0 276
  • 序言:老撾萬榮一對情侶失蹤谓罗,失蹤者是張志新(化名)和其女友劉穎粱哼,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體檩咱,經(jīng)...
    沈念sama閱讀 45,608評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡揭措,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,814評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了刻蚯。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片绊含。...
    茶點故事閱讀 39,926評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖炊汹,靈堂內(nèi)的尸體忽然破棺而出躬充,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,644評論 5 346
  • 正文 年R本政府宣布充甚,位于F島的核電站以政,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏伴找。R本人自食惡果不足惜妙蔗,卻給世界環(huán)境...
    茶點故事閱讀 41,249評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望疆瑰。 院中可真熱鬧眉反,春花似錦、人聲如沸穆役。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽耿币。三九已至梳杏,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間淹接,已是汗流浹背十性。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留塑悼,地道東北人劲适。 一個月前我還...
    沈念sama閱讀 48,063評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像厢蒜,于是被迫代替她去往敵國和親霞势。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,871評論 2 354

推薦閱讀更多精彩內(nèi)容

  • Node類型 DOM1級定義了一個Node接口斑鸦,該接口由DOM中所有節(jié)點類型實現(xiàn)愕贡。這個Node接口在JS中是作為N...
    Maggie_77閱讀 420評論 0 0
  • 什么是DOM?巷屿?固以? DOM(Document Object Model 文檔對象模型)是針對HTML和XML文檔的...
    熒惑3_3閱讀 1,390評論 0 1
  • 原文 鏈接 關(guān)注公眾號獲取更多資訊 一、基本類型介紹 1.1 Node類型 DOM1級定義了一個Node接口嘱巾,該接...
    程序員poetry閱讀 3,935評論 7 34
  • “滿生浓冒,辛苦你了栽渴,又麻煩你跑一趟了尖坤∥壤粒”老人佝僂著身子看著男人,發(fā)皺的臉龐,滿是歲月的留痕场梆。 “陳婆墅冷,你腿腳不方便,...
    菌菇sama閱讀 728評論 2 5
  • 人都是從陌生到熟悉或油,從初見時的驚艷到相濡以沫最后有可能是分道揚鑣也有可能相守到老寞忿。當然,我想表達得這段關(guān)系的并不是...
    陽光de味道閱讀 639評論 3 1