071|获取子节点

最新推荐文章于 2022-11-04 22:40:33 发布

Asteroid 325

最新推荐文章于 2022-11-04 22:40:33 发布

阅读量210

点赞数

本文链接：https://blog.csdn.net/weixin_43846020/article/details/107816578

版权

JS 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>071获取子节点</title>
		<script>
			/*
			以下5个属性都包含文本节点
			   childNodes 访问当前节点下所有的节点
			   firstChild  访问子节点中的首位
			   lastChild 访问字节点的最后一位
			   nextSibling  访问当前节点兄弟节点中的下一个节点
			   previousSibling  访问当前节点兄弟节点中的上一个节点
			   
			   【注】下述这些方法只获取子节点中的元素节点(IE8以上)
			   children 
			   firstElementChild
			   lastElementChild
			   nextElementChild
			   previousElementSibling
			   
			   nodeType  nodeName  nodeValue
	元素节点    1          标签名     null
	属性节点    2          属性名     属性值
	文本节点    3          #text     文本内容
 			*/
		   window.onload=function(){
			   var oDiv=document.getElementById("div1");
			   //将body里的元素缩进试试,放在一行没有空格和回车
			   alert(oDiv.childNodes);//[object NodeList]
			   alert(oDiv.childNodes.length);//3
			   alert(oDiv.childNodes[0].nodeName);//EM
			   alert(oDiv.childNodes[1].nodeValue);//div文本
			   alert(oDiv.childNodes[2].nodeValue);//null
			   	   
				   
			  alert(oDiv.firstChild.nodeName);//EM
			  alert(oDiv.lastChild.nodeName);//STRONG
			  
			  //空格，回车，换行：看不见，是字符
			  //将body里的元素取消缩进试试,回车
			  alert(oDiv.childNodes.length);//5
			
			for(var i=0;i<oDiv.childNodes.length;i++){
				alert(oDiv.childNodes[i].nodeType);//3 1 3 1 3
			}
			/*
			 将纯文本的文本节点删除
			*/
		   alert(oDiv.children.length);//2
		   alert(oDiv.firstElementChild.nodeName);//EM
		   alert(oDiv.lastElementChild.nodeName);//STRONG
		   
		   alert(oDiv.firstElementChild.nextSibling.nodeValue);//  """"div文本""""
		   alert(oDiv.firstElementChild.nextElementSibling.nodeName);//STRONG
		   
  		   }
		</script>
	</head>
	<body>
		<div id="div1">
			<em>em文本</em>
			div文本
			<strong>strong文本</strong>
			</div>
	</body>
</html>