getElementsByTagName

一、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;
    }
};