JavaScript 基础知识 - DOM篇(一)

DOM

前言

本篇文章是JavaScript基础知识的DOM篇，如果前面的《JavaScript基础知识-入门篇》看完了，现在就可以学习DOM了。

注意： 所有的案例都在这里链接: 提取密码密码: 9as4，文章中的每个案例后面都有对应的序号。

1. DOM 基本概念

javascript 分为三个部分：ECMAScript、DOM、BOM。想要做出好看的页面效果，就需要学习DOM，学习了DOM之后就可以操作页面元素了。

• DOM: 用来操作页面元素的一套工具
• BOM: 用来操作浏览器一些行为的一套工具

什么是DOM？

Document Object Model: 文档对象模型，也叫文档树模型，是一套用来操作HTML和XML的一套API

文档对象模型

HTML页面的所有的内容，包括标签、文本、注释、属性等，在JS的DOM中，都存在一个一个的对象与之对应。因此当我们想要操作这些HTML的内容时，只需要操作这些对象即可。

• 节点：页面中所有的内容，包括标签、文本、注释、属性都被封装成了对象，我们把这些对象叫做节点。
• 元素：我们最常操作的是标签节点，也叫元素。

文档树模型

HTML结构是一个树形结构，同样的，这些对应的对象也是一个树形的结构，树形结构的好处是能够非常容易找到某个节点的子节点、父节点、兄弟节点。

• 子节点：child
• 兄弟节点：sibling
• 父节点：parent

树形结构示意图：

API

Application Programming Interface：应用程序编程接口，其实就是一大堆的方法，我们可以把API看成是工具。做不同的事情需要不同的工具。

XML

Extensible Markup Language：可扩展性标记语言，通常用于配置文件，或者和json一样用于数据交互。

2. 查找 DOM 对象

想要操作DOM，首先需要获取到DOM对象

2.1 根据id获取元素

document.getElementById("id名");

document : 整个页面就是一个document对象
get      : 获取
Element  : 元素
By       : 通过
Id       : id   参数是一个字符串，即id

返回值   : 是一个元素，即一个对象，标签中存在的属性，在这个元素中也有属与之一一对应。
document指的是整个html页面，在DOM中被封装成了一个对象，就是document对象

示例代码：

<div id="test">123</div>

<script>
    // 通过id名获取到了这个盒子对象，就可以对这个盒子进行操作了
    var test = document.getElementById("test");
</script>

举个例子：替换图片的属性 [01-替换图片的属性.html]

<img id="image" src="../image/01.jpg" alt="图片加载失败了" title="提示信息"></img>

<script>
    var img = document.getElementById("image");
    img.title = "你看到了什么";
    img.alt = "图片未能显示"; // 两条提示信息也被替换了
    img.src = "../image/02.jpg"; // 页面中的图片会被替换成2.jpg
</script>

2.2 根据标签名获取元素

document.getElementsByTagName("标签名");

document : 整个页面就是一个document对象
get      : 获取
Elements : 多个元素
By       : 通过
TagName  : 标签名

返回值   : 因为是多个元素，所以返回的是一个伪数组(页面中所有为该标签的元素)

示例代码：

<div id="box">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
</div>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>

<script>
    var box = document.getElementById('box');
    var links1 = document.getElementsByTagName('a'); // 获取到页面中所有的a标签 12345678
    var links2 = box.getElementsByTagName('a');      // 获取到div里面所有的a标签 12345
</script>

举个例子：隔行变色 [02-隔行变色.html]

<ul id="item">
        <li>我是单行我显示浅蓝色</li>
        <li>我是双行我显示淡粉色</li>
        <li>我是单行我显示浅蓝色</li>
        <li>我是双行我显示淡粉色</li>
        <li>我是单行我显示浅蓝色</li>
        <li>我是双行我显示淡粉色</li>
        <li>我是单行我显示浅蓝色</li>
        <li>我是双行我显示淡粉色</li>
        <li>我是单行我显示浅蓝色</li>
        <li>我是双行我显示淡粉色</li>
        <li>我是单行我显示浅蓝色</li>
        <li>我是双行我显示淡粉色</li>
        <li>我是单行我显示浅蓝色</li>
        <li>我是双行我显示淡粉色</li>
    </ul>
