childNodes和children的区别

最新推荐文章于 2023-08-26 11:28:14 发布

我不是攻城狮

最新推荐文章于 2023-08-26 11:28:14 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/lyyCSDNBLOG/article/details/73380950

JavaScript 专栏收录该内容

6 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>children 和  childnodes的区别</title>
		<script type="text/javascript">
			window.onload = function(){
				
				
				document.getElementById("btn1").οnclick=function(){
					var tab = document.getElementsByName("tab")[0];
					alert(tab.nodeName);
					var tbody = tab.childNodes[3];
					alert(tbody.nodeName);
					var tr = tbody.childNodes[1];
					alert(tr.nodeName);
					var td1 = tr.childNodes[1];
					alert(td1.nodeName);
					document.getElementById("in1").value=td1.innerHTML;
				}
				
				document.getElementById("btn2").onclick = function(){
					var tab = document.getElementsByName("tab")[0];
					alert(tab.nodeName);
					var tbody = tab.children[1];
					alert(tbody.nodeName);
					var tr = tbody.children[0];
					alert(tr.nodeName);
					var td = tr.children[0];
					alert(td.nodeName);
					document.getElementById("in2").value=td.innerHTML;
				}
				
				//结论：
				//childNodes和children计算子节点的区别在于：
				//childNodes计算空白子节点
				//而children计算的时候不包括子节点，只包含标签节点
			}
			
		
				
			
			
		</script>
	</head>
	<body>
		
		children 和  childnodes的区别
		<table border="1"  name = "tab">
			<thead>
				<tr>
					<td>thead1</td>
					<td>thead2</td>
					<td>thead3</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td> tbody1</td>
					<td> tbody2</td>
					<td> tbody3</td>
				</tr>
				<tr>
					<td>tbody4</td>
					<td>tbody5</td>
					<td>tbody6</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td>tfoot7</td>
					<td>tfoot8</td>
					<td>tfoot9</td>
				</tr>				
			</tfoot>
		</table>
		<input id="btn1" type="button" value="使用childnodes获取第二行第一个格子"/>
		<input id="in1" type="text"/>
		
		<input id="btn2" type="button" value="使用children获取第二行第一个格子"/>
		<input id="in2" type="text"/>
		
		
	</body>
</html>