18、Dom--childNodes和nodeType的结合使用

最新推荐文章于 2024-05-13 13:37:50 发布

Bwz_Learning

最新推荐文章于 2024-05-13 13:37:50 发布

阅读量1k

点赞数 1

分类专栏： JavaScript_Bak 文章标签： childNodes nodeType

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51579756

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

1、DOM节点
. childNodes nodeType 两个一起使用,避免浏览器的差异
.获取子节点(第一级别的节点信息)
.IE获取的就是，标签节点的个数
.火狐和谷歌，获取的是标签节点和文本节点的个数
.children
. nodeType 1 标签节点
nodeType 3 文本信息

. parentNode 当前元素的父节点信息
.例子

点击连接,隐藏整个li信息

1.1、html代码

<body>
		<input id="oValue" />
		<button type="button" id="oBtn">点击</button>
		<ul id="oul">
			<li>111<a href="javascript:void(0);">删除</a></li>
			<li>222<a href="javascript:void(0);">删除</a></li>
			<li>333<a href="javascript:void(0);">删除</a></li>
			<li>444<a href="javascript:void(0);">删除</a></li>
		</ul>
</body>

1.2、JavaScript代码

<script type="text/javascript">
			//1、childNodes和nodeType 结合使用，处理 标签元素
			//	window.onload = function() {
			//		var oUl = document.getElementById("oul");
			//		var aNodes = oUl.childNodes;
			//		for (var i = 0; i < aNodes.length; i++) {
			//			if (aNodes[i].nodeType == 1) {
			//				aNodes[i].style.background = 'red';
			//		    }
			//		}
			//	}
			//2、 利用parentNode, 隐藏li元素节点
			window.onload = function() {
				var aA = document.getElementsByTagName("a");
				var oUl = document.getElementById("oul");
				for (var i = 0; i < aA.length; i++) {
					aA[i].onclick = function() {
						//在Ul里面,删除li节点
						//this.parentNode 就是li节点
						this.parentNode.style.display = "none";
					}
				}
			}
		</script>

Bwz_Learning

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
18、Dom--childNodes和nodeType的结合使用

1、DOM节点 . childNodes nodeType 两个一起使用,避免浏览器的差异 .获取子节点(第一级别的节点信息) .IE获取的就是，标签节点的个数 .火狐和谷歌，获取的是标签节点和文本节点的个数 .children . nodeType 1 标签节点 nodeType 3 文本信息
复制链接

扫一扫

专栏目录