<script>
    var lis = document.getElementsByTagName('li');
    // 返回的是一个伪数组，所以也可以遍历
    for (var i = 0; i < lis.length; i++) {
        if (i % 2 == 0) {
            // 注意 数组的下标i是从0 开始的，所以第一个li下标是0
            lis[i].className = "even";   // .odd{background-color:#ffc0cb;}
        } else {
            lis[i].className = "odd";    // .even{background-color:#afeeee;}
        }
    }
</script>

效果图：

3. 注册事件

JavaScript和HTML之间的交互是通过事件来实现的。事件就是文档或者浏览器窗口发生的一些特定的交互瞬间。 JavaScript是一门事件驱动的脚本语言。

3.1 事件三要素

• 事件源： 触发事件的元素
• 事件名称： 触发事件的名称
• 事件处理函数： 触发事件时调用的函数

3.2 注册事件的两种方式

1、行内注册事件(不用)

// 直接在标签内添加一个点击事件
<img src="images/1.jpg" alt="描述" id="img" onclick="changePic()">

2、内嵌式注册事件

var img = document.getElementById("img");
img.onclick = function() {
  img.src = "images/2.gif";
}

注意：

• 注册事件的时候，事件处理程序并不会调用，点击的时候调用， 浏览器调用。
• 每点击一次，就会触发一次事件， 浏览器就会调用一次这个函数。

3.3 鼠标点击事件

当鼠标点击的时候，触发事件

语法

事件源.onclick = function(){
    // 触发事件后执行的函数
}

示例代码：点击轮流切换图片 [03-点击轮流切换图片.html]

<img src="../image/01.jpg" alt="" id="img">
<input type="button" value="切换" id="btn">

<script>
    var img = document.getElementById('img');
    var btn = document.getElementById('btn');
    var index = 1;
    btn.onclick = function() {
        index++;
        if (index == 5) {
            index = 1;
        }
        img.src = "../image/0" + index + ".jpg";  // 利用字符串拼接的方法，将路径拼接起来
    }
</script>

上面轮流切换的方法存在一个问题，当图片前缀或者后缀不统一的时候怎么办呢？这个方法是不能用的。

利用数组点击轮流切换图片 [03-点击轮流切换图片.html]

var img = document.getElementById('img');
var btn = document.getElementById('btn');
// 将所有的路径存储到一个数组中，然后只需要遍历这个数组的下标，就能实现切换图片
var arr = ["../image/01.jpg", "../image/02.jpg", "../image/03.jpg", "../image/04.jpg", "../image/05.jpg"];
var index = 0;

btn.onclick = function() {
    index++;
    if (index == 4) {
        index = 1;
    }
    img.src = arr[index];
}

将所有的路径存储到一个数组中，然后只需要遍历这个数组的下标，就能实现切换图片。

效果图：

示例代码：一个按钮点击循环显示隐藏一个盒子 [04-一个按钮点击... .html]

<div id="box"></div>
<input type="button" value="隐藏" id="btn">

<script>
    var img = document.getElementById('img');
    var btn = document.getElementById('btn');

    btn.onclick = function() {
        // value、className属性后面会提到
        if (btn.value == "隐藏") {
            box.className = "hide";
            btn.value = "显示";
        } else {
            box.className = "show";
            btn.value = "隐藏";
        }
    }
</script>

效果图：

给a标签注册点击事件

a标签本身就是可以被点击的，而且点击过后必须跳转(浏览器的默认行为)，我们在给a标签注册事件的时候加上return false 就可以阻止页面跳转

