＜Dom-节点类型＞

最新推荐文章于 2023-02-06 10:36:24 发布

好先生·

最新推荐文章于 2023-02-06 10:36:24 发布

阅读量92

点赞数

分类专栏： Dom操作文章标签： dom

本文链接：https://blog.csdn.net/weixin_45540964/article/details/111830534

版权

Dom操作专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
		hello,heslay
		<div class="one"></div>
		<!-- this a note -->
	</div>
	<script type="text/javascript">
		var app = document.getElementById('app');
		// 元素也是节点
		console.log(app.nodeType);
		console.log(document.nodeType);
		//查看节点个数
		//childNodes是一个类数组
		alert(app.childNodes.length);
		//存在换行符会转成文本节点,显示值=5
		//查看每一个节点
		for (var i=0; i < app.childNodes.length; i++) {
			console.log(app.childNodes[i]);
		}
		//定义正则
		var reg = /^\s*$/;
		//解决浏览器兼容性问题,让所有浏览器不显示换行符出现的节点
		function getNodes(dom) {
			//返回节点
			var arr=[];
			for (i=0; i< dom.childNodes.length; i++) {
				//过滤掉文本中的换行符
				if(dom.childNodes[i].nodeType === 3) {
					if (!reg.test(dom.childNodes[i].data)) {
						arr.push(dom.childNodes[i]);
					}
				} else {
					arr.push(dom.childNodes[i]);
				}
			}
			return arr;
		}
		console.log(getNodes(app));
	</script>
</body>
</html>