快捷導(dǎo)航

JavaScript操作DOM元素的childNodes和children區(qū)別

更新時(shí)間：2015年04月01日 08:55:08 投稿：junjie

這篇文章主要介紹了JavaScript操作DOM元素的childNodes和children區(qū)別,本文直接給出測(cè)試代碼和運(yùn)行效果來(lái)講解它們之間的區(qū)別,需要的朋友可以參考下

對(duì)于DOM元素，children是指DOM Object類(lèi)型的子對(duì)象，不包括tag之間隱形存在的TextNode，而childNodes包括tag之間隱形存在的TextNode對(duì)象。

具體看一下針對(duì)children和childNodes在chrome環(huán)境下的測(cè)試：

<!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運(yùn)行結(jié)果:");
 for(i = 0; i < child.length; i++){
   console.log(child[i].tagName);
  }
 
 console.log("");
 child = o.childNodes;
 console.log("div1.childNodes運(yùn)行結(jié)果:");
 for(i = 0; i < child.length; i++){
   console.log(child[i].tagName);
  }
 
 }
 
 test();

</script>
</html>

測(cè)試結(jié)果如下：

 div1.children運(yùn)行結(jié)果:
 SPAN

 div1.childNodes運(yùn)行結(jié)果:
 undefined
 SPAN
 undefined

上面childNodes集合的結(jié)果中有兩個(gè)undefined節(jié)點(diǎn)，這連個(gè)就是nodeType=3的TextNode。

如果把HTML代碼寫(xiě)成如下樣式，那么children和childNodes的結(jié)果就沒(méi)有差別了。

<body>
 <div id="div1" class="div"><span id="s1" class="sp" lang="zh-cn"></span></div>
</body>

對(duì)document、head、body及div等HTML元素實(shí)測(cè)未發(fā)現(xiàn)有其他差異

您可能感興趣的文章:

相關(guān)文章

javascript實(shí)現(xiàn)商品圖片放大鏡
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)商品圖片放大鏡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
保證JavaScript和Asp、Php等后端程序間傳值編碼統(tǒng)一
在WEB開(kāi)發(fā)過(guò)程中，前后端要求數(shù)據(jù)編碼一致的處理是經(jīng)常會(huì)碰到的！
2009-04-04
js實(shí)現(xiàn)從左向右滑動(dòng)式輪播圖效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)從左向右滑動(dòng)式輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
如何在JavaScript中等分?jǐn)?shù)組的實(shí)現(xiàn)
這篇文章主要介紹了如何在JavaScript中等分?jǐn)?shù)組的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
js獲取URL的參數(shù)的方法(getQueryString)示例
getQueryString方法默認(rèn)返回的是 string如果是int類(lèi)型，則JS使用的時(shí)候，要進(jìn)行轉(zhuǎn)換一下，下面有個(gè)不錯(cuò)的示例，大家可以參考下
2013-09-09
js逆向解密之網(wǎng)絡(luò)爬蟲(chóng)
在本篇內(nèi)容里小編給大家整理的是關(guān)于js逆向解密之網(wǎng)絡(luò)爬蟲(chóng)的相關(guān)知識(shí)點(diǎn)內(nèi)容，需要的朋友們參考下。
2019-05-05
webpack4.0打包優(yōu)化策略整理小結(jié)
這篇文章主要介紹了webpack4.0打包優(yōu)化策略整理小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
小程序?qū)崿F(xiàn)上傳視頻功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)上傳視頻功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08
javascript事件冒泡詳解和捕獲、阻止方法
雖然精通jquery，但對(duì)它的原型javascript卻不是很了解，最近在學(xué)習(xí)javascript中遇到了一些困難，比如冒泡和捕獲，很多次被提到，但又不知究竟應(yīng)用在何處。找到了一些好文章解惑，在這里分享給大家
2014-04-04
JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)中對(duì)象的定義和繼承詳解
這篇文章主要介紹了JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)中對(duì)象的定義和繼承,結(jié)合實(shí)例形式詳細(xì)分析了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中對(duì)象定義、繼承、屬性、方法、深拷貝等相關(guān)概念與操作技巧,需要的朋友可以參考下
2019-07-07