<a id="link" href="http://www.google.com" target="_blank" title="提示信息">点击跳转到谷歌</a>
<script>
    var link = document.getElementById('link');
    link.onclick = function() {
        console.log("呵呵呵");    //  点击后 打印“呵呵呵”，并且页面不跳转
        return false;
    }
</script>

给多个a标签注册点击事件 [05-给多个a标签注册点击事件.html]

通过getElementsByTagName();找到所有a标签，返回一个伪数组。

<!-- 样式部分 -->
<style>
    .color {
        background-color: #FFBDD4;
    }
</style>

<!-- html 部分 -->
<a href="#">你点我啊！！</a>
<a href="#">你点我啊！！</a>
<a href="#">你点我啊！！</a>
<a href="#">你点我啊！！</a>
<a href="#">你点我啊！！</a>
<a href="#">你点我啊！！</a>

<!-- js 部分 -->
<script>
    var links = document.getElementsByTagName('a');
    // 给多个a标签注册事件
    for (var i = 0; i < links.length; i++) {
        // link指第一个a标签  循环完成的时候link是最后一个a标签
        var link = links[i];
        // 循环的注册事件，每一个a都注册了事件  实质：关联一个函数
        link.onclick = function() {
            console.log(i);  // 打印的是最后一个下标
            this.className = "color";   // this指的是当前对象
            return false;
        }
    }
</script>

效果图：

3.4 鼠标经过、离开事件

当鼠标经过或者离开的时候，分别触发的事件

1、语法(鼠标经过)

事件源.onmouseover = function(){
    // 鼠标经过时执行的函数
}

2、语法(鼠标离开)

事件源.onmouseout = function(){
    // 鼠标离开时执行的函数
}

示例代码：二维码案例(经过的时候显示，离开的时候隐藏) [06-二维码案例.html]

<!-- 样式部分 -->
<style>
    .small {
        width: 50px;
        height: 50px;
        background: url(../image/bgs.png) no-repeat -159px -51px;
        position: fixed;
        right: 10px;
        top: 45%;
        cursor: pointer;
    }
    .big {
        position: absolute;
        top: 0;
        left: -150px;
    }
    .hide {
        display: none;
    }
    .show {
        display: block;
    }
</style>

<!-- html部分 -->
<div id="small" class="small">
    <div id="big" class="big hide">
        <img src="../image/456.png" alt="" />
    </div>
</div>

<!-- js部分 -->
<script>
    var small = document.getElementById('small');
    var big = document.getElementById('big');
    small.onmouseover = function() {
        big.className = "big show"; // 注意这里一定不能只写一个类，它本身的big类也要写上去，否则页面中只有一个show类
    }
    small.onmouseout = function() {
        big.className = "big hide";
    }
</script>

效果图：

3.5 表单获得、失去焦点事件

表单获得焦点时触发事件，表单失去焦点时触发事件

1、语法(获得焦点)

事件源.onfocus = function(){
    // 获得焦点后执行的函数
}

2、语法(失去焦点)

事件源.onblur = function(){
    // 失去焦点后执行的函数
}

示例代码：京东搜索案例 [07-京东搜索案例.html]

• 获得焦点时input输入框清空，失去焦点时恢复提示信息

<!-- html 部分 -->
<input id="text" type="text" value="iphoneX">
<button id="btn">搜索</button>

<!-- js 部分 -->
<script>
    var text = document.getElementById('text');
    text.onfocus = function() {
        text.value = "";
    }
    text.onblur = function() {
        text.value = "iphoneX";
    }
</script>

效果图：

3.6 其他触发事件汇总

在js中触发事件有很多种，这里就不一一列举了，用法和上面的其实是一样的，你只需要知道它的事件名即可。

