我在学习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. centos6，python3，通过pip安装pycurl出现报错提示

    Centos6.7系统,python3.6.7,通过 pip 安装pycurl出现报错: __main__.ConfigurationError: Could not run curl-config: ...

  2. jQuery关于复选框的基本小功能

    这里是我初步学习jquery后中巨做的一个关于复选框的小功能: 点击右边选项如果勾上,对应的左边三个小项全部选中,反之全不选, 左边只要有一个没选中,右边大项就取消选中,反之左边全部选中的话,左边大项 ...

  3. SQL Server 2012 - 开窗函数

    -- 开窗函数:在结果集的基础上进一步处理(聚合操作) -- Over函数,添加一个字段显示最大年龄 SELECT * , MAX(StuAge) OVER ( ) MaxStuAge FROM db ...

  4. js实现所有异步请求全部加载完毕后，loading效果消失

    在实际开发中,一定有情况是这样的,一个页面我们有多个地方请求了ajax,在这种情况下,我们要实现数据没来之前出现我们炫酷的loading效果,而且要等到所有的ajax都请求完毕后,才让我们的loadi ...

  5. PHP Mysql字符集utf8mb4支持Emoji表情

    项目开发中经常会遇到用户在评论或者发表文章的时候会打一些表情在里面,如果我们在开发中不去做一些处理的话,表情会出不来的,甚至是报错,下面简单介绍处理方式.原文地址:小时刻个人博客:http://sma ...

  6. hadoop生态搭建（3节点）-16.elk配置

    # ==================================================================ELK环境准备 # 修改文件限制 # * 代表Linux所有用户 ...

  7. Python的scrapy之爬取链家网房价信息并保存到本地

    因为有在北京租房的打算,于是上网浏览了一下链家网站的房价,想将他们爬取下来,并保存到本地. 先看链家网的源码..房价信息 都保存在 ul 下的li 里面 ​ 爬虫结构: ​ 其中封装了一个数据库处理模 ...

  8. 使用C语言协助办公_02批量修改学生信息

    最新录制了一个使用C语言批量修改学生信息的视频,主要是讲了如何处理文件路径以及批量修改的思路.灵感来源于需要将整个17级社保照片按规格改名字.具体见:https://chuanke.baidu.com ...

  9. 反射vs简单工厂模式

    interface Computer { void printpc(); } class lenovo implements Computer { @Override public void prin ...

  10. tensorflow简单实现卷积前向过程

    卷积,说白了就是对应位置相乘再求和,卷积操作用广泛应用于图像识别,在自然语言处理中也开始应用,用作文本分类问题. 卷积操作最重要的部分就是卷积核或者说过滤器 1.常用过滤器尺寸为3*3或者5*5 2. ...