我在学习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. C++笔记011：C++对C的扩展——变量检测增强

    原创笔记,转载请注明出处! 点击[关注],关注也是一种美德~ 在C语言中重复定义多个同名的变量是合法的,多个同名的全局变量最终会被链接到全局数据区的同一个地址空间上. 在C++中,不允许定义多个同名的 ...

  2. 06.升级git版本及命令学习

    博客为日常工作学习积累总结: 1.升级git版本: 参考博客:https://blog.csdn.net/yuexiahunone/article/details/78647565由于新的版本可以使用 ...

  3. 关于document.write()加载JS等静态资源 和 异步async加载JS

    现流行浏览器对于静态资源的预加载 传统的浏览器,对于静态资源加载,会阻塞 HTML 解析器的线程进行,无论内联还是外链. 例如: <script src="test1.js" ...

  4. SQL注入的浅尝辄止

    简单的说,SQL注入就是通过在前端页面输入SQL语句,导致系统暴露异常信息在前端页面显示,非法者通过这些异常信息获取数据库的相干信息,为攻击系统做准备.

  5. ORALCE表的约束条件

    一.主键:(PRIMARY KEY) 主键是表中的一列或多列.为表定义主键有如下几个作用: 1.主键包含的列不能输入重复的值,以此来保证一个表的所有行的唯一性: 2.主键也不允许定义此约束的列为NUL ...

  6. 【laravel】passport的scope作用域

    1.根据作用域生成token $user->createToken($request->name,['test1'])->accessToken; 2.注册中间件 'scopes' ...

  7. hiveserver2不能启动

    我的hiveserver2一直不能启动,命令行一直卡住不动,然后我就想是不是配置文件没有配置相关的参数,然后就来修改hive-site.xml 最终修改完后的hive-site.xml: <?x ...

  8. QP总体结构

    QP是一个基于事件驱动的嵌入式系统软件框架,其总体结构如下图. AO活动对象由事件队列和层次状态机两部分组成,每个AO占有一个优先级: QF量子框架由五个数据结构及操作组成,其数据结构采用了uCOS- ...

  9. django_ORM学生管理系统

    一.新建django项目准备工作 CMD新建项目命令:django-admin startproject [项目名称] pycharm的project目录里新建app命令:python manage. ...

  10. Python学习笔记五：字符串常用操作，字典，三级菜单实例

    字符串常用操作 7月19日,7月20日 ,7月22日,7月29日,8月29日,2月29日 首字母大写:a_str.capitalize() 统计字符串个数:a_str.count(“x”) 输出字符, ...