事件名	事件具体用法	备注
鼠标事件
onclick	鼠标单击时触发的事件
ondblclick	鼠标双击时触发的事件
onmouseover	鼠标移动到某对象范围的上方时触发此事件
onmouseout	鼠标离开某对象范围时触发此事件
onmousedown	鼠标按下时触发此事件
onmouseup	鼠标按下后松开鼠标时触发此事件
onmousemove	鼠标移动时触发此事件
键盘事件
onkeypress	键盘上的某个键被按下并且释放时触发此事件
onkeydown	键盘上某个按键被按下时触发此事件
onkeyup	当键盘上某个按键被按放开时触发此事件
页面相关事件
onscroll	浏览器的滚动条位置发生变化时触发此事件
onload	页面内容完成时触发此事件
onbeforeunload	当前页面的内容将要被改变时触发此事件
onerror	出现错误时触发此事件
onmove	浏览器的窗口被移动时触发此事件
onresize	当浏览器的窗口大小被改变时触发此事件
onstop	浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
onunload	当前页面将被改变时触发此事件
表单相关事件
onfocus	当某个元素获得焦点时触发此事件
onchange	当前元素失去焦点并且元素的内容发生改变而触发此事件
onsubmit	一个表单被递交时触发此事件
onreset	当表单中RESET的属性被激发时触发此事件
页面编辑事件
onbeforecopy	当页面当前的被选择内容将要[复制]到浏览者系统的剪贴板前触发此事件
onbeforecut	当页面当前的被选择内容将要[剪切]到浏览者系统的剪贴板前触发此事件
onbeforeeditfocus	当前元素将要进入[编辑]状态
onbeforepaste	内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
onbeforeupdate	当浏览者[粘贴]系统剪贴板中的内容时通知目标对象
oncontextmenu	当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
oncopy	当页面当前的被选择内容被[复制]后触发此事件
oncut	当页面当前的被选择内容被剪切时触发此事件
onpaste	当内容被粘贴时触发此事件
onselect	当文本内容被选择时的事件
onselectstart	当文本内容选择将开始发生时触发的事件
ondrag	当某个对象被拖动时触发此事件 [活动事件]
ondragdrop	一个外部对象被鼠标拖进当前窗口或者帧
ondragend	当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了
ondragenter	当对象被鼠标拖动的对象进入其容器范围内时触发此事件
ondragleave	当对象被鼠标拖动的对象离开其容器范围内时触发此事件
ondragover	当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragstart	当某对象将被拖动时触发此事件
ondrop	在一个拖动过程中，释放鼠标键时触发此事件
onlosecapture	当元素失去鼠标移动所形成的选择焦点时触发此事件
数据绑定
onafterupdate	当数据完成由数据源到对象的传送时触发此事件
oncellchange	当数据来源发生变化时
ondataavailable	当数据接收完成时触发事件
ondatasetchanged	数据在数据源发生变化时触发的事件
ondatasetcomplete	当来子数据源的全部有效数据读取完毕时触发此事件
onerrorupdate	当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onrowenter	当前数据源的数据发生变化并且有新的有效数据时触发的事件
onrowexit	当前数据源的数据将要发生变化时触发的事件
onrowsdelete	当前数据记录将被删除时触发此事件
onrowsinserted	当前数据源将要插入新数据记录时触发此事件
外部事件
onafterprint	当文档被打印后触发此事件
onbeforeprint	当文档即将打印时触发此事件
onfilterchange	当某个对象的滤镜效果发生变化时触发的事件
onhelp	当浏览者按下F1或者浏览器的帮助选择时触发此事件
onpropertychange	当对象的属性之一发生变化时触发此事件
onreadystatechange	当对象的初始化属性值发生变化时触发此事件

4. 优雅降级和渐进增强

渐进增强：基于所有浏览器完成基本的功能。在这个基础上使用一些新特性，高级浏览器支持，低级浏览器不支持。

优雅降级：先基于主流的、高级的浏览器实现功能。对于那些不支持的浏览器，尽量去支持，如果支持不了就放弃。

5. 属性操作

5.1 普通标签属性

