我在学习JavaScript对DOM操作的过程中，发现了使用childNodes属性，得不到我想要的结果，因此我就从JavaScript高级程序设计中了解了childNodes和children的区别。

首先来看一下一下代码

<!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运行结果:");

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

   console.log(child[i].tagName);

  }

 console.log("");

 child = o.childNodes;

 console.log("div1.childNodes运行结果:");

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

   console.log(child[i].tagName);

  }

 }

 test();

</script>

</html>

测试的结果是

div1.children运行结果:

SPAN

div1.childNodes运行结果:

undefined

SPAN

undefined

之所以会出现以上的情况是因为

  • childNodes返回的是节点的子节点集合，包括元素节点、文本节点还有属性节点，所以上面代码中，两个undefined其实是元素节点后面跟的回车符，默认为一个文本节点。
  • children返回的只是节点的元素节点集合，所以返回的只有span元素。

JavaScript中childNodes和children的区别的更多相关文章

  1. Javascript 中childNodes和children的区别

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. javascript中childNodes与children的区别

    1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...

  3. JavaScript中childNodes、children、nodeValue、nodeType、parentNode、nextSibling详细讲解

    其中属性.元素(标签).文本都属于节点 <title></title> <scripttype="text/javascript"> windo ...

  4. js表单验证处理和childNodes 和children 的区别

    一.对提交表单进行空值验证 html代码: <form action="#"onsubmit="return validate_form(this);" ...

  5. JavaScript中:表达式和语句的区别

    JavaScript中:表达式和语句的区别 Javascript语言精粹:表达式是由运算符构成,并运算产生结果的语法结构.程序是由语句构成,语句则是由“:(分号)”分隔的句子或命令.如果在表达式后面加 ...

  6. JavaScript中Element与Node的区别，children与childNodes的区别

    关于Element跟Node的区别,cilldren跟childNodes的区别很多朋友弄不清楚,本文试图让大家明白这几个概念之间的区别. Node(节点)是DOM层次结构中的任何类型的对象的通用名称 ...

  7. Javascript中setTimeout和setInterval的区别和使用

    在javascript中,window对象有两个主要的定时方法,分别是setTimeout 和 setInterval,其语法基本上相同,但是完成的功能取有区别. setTimeout方法是定时程序, ...

  8. JavaScript 中 Property 和 Attribute 的区别详解

    property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但实际上,二者是不同的东西,属于不同的范畴. property ...

  9. javascript中typeof与instanceof的区别

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前 ...

随机推荐

  1. MySQL数据库 : 基本语句

    mysql -uroot -p 登陆数据库 select now(); 显示当前时间 \q 退出 show databases; 显示数据库 create database 数据库名 charset= ...

  2. cut 的用法

    cut 文件内容查看 显示行中的指定部分,删除文件中指定字段 显示文件的内容,类似于下的type命令. 说明 该命令有两项功能,其一是用来显示文件的内容,它依次读取由参数file所指明的文件,将它们的 ...

  3. Array方法学习小结

    原生js forEach()和map()遍历 A:相同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...

  4. 安装 vue-devtools

    1. github下载 vue-devtools: git clone https://github.com/vuejs/vue-devtools 2. node install 安装包 3. vi ...

  5. 课时133.margintop失效原因（理解）

    我们之前讲过如果只有子元素设置了margin top而父元素没有边框则会跟着被顶下来的. 而我们怎么解决这个问题呢? 就是给父元素设置一个边框 而为什么我们在第二个浮动的盒子设置边框没有用呢?应为第一 ...

  6. PHP实现长网址与短网址

    原文地址:http://www.qqdeveloper.com/detail/29/1.html 什么是长链接.短链接 顾名思义,长链接就是一个很长的链接:短链接就是一个很短的链接.长链接可以生成短链 ...

  7. PHP curl 携带cookie请求抓取源码，模拟登陆。

    公司需要采集一批手机号码,有指定网站.但是需要登陆后才能看到客户号码,手动点击复制太慢,如此就写了以下模拟登陆采集号码程序,分享给大家参考参考. function request_url_data($ ...

  8. python3 安装pyhanlp方法

    直接pip install pyhanlp的时候会提示缺少Microsoft Visual c++环境, 其实没有Microsoft Visual c++环境也是可以的, 可以先安装jpype1,然后 ...

  9. c语言中：strlen和sizeof的区别和它们分别交换各自作用领域（\0问题）时的细微差别！！！

    本人c语言初学菜鸟一枚,今天通过敲了一段简单代码,发现strlen和sizeof之间的一些关系,总结如下: 用strlen计算数组长度要考虑进去\0 用sizeof计算字符串长度也要考虑进去\0 而s ...

  10. Chrome浏览器保存微信公众号文章中的图片

    用chrome浏览器打开微信公众号文章中时,另存为图片时保存的是640.webp,不是图片本身,用IE则没有此问题.大部分chrome插件也无法保存图片. 经过多番尝试,找到一款插件可以批量保存微信公 ...