在JS中获取元素子节点时候，使用childNode()遇到了一些问题，找了一些资料总结如下。

首先，用于测试先规定好HTML：

<div><p><span></span><span></span><span></span></p><div></div>
</div>

1 childNode

var node = document.getElementsByTagName("div")[0].childNodes;
document.write(node[0].nodeName+"<br/>");
document.write(node[1].nodeName);

打印出来内容的第一个是 #text，原本以为获取的是第一个子节点p，然而得出的是 #text，可以查一下文本节点的 nodeName 是 #text，空白符 / 回车符都属于文本节点，<div>和<p>之间有一个回车，所以使用childNode方法想获取第一个子节点就有问题了。

2 firstChild

该方法本质上和childNode一样，它只是在父节点<div>基础上直接获取它的第一个子节点，在没有改变HTML结构的情况下，得出的结果还是 #text。

var node = document.getElementsByTagName("div")[0];
document.write(node.firstChild.nodeName);

3 firstElementChild

为了解决获取第一个子节点时会被空白符 / 回车符干扰的问题，使用firstElementChild可以有效获取到父元素的第一个子元素节点，是元素节点哦，空白符 / 回车符都是文本节点。

var node = document.getElementsByTagName("div")[0];
document.write(node.firstElementChild.nodeName);

得出的结果有效的获取到了原本想要的 p。

4 children

然而firstElementChild使用中会有兼容问题，在IE6 7 8中是没有这个方法，因此呢，出现了children方法，它可以兼容所有浏览器。但是，需要注意的一点，children返回的结果是一个数组。

var node = document.getElementsByTagName("div")[0];
document.write(node.children[0].nodeName);

得出的结果也有效的获取到了原本想要的 p，在改变children[1]，可以获取到DIV。

关注我吧

关注「前端一起学」公众号，看着项目进阶学习，让我们一起学前端，一起进步。

JS中childNodes,firstChild,firstElementChild和children使用分析相关推荐

js中childNodes易错点、详解定义以及用法
js中childNodes易错点.详解定义以及用法最近学习的时候,我遇到了childNodes的一些问题,我查阅了一些资料,总结一下其定义及用法.在学习childNodes之前,我们需要先了解一下D ...
node.js中exports与module.exports的区别分析
前言关于Node.js中的exports和module.exports,很多时候都比较容易让人混淆,弄不清楚两者间的区别.那么我们就从头开始理清这两者之间的关系. 来源在开发Node.js应用的时 ...
js中childNodes为什么输出#text：childNodes详解
转载原创地址:http://www.cnblogs.com/Jersen/p/4908943.html 定义和用法 childNodes 属性返回节点的子节点集合,以 NodeList 对象. 提示: ...
JS几种数组遍历方式以及性能分析对比
前言这一篇与上一篇 JS几种变量交换方式以及性能分析对比属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比起由在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得 ...
js中firstChild和childNodes[0]以及children[0]之间的点滴问题
示例: <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
javascript中childNodes与children 区别以及firstChild与firstElementChild区别
1:childNodes属性: 标准的,它返回指定元素的子元素集合,包括html节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属 ...
js中当等于最小值是让代码不执行_JavaScript中最最基础的知识点
JavaScript 中有很多很常用的也很基础的知识点需要我们牢牢记住,倒背如流,这样在开发的时候才能得心应手. 本文主要总结了DOM,Array,String,Math的一些常用方法,还有一些JS编 ...
JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前言絮叨絮叨这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
JS学习笔记六：js中的DOM操作
1. JS学习笔记六:js中的DOM操作文章目录 1. JS学习笔记六:js中的DOM操作 1.1. 获取Dom节点 1.2. 元素属性的操作方式 1.3. DOM节点的创建.插入和删除 1.4. ...

JS中childNodes,firstChild,firstElementChild和children使用分析