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

蔚落 2022-08-23 00:45 127阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，127人围观）

还没有评论，来说两句吧...

相关阅读

相关节点的类型（nodeType）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

浅浅的花香味﹌/ 2024年04月20日 08:17/ 0 赞/ 58 阅读

相关 DOM nodetype属性

返回body元素的节点类型: document.body.nodeType; > nodeType 属性返回节点类型。 > > 如果节点是一个元素节点，nodeT

女爷i/ 2022年12月06日 04:17/ 0 赞/ 143 阅读

相关 HTML DOM的nodeType值

nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。 nodeName 属性含有某个节点的名称。元素节点的 nodeName 是

﹏ヽ暗。殇╰゛Y/ 2022年09月30日 11:56/ 0 赞/ 160 阅读

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

1、DOM节点 . childNodes nodeType 两个一起使用,避免浏览器的差异 .获取子节点(第一级别的节点信息) .IE获取

蔚落/ 2022年08月23日 00:45/ 0 赞/ 128 阅读

相关 Pattern和Matcher的结合使用

Pattern和Matcher java.lang.Object ————java.util.regex.Pattern publi

缺乏、安全感/ 2022年06月16日 06:06/ 0 赞/ 166 阅读

相关 DOM节点的nodeType和nodeValue

以下便是常用的一些节点类型。数值常量和字符常量便是节点的nodeType属性 <table style="border-spacing:0px;color:rgb(36,41

左手的ㄟ右手/ 2022年05月21日 01:11/ 0 赞/ 201 阅读

相关 js nodeType

js nodeType > nodeType 属性可用来区分不同类型的节点，比如元素, 文本和注释。节点类型常量 <table> <thead>

浅浅的花香味﹌/ 2022年04月23日 05:56/ 0 赞/ 165 阅读

相关节点常量 nodeType

> nodeType属性可被用于区分不同类型的节点，以使得elements，text和comments <table> <thead> <tr> <th>不

古城微笑少年丶/ 2022年04月15日 00:14/ 0 赞/ 185 阅读

相关 SparkSQL和Alluxio结合使用

1.先在hive配置文件中增加alluxio相关配置，然后再安装hive 修改配置文件 playbooks/hive/vars.yml: alluxio

ゞ浴缸里的玫瑰/ 2021年09月28日 23:50/ 0 赞/ 511 阅读

相关 Presto和Redis结合使用

官方文档：[https://prestodb.io/docs/current/connector/redis.html][https_prestodb.io_docs_curr

柔情只为你懂/ 2021年09月28日 23:40/ 0 赞/ 618 阅读