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

面向对象面向君

于 2017-03-11 16:41:12 发布

阅读量7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript firstChild childNodes children

本文链接：https://blog.youkuaiyun.com/Mr_28/article/details/61420473

本文探讨了JavaScript中firstChild、childNodes[0]和children[0]在获取元素第一个子节点时的区别。在包含换行的情况下，firstChild和childNodes[0]会将换行视为文本节点，而children[0]则忽略文本节点，直接获取HTML元素节点。去除换行后，三种方法都能正确获取第一个元素节点。需要注意，children属性虽方便但并不标准，标准方法为firstChild和childNodes。

示例：

<!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>

运行结果入下：