在标签中存在的属性，在DOM对象中同样存在着对应的属性，只要修改了标签的属性或者DOM对象的属性，两边都会变化。常见的属性有：title、src、href、className、id等。

属性操作案例：美女相册 [08-美女相册.html]

<!-- 样式部分 -->
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #box {
        margin: 20px 100px;
    }
    
    ul {
        overflow: hidden;
        margin: 50px 0;
    }
    
    li {
        float: left;
        margin-right: 20px;
    }
    
    li img {
        width: 150px;
    }
    
    #placeholder {
        width: 400px;
        height: 250px;
    }
</style>

<!-- html 部分 -->
<h2>美女相册案例</h2>
<ul>
    <li>
        <a href="../image/美女相册/1.jpg" title="美女1"><img src="../image/美女相册/1-small.jpg" alt=""></a>
    </li>
    <li>
        <a href="../image/美女相册/2.jpg" title="美女2"><img src="../image/美女相册/2-small.jpg" alt=""></a>
    </li>
    <li>
        <a href="../image/美女相册/3.jpg" title="美女3"><img src="../image/美女相册/3-small.jpg" alt=""></a>
    </li>
    <li>
        <a href="../image/美女相册/4.jpg" title="美女4"><img src="../image/美女相册/4-small.jpg" alt=""></a>
    </li>
</ul>
<img id="placeholder" src="../image/美女相册/placeholder.png" alt="">
<p id="description">这是描述</p>

<!-- js 部分 -->
<script>
    var links = document.getElementsByTagName('a');
    var placeholder = document.getElementById('placeholder');
    var description = document.getElementById('description');
    
    // 给所有a标签注册点击事件
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function() {
            // 将占位的图片的src设置成当前点击a标签的路径
            placeholder.src = this.href;
            // 修改描述文字，设置成当前点击a标签的title
            description.innerHTML = this.title;
            // 阻止a标签跳转
            return false;
        }
    }
</script>

效果图：

5.2 表单属性操作

常见的表单属性有：disabled、type、value、checked、selected

1、disabled：禁用表单

• 在input标签中，只要指定了disabled属性，无论有没有值，都代表这个input是被禁用的。
• 在DOM对象中disabled的属性是一个布尔值，只有false和true。

示例代码：禁用文本框 [09-禁用文本框.html]

<!-- html 部分 -->
<input type="text" name="" value=""><br/>
<input type="text" name="" value=""><br/>
<input type="text" name="" value=""><br/>
<input type="text" name="" value=""><br/>
<input type="text" name="" value=""><br/>
<input type="button" value="禁用" id="btn">

<!-- js 部分 -->
<script>
    var btn = document.getElementById('btn');
    // 获取到所有的input
    var inputs = document.getElementsByTagName('input');
    // 给按钮注册点击事件
    btn.onclick = function() {
        // 遍历伪数组
        for (var i = 0; i < inputs.length; i++) {
            // 根据input的type属性 判断text，禁用text
            if (inputs[i].type == "text") {
                inputs[i].disabled = true;
            }
        }
    }
</script>

效果图：

2、selected：多选菜单的默认显示选择项

• 当select多选表单里的option选项设置selected="true"的时候，默认显示该选项。
• 在DOM对象中selected的属性是一个布尔值，只有false和true。

示例代码：点击按钮随机切换option的默认选项 [10-select默认选中项.html]

<!-- html 部分 -->
<select>
    <option>露娜</option>
    <option>甄姬</option>
    <option>女娲</option>
    <option>芈月</option>
    <!-- 这里加了一个selected选项后，一进去就会显示这个默认项 -->
    <option selected>阿珂</option>
    <option>貂蝉</option>
    <option>妲己</option>
    <option>大乔</option>
    <option>小乔</option>
</select>
<input id="btn" type="button" value="切换">

