JavaScript中childNodes和children的區(qū)別

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <div id="div1" class="div">
 <span id="s1" class="sp" lang="zh-cn">
 </span>
 </div>
</body>
<script type="text/javascript">
 function test() {
 var o = document.getElementById("div1");
 var child = o.children;
 console.log("div1.children運行結(jié)果:");
 for(i = 0; i < child.length; i++){
   console.log(child[i].tagName);
  } 
 console.log("");
 child = o.childNodes;
 console.log("div1.childNodes運行結(jié)果:");
 for(i = 0; i < child.length; i++){
   console.log(child[i].tagName);
  }  
 } 
 test(); 
</script>
</html>
div1.children運行結(jié)果:
SPAN
 
div1.childNodes運行結(jié)果:
undefined
SPAN
undefined

1.childNodes返回的是節(jié)點的子節(jié)點集合狞甚,包括元素節(jié)點、文本節(jié)點還有屬性節(jié)點裂允,所以上面代碼中,兩個undefined其實是元素節(jié)點后面跟的回車符哥艇,默認為一個文本節(jié)點绝编。
2.children返回的只是節(jié)點的元素節(jié)點集合,所以返回的只有span元素貌踏。
所以在判斷是否有子節(jié)點的時候要注意..盡量使用children吧
3.也可以使用hasChildNodes方法來判斷,但是要注意如果節(jié)點下有回車符之類的,hasChildNodes也會判定存在節(jié)點..

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末十饥,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子祖乳,更是在濱河造成了極大的恐慌逗堵,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,692評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件眷昆,死亡現(xiàn)場離奇詭異蜒秤,居然都是意外死亡,警方通過查閱死者的電腦和手機亚斋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評論 3 392
  • 文/潘曉璐 我一進店門作媚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人帅刊,你說我怎么就攤上這事纸泡。” “怎么了赖瞒?”我有些...
    開封第一講書人閱讀 162,995評論 0 353
  • 文/不壞的土叔 我叫張陵女揭,是天一觀的道長蚤假。 經(jīng)常有香客問我,道長吧兔,這世上最難降的妖魔是什么勤哗? 我笑而不...
    開封第一講書人閱讀 58,223評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮掩驱,結(jié)果婚禮上芒划,老公的妹妹穿的比我還像新娘。我一直安慰自己欧穴,他們只是感情好民逼,可當我...
    茶點故事閱讀 67,245評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著涮帘,像睡著了一般拼苍。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上调缨,一...
    開封第一講書人閱讀 51,208評論 1 299
  • 那天疮鲫,我揣著相機與錄音,去河邊找鬼弦叶。 笑死俊犯,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的伤哺。 我是一名探鬼主播燕侠,決...
    沈念sama閱讀 40,091評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼立莉!你這毒婦竟也來了绢彤?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,929評論 0 274
  • 序言:老撾萬榮一對情侶失蹤蜓耻,失蹤者是張志新(化名)和其女友劉穎茫舶,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體刹淌,經(jīng)...
    沈念sama閱讀 45,346評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡饶氏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,570評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了芦鳍。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嚷往。...
    茶點故事閱讀 39,739評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖柠衅,靈堂內(nèi)的尸體忽然破棺而出皮仁,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,437評論 5 344
  • 正文 年R本政府宣布贷祈,位于F島的核電站趋急,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏势誊。R本人自食惡果不足惜呜达,卻給世界環(huán)境...
    茶點故事閱讀 41,037評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望粟耻。 院中可真熱鬧查近,春花似錦、人聲如沸挤忙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽册烈。三九已至戈泼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間赏僧,已是汗流浹背大猛。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留淀零,地道東北人挽绩。 一個月前我還...
    沈念sama閱讀 47,760評論 2 369
  • 正文 我出身青樓,卻偏偏與公主長得像窑滞,于是被迫代替她去往敵國和親琼牧。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,647評論 2 354

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

  • 前言:盡管現(xiàn)在有很多優(yōu)秀的框架哀卫,大大簡化了我們的DOM操作,但是我們?nèi)匀灰獙W好DOM知識來寫原生JS撬槽,從根本上去理...
    長鯨向南閱讀 1,869評論 0 0
  • 第3章 基本概念 3.1 語法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,124評論 0 21
  • 基本概念 DOM DOM 是 JavaScript 操作網(wǎng)頁的接口此改,全稱為“文檔對象模型”(Document Ob...
    許先生__閱讀 859評論 0 1
  • ??DOM(文檔對象模型)是針對 HTML 和 XML 文檔的一個 API(應用程序編程接口)共啃。 ??DOM 描繪...
    霜天曉閱讀 3,644評論 0 7
  • 1 什么是DOM 文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對文檔的結(jié)構(gòu)化的表述暂题,并定義...
    YyzclYang閱讀 1,745評論 0 0