＜Dom-批量添加事件＞

最新推荐文章于 2022-11-17 08:53:55 发布

好先生·

最新推荐文章于 2022-11-17 08:53:55 发布

阅读量250

点赞数 1

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

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

版权

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>
	<section id="app">
		<div>1
			<div>2
				<div>3
					<div>4
					</div>
				</div>
			</div>
		</div>
	</section>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<script type="text/javascript">
	//获取所有div 不管是何种嵌套关系都会获取到
		//divs是一个类数组
		var divs=document.getElementsByTagName('div');
		//遍历div
		for (var i=0; i < divs.length; i++) {
			//通过每一个索引访问
			console.log(divs[i].innerHTML);//1,2,3..,7
		}
	</script>
	<script type="text/javascript">
	//遍历特定标签下的所有标签
		var app=document.getElementById('app');
		//通过app元素结点寻找其内部的div元素
		var divs=app.getElementsByTagName('div');
		var a;
		for (i=0; i < divs.length; i++) {
			//通过每一个索引访问
			// console.log(divs[i].innerHTML);//1,2,3,4
			a=20*(i+1)+'px';
			// 批量添加属性
			divs[i].style.fontSize = a;
			
		}
		//批量绑定事件
		for (i=0; i < divs.length; i++) {
				//绑定事件
				divs[i].onclick = function() {
					window.console.log(i);//此时i是长度
				}
			}
	//打印的i全都是length的长度
		//解决方法
		//1.IIFE与闭包
		for (i=0; i < divs.length; i++) {
				//绑定事件
				    //让事件函数编程立即执行的函数表达式
				divs[i].onclick = (function(a) {
					return function() {
						console.log(a);//只打印对应点击的i
					}
				})(i+1)
			}
		//2.使用this
		//this会指向函数的调用者
		for (i=0; i<divs.length; i++) {
			
			divs[i].index=i+1;
			//绑定事件
			divs[i].onclick=function() {
				console.log(this.index);//this->调用者
			}

		}
		//3.元素内容与索引值等价
		for (i=0; i<divs.length; i++) {
			//绑定事件
			divs[i].onclick=function() {
				console.log(this.innerHTML);//this->调用者
			}

		}

	</script>
</body>
</html>

好先生·

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
＜Dom-批量添加事件＞

<!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> <section id="app"&gt..
复制链接

扫一扫