<!-- js 部分 -->
<script>
    var btn = document.getElementById('btn');
    var options = document.getElementsByTagName('option');
    // 点击按钮，随机给某个option 加上selected选项
    btn.onclick = function() {
        // 获得随机数   0-8
        var random = parseInt(Math.random() * options.length);
        // 根据随机下标 去设置selected属性
        options[random].selected = true;
    }
</script>

效果图：

3、checked：选择框的默认选中

• 当checkbox选择框设置checked选项的时候，默认选中。
• 在DOM对象中，checked的属性是一个布尔值，只有false和true。

示例代码：表格全选反选案例 [11-表格全选反选.html]

<!-- html 部分 -->
<div class="wrap">
    <table>
        <thead>
            <tr>
                <th>
                    <input id="check_all" type="checkbox" title="全选">
                    <input id="check_fx" type="checkbox" title="反选">
                </th>
                <th>英雄</th>
                <th>技能</th>
            </tr>
        </thead>
        <tbody id="check_dan">
            <tr>
                <td><input type="checkbox"></td>
                <td>芈月</td>
                <td>永生之血</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>貂蝉</td>
                <td>语·花印</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>大乔</td>
                <td>川流不息</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>甄姬</td>
                <td>凝泪成冰</td>
            </tr>
        </tbody>
    </table>
</div>

<!-- js 部分 -->
<script>
    var checkAll = document.getElementById('check_all');
    var checkDan = document.getElementById('check_dan');
    var inputs = checkDan.getElementsByTagName('input');
    // 全选按钮点击后,下面所有的选项状态根据全选按钮的状态来改变
    checkAll.onclick = function() {
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = checkAll.checked;
        }
    }

    // 下面的按钮控制上面的全选按钮
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = function() {
            // 通过假设成立法 控制全选按钮
            var flag = true; // 假设下面所有的按钮选中了
            for (var i = 0; i < inputs.length; i++) {
                // 想办法推翻假设
                if (!inputs[i].checked) { // 假设下面的按钮有一个没有被选中时
                    flag = false;
                    break;
                }
            }
            // 假设成立后 应该做什么
            // if (flag) {
            //     checkAll.checked = true;
            // }
            // 可以直接将flag的值给checkAll.checked 因为checked的值只有false 和 true
            checkAll.checked = flag;
        }
    }
    
    // 获取反选按钮
    var checkFx = document.getElementById('check_fx');
    // 给反选按钮注册点击事件
    checkFx.onclick = function() {
        // 反选时只要让下面按钮的状态取反就可以了
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = !inputs[i].checked;
        }
    }
</script>

效果图：

5.3 标签自定义属性

之前的属性都是HTML规范中的，标签本来就有的属性，对于标签自定义的一些属性，比较特殊。

在html页面中，定义一个自定义属性"aa"

<div id="box" title="嘻嘻" class="cls" aa="bb"></div>

在对应的DOM对象中是不存在的，在DOM对象中只会存在固有的那些属性

var box = document.getElementById("box");
console.log(box.aa);        // undefined
console.log(box.title);     // "嘻嘻"
console.log(box.id);        // "box"
console.log(box.className); // "cls"

attribute系列

attribute系列方法用于获取、设置移除标签的属性，不管是自定义的还是固有的属性。

1、获取标签的属性 getAttribute

• 获取标签的属性，不管是固有的还是自定义的，都可以获取得到；
• 标签里的属性名是什么，获取是的参数就传什么。

<!-- html 部分 -->
<div id="box" title="嘻嘻" class="cls" aa="bb"></div>

<!-- js 部分 -->
<script>
    var box = document.getElementById("box");
    console.log(box.getAttribute("aa"));        // bb
    console.log(box.getAttribute("title"));     // "嘻嘻"
    console.log(box.getAttribute("id"));        // "box"
    console.log(box.getAttribute("class"));     // "cls"
</script>

2、设置标签的属性 setAttribute

• 两个参数，分别是：属性名和属性值，都是以字符串传入；
• 如果标签内有这个属性名，属性值将会被覆盖，如果没有这个属性名，将会被重新设置

