我在学习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. 复习宝典之Maven项目管理

    查看更多宝典,请点击<金三银四,你的专属面试宝典> 第二章:Maven项目管理 Maven是基于项目对象模型(POM project object model),可以通过一小段描述信息(配 ...

  2. CentOS7.5二进制安装MySQL-5.6.40

    安装依赖 yum install -y gcc gcc-c++ automake autoconf yum -y install cmake bison-devel ncurses-devel lib ...

  3. multiprocessing中进程池，线程池的使用

    multiprocessing 多进程基本使用 示例代码1 import time import random from multiprocessing import Process def run( ...

  4. 慎使用sql的enum字段类型

    在sql的优化中,会有同学提到一点:使用enum字段类型,代替其他tinyint等类型.以前这也是不少人喜欢优化的,但是现在细想,是非常不合理的. 优点: 1.可以设置区间范围,比如设置性别:1男2女 ...

  5. FileBeats安装

    FileBeats安装 FileBeats官方下载链接: https://www.elastic.co/downloads/beats/filebeat 也可以直接使用以下命令下载(文章下载目录一概为 ...

  6. python3的下载与安装

    python3的下载与安装 1.首先,从Python官方网站:http://python.org/getit/ ,下载Windows的安装包 ython官网有几个下载文件,有什么区别?Python 3 ...

  7. 简单复习一下ArrayList的扩容原理

    刚刚跟几个好朋友喝完小酒回家,简单大概复习一下ArrayList的扩容原理,由于头有点小晕,就只大概说一下扩容的原理哈: 首先ArrayList实现了List接口,继承了AbstractList,大家 ...

  8. 浅谈ConcurrentHashMap实现原理

    我们都知道HashTable是线程安全的类,因为使用了Synchronized来锁整张Hash表来实现线程安全,让线程独占: ConcurrentHashMap的锁分离技术就是用多个锁来控制对Hash ...

  9. 20155335 俞昆 2016-2017-2 《Java程序设计》第九周学习总结

    学号 2016-2017-2 <Java程序设计>第九周学习总结 ##JDBC入门 在正式介绍JDBC前,已知JDBC是用来执行SQL的解决方案,开发人员使用JDBC的标准接口,开发人员不 ...

  10. 重庆Uber优步司机奖励政策

    获得任何奖励的前提条件:当周接单率80%以上,当周乘客评分4.5分以上,且无刷单等欺诈行为. 滴滴快车单单2.5倍,注册地址:http://www.udache.com/如何注册Uber司机(全国版最 ...