js中firstChild和childNodes[0]以及children[0]之间的点滴问题

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>js中firstChild和childNodes[0]以及children[0]之间的点滴问题</title></head><body><div id="div1"><p>pppppppppppppppp</p></div><script type="text/javascript">window.onload = function() {if (!document.getElementById("div1")) return false;var div1 = document.getElementById("div1");console.log(div1.firstChild);console.log(div1.firstChild.nodeType);console.log(div1.childNodes[0]);console.log(div1.childNodes[0].nodeType);console.log(div1.children[0]);console.log(div1.children[0].nodeType);console.log(document.getElementsByTagName("p")[0].firstChild.nodeValue);};</script></body>
</html>

运行结果入下：

分析：

从上面的代码以及运行结果可以看出，当使用上述三种方法去获取div1的第一个子元素（节点）的时候，本希望可以直接得到p元素，可是呢，三者的却出现了不一样的运行结果，firstChild和childNodes[0]的运行结果一样，都是将一个文本节点当做了div1的第一个子节点，这显然不是希望得到的结果，可是，这个文本节点是哪儿来的呢？原来，这两种方法都会将换行当做一个节点，即上面出现的文本节点。（从后面用firstChild打印p元素的节点值也可以看出，里面是包含了前后换行的）

而我们的children[0]的方法却显示出了“希望”的结果，是在与它的认知方式与前两个不一样，它只认识文档里面的HTML节点，而不会把换行也当做一个节点进行处理，即是说它是不认识文本节点的，所以，就可以得到元素节点p了。

分析过后，下面更改部分代码看看效果：

将

     <div id="div1"><p>pppppppppppppppp</p></div>

改为

<div id="div1"><p>pppppppppppppppp</p></div>

并将

console.log(document.getElementsByTagName("p")[0].firstChild.nodeValue);

改为

console.log(document.getElementsByTagName("p")[0].firstChild);
console.log(document.getElementsByTagName("p")[0].childNodes[0]);
console.log(document.getElementsByTagName("p")[0].children[0]);

再次运行可得如下结果：

由上可以看出，当把div里面的换行都去除之后，三种方式都可以得到“一致”（姑且认为一致）的运行结果，即都将p元素作为它们的第一节点。从后面的三行打印结果可以证实children是真不认识文本节点的。不过，需要注意的是，firstChild和childNodes才是标准的，而遗憾的是children不是标准的。

js中firstChild和childNodes[0]以及children[0]之间的点滴问题相关推荐

当小数遇上二进制——全面解析JS中的小数二进制计算（附赠0.1+0.2 !== 0.3问题解释）
二进制小数如何转换为十进制二进制转换十进制的方法是: 从二进制数的最低位开始,每一位乘以对应的2的幂数,然后将最终的结果小数部分与整数部分分别相加对应的2的幂,以个位为0,向高位依次增1,向地位依 ...
js中firstChild与firstElementChild及childNodes与children的区别
firstChild: 获取指定元素的第一个子节点 (包括元素节点和文本节点) . 若父元素与第一个子元素之间存在空白节点,firstChild 获取到的将是空白节点而不是第一个子元素.这时可以使用 ...
js中parentNode,parentElement,childNodes,children
首先了解parentNode,parentElement,childNodes,children四大属性之前,必须对Dom树有一定的了解,在Dom文档结构中,HTML页面每一部分都是由节点组成的,节点 ...
JS中使用offsetHeight 获取元素高度为0问题
今天再写代码时,要获取一个 ul 的高度,我就使用 offsetHeight ,但是获取出来的结果却是 0,试了好久,发现拼写语法都没有错,最后,发现是没有去除浮动问题,我 ul 里面的 li 使用 ...
js中的blob，图片base64URL，file之间的关系
js的base64编码和解码英文是这样的:// atob() 将base64解码 // btoa() 将字符串转码为base64 var str = 'javascript'; window.bto ...
js中preventDefault、stopPropagation、return false三者之间
2019独角兽企业重金招聘Python工程师标准>>> preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认 ...
js mysql json字符串转数组中_php数据库数据转换为js中的json对象
/ 1.在company数据user表中取出10条数据,保存为数组 2.在将数组转化为json格式,传递给js 3.用json解析器将传递过来的json字符串转化为json对象, 4.用documen ...
java有push方法么_[Java教程]js中push和join方法使用介绍
[Java教程]js中push和join方法使用介绍 0 2013-10-09 07:00:17 push和join方法想必大家并不陌生吧,在本文将为大家详细介绍下js中的push和join方法的使用 ...
深圳Web前端学习：js中的模块化--【千锋】
深圳Web前端学习:js中的模块化–[千锋] 0.前言我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的, ...

js中firstChild和childNodes[0]以及children[0]之间的点滴问题

js中firstChild和childNodes[0]以及children[0]之间的点滴问题相关推荐

最新文章

热门文章