JavaScript 基础知识 - DOM篇(一)

时间  2019-11-08
标签 javascript 基础 知识 dom 栏目 JavaScript 繁體版
原文   原文链接

image

DOM

前言

本篇文章是JavaScript基础知识的DOM篇，若是前面的《JavaScript基础知识-入门篇》看完了，如今就能够学习DOM了。javascript

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

1. DOM 基本概念

javascript 分为三个部分： ECMAScript、 DOM、 BOM。想要作出好看的页面效果，就须要学习DOM，学习了DOM以后就能够操做页面元素了。
  • DOM: 用来操做页面元素的一套工具
  • BOM: 用来操做浏览器一些行为的一套工具

什么是DOM？html

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

文档对象模型前端

HTML页面的全部的内容，包括 标签、 文本、 注释、 属性等，在JS的 DOM中，都存在一个一个的 对象与之对应。所以当咱们想要操做这些HTML的内容时，只须要操做这些对象便可。
  • 节点：页面中全部的内容，包括标签、文本、注释、属性都被封装成了对象，咱们把这些对象叫作节点。
  • 元素：咱们最常操做的是标签节点，也叫元素。

文档树模型java

HTML结构是一个 树形结构，一样的，这些对应的 对象也是一个 树形的结构，树形结构的好处是可以 很是容易找到某个节点的 子节点、 父节点、 兄弟节点。
  • 子节点：child
  • 兄弟节点：sibling
  • 父节点：parent

树形结构示意图：编程

image

APIjson

Application Programming Interface： 应用程序编程接口，其实就是一大堆的方法，咱们能够把API当作是工具。作不一样的事情须要不一样的工具。

XMLsegmentfault

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>

效果图：

image

3. 注册事件

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

3.1 事件三要素

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

3.2 注册事件的两种方式

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

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

二、内嵌式注册事件

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];
}

将全部的路径存储到一个数组中，而后只须要遍历这个数组的下标，就能实现切换图片。

效果图：

image

示例代码：一个按钮点击循环显示隐藏一个盒子 [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>

效果图：

image

给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>

效果图：

image

3.4 鼠标通过、离开事件

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

一、语法(鼠标通过)

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

二、语法(鼠标离开)

事件源.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>

效果图：

image

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

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

一、语法(得到焦点)

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

二、语法(失去焦点)

事件源.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>

效果图：

image

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>

效果图：

image

5.2 表单属性操做

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

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

效果图：

image

二、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>

效果图：

image

三、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>

效果图：

image

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系列方法用于获取、设置移除标签的属性，不论是自定义的仍是固有的属性。

一、获取标签的属性 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>

二、设置标签的属性 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>
-->

三、移除标签的属性 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>

效果图：

image

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>

效果图：

image

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>

效果图：

image

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篇(二)

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程