五、getElementsByTagName()

5.1 概述

表示通过标签名得到类数组对象

参数：标签名
返回值：类数组对象
调用对象：可以是document，还可以是任何一个节点对象（表示从该节点范围内进行查找）

5.1.1 该类数组对象中保存的是元素对象

该数组对象可以通过索引值读取每一项的值，也可以使用length属性。

如果标签只有一个，仍然需要通过索引值获取元素对象。

<p>1</p>
<p>2</p>
<p>3</p>
<div>div</div>

<style>
    /* 清楚默认样式 */
    * {
        margin: 0;
        padding: 0;
    }
    p {
        width: 200px;
        height: 40px;
        background-color:lightblue;
        margin-bottom: 10px;
    }
    div {
        width: 200px;
        height: 200px;
        background-color: blue;
    }
</style>

<script>
    // 通过标签名
    var ps = document.getElementsByTagName("p");
    console.log(ps);
    // 读取类数组中每一项的值
    console.log(ps[0]);
    // 让第二个p变红
    ps[1].style.backgroundColor = "red";
    // 标签只有一个也必须书写索引值
    console.log(document.getElementsByTagName("div"));
    document.getElementsByTagName("div")[0].style.backgroundColor = "pink";
    // length属性也可以使用
    console.log(ps.length);
</script>

5.1.2 不管标签嵌套多深都可以查找到

<p>1</p>
<p>2</p>
<p>3</p>
<div>
    <div>
        <div>
            <div>
                <p>我是比较深的p</p>
            </div>
        </div>
    </div>
</div>
<script>
    // 通过标签名
    var ps = document.getElementsByTagName("p");
    // 不管标签嵌套多深都可以查找到
    console.log(ps[ps.length - 1]);
    console.log(ps);
</script>

5.1.3 类数组对象保存数据时只和标签出现的位置有关，和嵌套没有关系

<div id="box1">
    <div id="box2"></div>
    <div id="box3">
        <div id="box4"></div>
    </div>
</div>
<div id="div5"></div>

// 类数组对象保存元素顺序只和先后出现的位置有关
var divs = document.getElementsByTagName("div");
// 可以使用遍历
for(var i = 0 ; i <= divs.length - 1 ; i++){
    console.log(divs[i]);
}

5.2 连续打点

5.2.1 不使用连续打点，分条书写

<div id="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</div>
<script>
    // 让第二个p变色 分条书写
    // 第一步：得到box对象
    var oBox = document.getElementById("box");
    // 第二步：在box范围内找到p
    var ps = oBox.getElementsByTagName("p");
    // 第三步：让第二个p变色
    ps[1].style.backgroundColor = "red";
    console.log(ps);
    console.log(ps.length);
</script>

5.2.2 元素对象改变，再次打点

可以将上面语句使用连续打点，当元素对象改变，再次打点表示从该元素对象进行调用。

// 连续打点，元素对象改变，表示从该元素进行使用，不会每次都从最开始document进行查找
document.getElementById("box").getElementsByTagName("p")[1].style.backgroundColor = "green";

5.2.3 `getElementsByTagName()`也可以连续打点

document.getElementsByTagName("div")[0].getElementsByTagName("p")[1].style.backgroundColor = "orange";

5.2.4 案例：表格隔行变色

<style>
    /* 清楚默认样式 */
    * {
        margin: 0;
        padding: 0;
    }
    table, tr, td {
        border: 1px solid #000;
        border-collapse: collapse;
    }
    td {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
</style>

<script>
    var trs = document.getElementsByTagName("tr");
    // 让所有的奇数行变成浅蓝色 0,1,2,3,4,5,6
    for(var i = 1 ; i <= trs.length - 1 ; i +=2){
        trs[i].style.backgroundColor = "lightblue";
    }
    // 让所有的偶数行变成浅绿色 0,1,2,3,4,5,6
    for(var i = 0 ; i <= trs.length - 1 ; i +=2){
        trs[i].style.backgroundColor = "lightgreen";
    }
</script>

5.3 批量操作

通过标签名得到类数组对象，将每一元素对象添加相同的事件。

// 获取类数组对象
var ps = document.getElementsByTagName("p");
// 通过遍历添加事件，点击p，弹出对应的索引值
for(var i = 0 ; i <= ps.length - 1 ; i ++){
    ps[i].onclick = function(){
        console.log(i);
    }
}

由于闭包的影响，i记住了4

5.3.1 IIFE解决：

// 获取类数组对象
var ps = document.getElementsByTagName("p");
// 通过遍历添加事件，点击p，弹出对应的索引值
for(var i = 0 ; i < ps.length ; i ++){
    (function(a){
        ps[a].onclick = function(){
        console.log(a);
        }
    })(i);
}

5.3.2 this关键字

this关键字，表示触发事件的该对象。

原对象具有的属性和方法，this也具有同样的属性和方法。

this只能使用在函数内部。

// 获取类数组对象
var ps = document.getElementsByTagName("p");
// 通过遍历添加事件，点击p，弹出对应的索引值
// this 触发事件的该对象 函数内没有i，不受闭包影响
for(var i = 0 ; i < ps.length ; i ++){
    ps[i].onclick = function(){
    console.log(this.innerHTML);
    }
}

this只和触发事件的对象有关，此处this相当于ps[i]

5.3.3 this工作中实际使用：

// 获取类数组对象
var ps = document.getElementsByTagName("p");
// 通过遍历添加事件，点击p，弹出对应的索引值
// this 触发事件的该对象 函数内没有i，不受闭包影响
for(var i = 0 ; i < ps.length ; i ++){
    // 提前将 i保存在元素对象属性中 index为索引值
    ps[i].index = i;
    // 所有p添加点击事件输出索引值
    ps[i].onclick = function(){
    // console.log(i);
    // console.log(ps[i].index);
    console.log(this.index);
    }
}

5.4 对应思想

我们经常利用其他元素控制另外的元素，他们索引值相同。

<div class="box" id="box1">
    <p>0</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<div class="box" id="box2">
    <p>0</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

// 对应，点击上面的p，下面对应的p变色
var ps1 = document.getElementById("box1").getElementsByTagName("p");
var ps2 = document.getElementById("box2").getElementsByTagName("p");
// 通过遍历批量添加事件
for(var i = 0 ; i < ps1.length ; i++){
    // 提前将i保存在index属性中
    ps1[i].index = i;
    // 点击事件
    ps1[i].onclick = function(){
        // 对应的ps2中索引值i变色
        // ps2[i].style.backgroundColor = "red";
        ps2[this.index].style.backgroundColor = "red";
    }
}

5.5 排他思想

只有点击的对应元素改变，其他都恢复原状

// 对应+排他
for(var i = 0 ; i < ps1.length ; i++){
    // 提前将i保存在index属性中
    ps1[i].index = i;
    // 点击事件
    ps1[i].onclick = function(){
        // 先将所有的ps2都变成原状
        for(var j = 0 ; j < ps2.length ; j++){
            ps2[j].style.backgroundColor = "lightblue";
        }
        // 对应的ps2中索引值i变色
        ps2[this.index].style.backgroundColor = "red";
    }
}