我在学习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. 『ACM C++』 Codeforces | 1066B - Heaters

    今日不写日感,直接扔上今日兴趣点: 新研究称火星曾经有一个巨大的地下水系统 链接:https://mbd.baidu.com/newspage/data/landingsuper?context=%7 ...

  2. 【2015 ICPC亚洲区域赛长春站 G】Dancing Stars on Me（几何+暴力）

    Problem Description The sky was brushed clean by the wind and the stars were cold in a black sky. Wh ...

  3. 如何创建systemd定时任务

    1. 如何创建一个定时任务,通过systemd系统 1. 如何创建一个定时任务,通过systemd系统 1.1. systemd中的timer 1.2. 自定义定时任务 1.2.1. 具体步骤 1.2 ...

  4. 学习 Linux_kernel_exploits 小记

    Linux_kernel_exploits+ 功能:自动生成UAF类型漏洞exp文件的工具,目前缺少文档介绍,可以参考test文件下的使用实例,但是源码中缺少dataflowanalyzer模块+ 相 ...

  5. 生产环境MySQL数据库集群MHA上线实施方案

    生产环境MySQL数据库集群MHA上线实施方案 一．不停库操作 1.在所有节点安装MHAnode所需的perl模块(需要有安装epel源) yum install perl-DBD-MySQL -y ...

  6. 前端jQuery实现瀑布流

    瀑布流是我们经常会见到的东西,一直刷新一直有,其实它实现起来是很简单的.具体代码如下 1.css代码 <style> *{ margin:; padding:; } .container{ ...

  7. python网络编程之协程

    本节的主题是基于单线程来实现并发,即只用一个主线程(很明显可利用的cpu只有一个)情况下实现并发,为此我们需要先回顾下并发的本质:切换+保存状态 cpu正在运行一个任务,会在两种情况下切走去执行其他的 ...

  8. java 异常与捕获

    几乎所有的代码里面都会出现异常,为了保证程序在出现异常之后可以正常执行完毕,就需要进行异常处理. 先来看一下异常的继承类结构: 所有的异常都是由Throwable继承而来,我们来看他下面的两个子类Er ...

  9. 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。

    自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...

  10. NoSQL入门第四天——事务与主从复制

    一.Redis的事务 1.是什么 可以一次执行多个命令,本质是一组命令的集合.一个事务中的 所有命令都会序列化,按顺序地串行化执行而不会被其它命令插入,不许加塞 (更多请参见官网事务介绍) 2.能干什 ...