<!-- html 部分 -->
<div id="box" title="嘻嘻"></div>

<!-- js 部分 -->
<script>
    var box = document.getElementById("box");
    box.setAttribute("title","哈哈");
    box.setAttribute("aa","bb");
</script>

<!--
    重新设置过属性名的div结构如下：
    <div id="box" title="哈哈" aa="bb"></div>
-->

3、移除标签的属性 removeAttribute

• 参数只有一个，就是需要移除的属性名

<!-- html 部分 -->
<div id="box" title="嘻嘻" class=""cls aa="bb"></div>

<!-- js 部分 -->
<script>
    var box = document.getElementById("box");
    box.removeAttribute("title");
    box.removeAttribute("aa");
</script>

<!--
    移除过属性名的div结构如下：
    <div id="box"></div>
-->

示例代码：获取当前点击元素的索引 [12-标签自定义属性.html]

通过给当前点击对象添加一个自定义属性

<!-- html 部分 -->
<input type="button" value="索引0">
<input type="button" value="索引1">
<input type="button" value="索引2">
<input type="button" value="索引3">
<input type="button" value="索引4">
<input type="button" value="索引5">

<!-- js 部分 -->
<script>
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        // 将自定义属性 存到当前对象里
        // 也可以通过setAttribute('index');但是这样会在标签里显示自定义属性
        inputs[i].index = i;
        inputs[i].onclick = function() {
            // 获取当前对象的自定义属性index
            console.log("当前索引" + this.index);
        }
    }
</script>

效果图：

5.4 排他思想(tab栏的主要思想)

排他思想可用一句话表述：干掉所有人，复活我自己。下面通过几个小例子，我们学习下排他思想

示例代码：点击按钮使其改变背景，其余的背景不变 [13-点击按钮改变其背景.html]

<!-- css 部分 -->
<style>
    .now{
        background-color: cyan;
    }
</style>

<!-- html 部分 -->
<input type="button" value="点我，我就亮">
<input type="button" value="点我，我就亮">
<input type="button" value="点我，我就亮">
<input type="button" value="点我，我就亮">
<input type="button" value="点我，我就亮">
<input type="button" value="点我，我就亮">

<!-- js 部分 -->
<script>
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        // 给所有的button注册点击事件
        inputs[i].onclick = function() {
        
            // 干掉所有人(让所有的button移除类)
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].className = "";
            }
            // 复活我自己(给点击的添加背景)
            this.className = "now";
        }
    }
</script>

效果图：

5.5 tab 栏切换

前端的小伙伴们，tab栏的知识点一定要熟练的掌握，因为在网站中会大量的使用到它。

为什么会大量使用tab栏呢？

• 布局的时候大量的使用div，空间消耗太大
• 使用tab栏的时候，将不需要显示的div先隐藏，等到点击的时候，再让其显示

示例代码：tab栏切换 [14-tab栏切换.html]

<!-- css 部分 -->
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    #box {
        width: 500px;
        margin: 100px auto;
        border: 1px solid #333;
    }
    
    ul {
        overflow: hidden;
    }
    
    li {
        float: left;
        width: 100px;
        height: 40px;
        font: 400 16px/40px "宋体";
        color: #fff;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.6);
        cursor: pointer;
    }
    
    #content {
        width: 500px;
        height: 340px;
    }
    
    #content div {
        width: 100%;
        height: 100%;
        display: none;
    }
    
    #content div.show {
        display: block;
    }
    
    #title li.show {
        color: #333;
        background-color: floralwhite;
    }
    
    img {
        width: 100%;
        height: 100%;
    }
</style>

