js object children childNodes

最新推荐文章于 2023-04-24 10:37:57 发布

spencer_tseng

最新推荐文章于 2023-04-24 10:37:57 发布

阅读量280

点赞数

分类专栏： js-flex

本文链接：https://blog.csdn.net/spencer_tseng/article/details/112586739

版权

js-flex 专栏收录该内容

98 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
/*--------------------------------+
http://127.0.0.1:8089/PrjJsp/menu_tab_02/zwf_test_children.html

@author ZengWenfeng
@date 2019.10.28
+--------------------------------*/
	window.onload = function()
	{
		var oUl = document.getElementById("ul");
		var span1 = document.getElementById("span1");
		var span2 = document.getElementById("span2");
		var span3 = document.getElementById("span3");
		var sum = 0;
		
		span1.innerHTML = oUl.children.length + "";
		span2.innerHTML = oUl.childNodes.length + "";
		
		for (var i = 0; i < oUl.children.length; i++)
		{
			debugger;
			var obj = oUl.children[i];
			console.log(obj);
			console.trace(obj.id);
		}
		
		for (var i = 0; i < oUl.childNodes.length; i++)
		{
			debugger;
			var obj = oUl.childNodes[i];
			console.log(obj);
// 			console.trace(o);
			
			if (obj.nodeType == 1)
			{
				sum++;
			}
		}
		
		span3.innerHTML = sum + "";

	}
</script>
</head>
<body>
	<ul id="ul">
		<li id="li_01">aaa</li>
		<li id="li_02">bbb</li>
	</ul>
	children显示的节点数：<span id="span1"></span>
	<br /> 
	chileNodes显示的节点数：<span id="span2"></span>
	<br />
	nodeType为1的节点数：<span id="span3"></span>
	<br />
</body>
</html>

=================

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
/*--------------------------------+
http://127.0.0.1:8089/PrjJsp/menu_tab_02/zwf_test_children.html

@author ZengWenfeng
@date 2019.10.28
+--------------------------------*/
	window.onload = function()
	{
		var oUl = document.getElementById("ul");
		var span1 = document.getElementById("span1");
		var span2 = document.getElementById("span2");
		var span3 = document.getElementById("span3");
		var sum = 0;
		
		span1.innerHTML = oUl.children.length + "";
		span2.innerHTML = oUl.childNodes.length + "";
		
		for (var i = 0; i < oUl.children.length; i++)
		{
			debugger;
			var obj = oUl.children[i];
			console.log(obj);
			console.trace(obj.id);
		}
		
		for (var i = 0; i < oUl.childNodes.length; i++)
		{
			debugger;
			var obj = oUl.childNodes[i];
			console.log(obj);
// 			console.trace(o);
			
			if (obj.nodeType == 1)
			{
				sum++;
			}
		}
		
		span3.innerHTML = sum + "";

	}
</script>
</head>
<body>
	<ul id="ul"><li id="li_01">aaa</li><li id="li_02">bbb</li></ul>
	
	
	children显示的节点数：<span id="span1"></span>
	<br /> 
	chileNodes显示的节点数：<span id="span2"></span>
	<br />
	nodeType为1的节点数：<span id="span3"></span>
	<br />
</body>
</html>

=================

他们的区别在于书写的不同导致空白处TEXT：

------------------------

spencer_tseng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js object children childNodes

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title.
复制链接

扫一扫