一、getElementsByTagName就是通过标签名得到元素,得到的是页面上所有的该标签元素,得到的是数组。数组有下标,下标0开始,最后一项length-1。通过标签名获得所有标签名这个标签。类似于css中的标签选择器。选择的是一组元素。
get 得到
elements 元素们
By 通过
TagName 标签名字
var ops = document.getElementsByTagName('p');
console.log(ops); //获取所有p标签
//ops.style.backgroundColor = "pink"; //错误写法,因为得到的是一个数组,只能通过下标来获取
ops[0].style.backgroundColor = "pink"; //获取下标为0的p标签
ops[1].style.backgroundColor = "pink"; //获取下标为1的p标签
ops[2].style.backgroundColor = "pink";
ops[ops.length-1].style.backgroundColor = "pink"; //获取最后一个的p标签
既然是数组,也可通过循环批量控制
var ops = document.getElementsByTagName('p'); //循环给所有p标签 for(var i = 0;i < ops.length;i++){ ops[i].style.backgroundColor = "pink"; }
二、连续打点调用get
连续get可以很疯狂,但是如果是数组,一定要加上下标。
document.getElementsByTagName('div')[0].getElementsByTagName('p')[1].getElementsByTagName('span')[1].style.color = "red";
表格隔行变色:
var tr = document.getElementById('table').getElementsByTagName('tr'); //不管个数是多少,编号都从0开始。 for(var i = 0;i < tr.length;i+=2){ //从0开始,每次加2,所以都是偶数 tr[i].style.backgroundColor = "pink"; } for(var i = 1;i < tr.length;i+=2){ //从1开始,每次加2,所以都是奇数 tr[i].style.backgroundColor = "skyblue"; }
三、批量添加事件监听
var box = document.getElementsByTagName('p'); for(var i = 0;i < box.length;i++){ box[i].onclick = function(){ alert(i); //循环结束后才执行到函数,所以也就变为5 } } 但是发现,对编号的影响,闭包的影响的又出现了。 所以每个盒子点击后都是5.而不是我们想要的0,1,2,3,4。
闭包的影响:匿名函数定义的时候,就已经记住了自己认识i,但是认识i不是表示把i的值复制一份记住。所以匿名函数执行的时候(就是事件触发的时候),i的值已经变为5了。
解决方法1:使用IIFE关住当时定义时的作用域,点击事件发生时,执行对应的事件函数,事件函数会去找自己定义时的作用域。定义时候a已经被传递了参数,固定死了
for(var i = 0;i < box.length;i++){ (function(a){ box[a].onclick = function(){ alert(a); } })(i); }
解决方法2:获取的元素,本身封装了大量的属性和方法,还能自定义一些新的属性并赋值。自定义属性在后期可以打点调用。
for(var i = 0;i < box.length;i++){ box[i].index = i; //自定义属性,并且把每次循环i的值都赋值存起来,大家约定俗成叫 index,实际上叫什么都可以 console.log(box[i].index) box[i].onclick = function(){ alert(this.index); //this关键字就代表事件源本身自己 } }
解决方式:每个元素对象添加一个自定义属性,用属性存住循环变量,在事件函数内部有一个特殊关键字,叫this。this会指向事件源本身,它能够完全代替事件触发时的那个事件源对象。
事件源:谁触发事件,谁就是事件源。
四、对应和排他
对应模型:点击第一排的p,第二排对应编号的p变色。 //方法1:编号法,循环语句添加事件监听,给第一排所有p标签绑定点击事件 for(var i = 0;i < box1.length;i++){ box1[i].index = i; box1[i].onclick = function(){ box2[this.index].style.backgroundColor = "red"; } }
//方法2:IIFE
for(var i = 0;i < box1.length;i++){
(function(i){
box1[i].onclick = function(){
box2[i].style.backgroundColor = "red"
}
})(i)
}
//排他 //碰到每个p的时候,就自己变红,别人都是灰色。离开p的时候,保持红色。 var ps = document.getElementById("box1").getElementsByTagName("p"); var biaoti = document.getElementById("biaoti"); //事件监听只有onmouseover没有onmouseout //循环语句添加事件 for (var i = 0; i < ps.length; i++) { //编号 ps[i].idx = i; //监听 ps[i].onmouseover = function(){ //碰到每个p的时候,实际上是两件事儿 //第一件事儿,让所有人(包括自己)都变灰色 for(var j = 0 ; j < ps.length ; j++){ ps[j].style.backgroundColor = "#ccc"; } //第二件事儿,让自己变红 this.style.backgroundColor = "red"; //第三件事儿,让h1里面的内容变为自己的序号 biaoti.innerHTML = this.idx; } };