<!-- html 部分 -->
<div id="box">
    <div id="title">
        <ul>
            <li class="show">导航1</li>
            <li>导航2</li>
            <li>导航3</li>
            <li>导航4</li>
            <li>导航5</li>
        </ul>
    </div>
    <div id="content">
        <div class="show">
            <img src="../image/01.jpg" alt="">
        </div>
        <div>
            <img src="../image/02.jpg" alt="">
        </div>
        <div>
            <img src="../image/03.jpg" alt="">
        </div>
        <div>
            <img src="../image/04.jpg" alt="">
        </div>
        <div>
            <img src="../image/05.jpg" alt="">
        </div>
    </div>
</div>

<!-- js 部分 -->
<script>
    var title = document.getElementById('title');
    var lis = title.getElementsByTagName('li');
    var content = document.getElementById('content');
    var divs = content.getElementsByTagName('div');

    // 给title注册点击事件 并且排他
    for (var i = 0; i < lis.length; i++) {
        lis[i].index = i;
        lis[i].onclick = function() {
            // 干掉所有人
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = "";
                divs[i].className = "";
            }
            // 复活我自己
            this.className = "show";
            divs[this.index].className = "show";
        }
    }
</script>

效果图：

6. 标签内容

innerHTML和innerText属性，都是用来获取和设置标签内容的。但是两者还是有区别的。

6.1 innerHTML

innerHTML可以用于获取和设置标签的所有内容，包括标签和文本内容。

• 示例代码：

<div id="box">
    <h4>哈哈哈</h4>
</div>

<script>
    var box = document.getElementById('box');
    
    // 获取标签内容的时候，不管标签还是文本，都能获取到
    console.log(box.innerHTML); // "<h4>哈哈哈</h4>"

    // innerHTML设置内容的时候，覆盖原来内容，标签也能生效，浏览器能解析这个标签。
    box.innerHTML = "<h1>笑什么笑！！</h1>"  // 此时页面刷新后显示h1格式的"笑什么笑！！"
    box.innerHTML = "标签还在吗？";  // 直接显示 “标签还在吗？” h1标签被文字替换
</script>

6.2 innerText

innerText可以用于获取和设置标签的文本内容，会丢弃掉标签

示例代码：

<div id="box">
    <h4>哈哈哈</h4>
</div>

<script>
    var box = document.getElementById('box');
    
    // 获取标签内容的时候，只会获取文本，标签扔掉了
    console.log(box.innerText); // 哈哈哈
    
    // 设置标签内容的时候，覆盖原来内容，对标签进行转义（目的：把标签直接当文本来用）
    box.innerText = "笑什么笑"; // 页面中的文字会被替换掉
    box.innerText = "<h1>笑什么笑</h1>" // 页面显示"<h1>笑什么笑</h1>"
</script>

二者的区别：

• innerHTML是W3C的标准属性，而innerText是IE提出来的属性，存在兼容性问题。因此更加推荐大家使用innerHTML。
• innerText的作用：防止xss攻击

6.3 innerText 的兼容性问题

浏览器兼容性：指网页在各种浏览器上的显示效果不一致。或者是一些属性和方法在低版本的浏览器中不支持。

具体差别

• innerText是IE提出来的属性，因此低版本的火狐浏览器不支持这个属性。
• 火狐有一个textContent属性，效果跟innerText一样，但是IE678不支持这个属性

解决浏览器兼容性的处理方式：

• 能力检测（常用）
• 代理检测
• 怪癖检测

书写innerText的兼容性代码：

//获取标签的innerText（兼容所有浏览器）
function getInnerText(element) {
    // 如果支持innerText，说明肯定能获取到内容，是一个字符串
    if (typeof element.innerText == "string") {
        // 兼容IE
        return element.innerText;
    } else {
        // 兼容火狐
        return element.textContent;
    }
}

//设置标签的innerText（兼容所有浏览器）
function setInnerText(element, value) {
    //能力检测
    if (typeof element.innerText == "string") {
        element.innerText = value;
    } else {
        element.textContent = value;
    }
}

上一篇：JavaScript 基础知识 - 入门篇(二)
下一篇：JavaScript 基础知识 - DOM篇(二)