JavaScript：childNodes、nodeType和children

按照以前的知识，如果问下面的ul有多少个子节点，答案大多是4个

<ul id='ul1'>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

在html中，却是9个，因为每个标签外的区域都可以放文本，文本在这儿称为文本节点。直观显示如下，文本节点存放的内容依次是hello yes you are here。<li> <div>等标签构成的节点称为元素节点。

<ul id='ul1'>hello
	<li></li>yes
	<li></li>you
	<li></li>are
	<li></li>here
</ul>

运行下面的代码检验一下

<!DOCTYPE html>
<html>
<head>
	<title>jjjj</title>
</head>
<script type="text/javascript">
	window.onload = function(){
		var oUl = document.getElementById('ul1');
		alert("ul的子节点是："+oUl.childNodes.length+"个");
	}
</script>
<body>
<ul id='ul1'>hello
	<li></li>yes
	<li></li>you
	<li></li>are
	<li></li>here
</ul>
</body>
</html>
运行结果

文本节点和元素节点用nodeType加以区分，文本节点的nodeTypen值为3，元素节点的nodeType值为1。如判断上述子节点类型，并且将元素节点的背景设置为红色，主要代码

		var oUl = document.getElementById('ul1');
		for (var i = oUl.childNodes.length - 1; i >= 0; i--) {
			if (oUl.childNodes[i].nodeType == 1) {
				oUl.childNodes[i].style.backgroundColor = 'red';
			}
		}

完整示例

<!DOCTYPE html>
<html>
<head>
	<title>hello js</title>
<style type="text/css">
	div{
		width: 100px;
		height: 30px;
	}
</style>
<script type="text/javascript">
	window.onload = function(){
		var oUl = document.getElementById('ul1');
		alert("ul的子节点是："+oUl.childNodes.length+"个。节点类型为："+oUl.childNodes[0].nodeType+'和'+oUl.childNodes[1].nodeType);
		for (var i = oUl.childNodes.length - 1; i >= 0; i--) {
			if (oUl.childNodes[i].nodeType == 1) {
				oUl.childNodes[i].style.backgroundColor = 'red';
			}
		}
	}
</script>
</head>

<body>
<ul id='ul1'>hello
	<li></li>yes
	<li></li>you
	<li></li>are
	<li></li>here
	<div></div>
</ul>
</body>
</html>

最后，如果使用children而不是childNodes，那么不会把文本节点算进去，只计算元素节点。不管是children还是childNodes，都只认第一层的节点。下面<ul>下的节点，只有3个

<ul id='ul1'>
	<li>
            <span>hello</span>
        </li>
	<li></li>
	<li></li>
<ul>

 

posted @ 2020-02-08 21:51  昨夜昙花  阅读(21)  评论(0)    收藏  举报