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对象

示例代码：

123

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

2.2 根据标签名获取元素

document.getElementsByTagName("标签名");

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

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

示例代码：

    1
    2
    3
    4
    5

6
7
8

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

        
我是单行我显示浅蓝色
        
我是双行我显示淡粉色
        
我是单行我显示浅蓝色
        
我是双行我显示淡粉色
        
我是单行我显示浅蓝色
        
我是双行我显示淡粉色
        
我是单行我显示浅蓝色
        
我是双行我显示淡粉色
        
我是单行我显示浅蓝色
        
我是双行我显示淡粉色
        
我是单行我显示浅蓝色
        
我是双行我显示淡粉色
        
我是单行我显示浅蓝色
        
我是双行我显示淡粉色
    

效果图：

3. 注册事件

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

3.1 事件三要素

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

3.2 注册事件的两种方式

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

// 直接在标签内添加一个点击事件

2、内嵌式注册事件

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

注意：

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

3.3 鼠标点击事件

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

语法

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

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

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

利用数组点击轮流切换图片 [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]

效果图：

给a标签注册点击事件

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

点击跳转到谷歌

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

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

你点我啊！！
你点我啊！！
你点我啊！！
你点我啊！！
你点我啊！！
你点我啊！！

效果图：

3.4 鼠标经过、离开事件

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

1、语法(鼠标经过)

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

2、语法(鼠标离开)

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

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

效果图：

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

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

1、语法(获得焦点)

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

2、语法(失去焦点)

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

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

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

搜索

效果图：

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]

美女相册案例

    

        
    
    

        
    
    

        
    
    

        
    


这是描述

效果图：

5.2 表单属性操作

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

1、disabled：禁用表单

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

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

效果图：

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

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

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

    露娜
    甄姬
    女娲
    芈月
    
    阿珂
    貂蝉
    妲己
    大乔
    小乔

效果图：

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

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

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

    

        

            

                

                    
                    
                
                
英雄
                
技能
            
        
        

            

                

                
芈月
                
永生之血
            
            

                

                
貂蝉
                
语·花印
            
            

                

                
大乔
                
川流不息
            
            

                

                
甄姬
                
凝泪成冰
            
        
    

效果图：

5.3 标签自定义属性

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

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

在对应的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

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

2、设置标签的属性 setAttribute

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

3、移除标签的属性 removeAttribute

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

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

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

效果图：

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

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

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

效果图：

5.5 tab 栏切换

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

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

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

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

    

        

            
导航1
            
导航2
            
导航3
            
导航4
            
导航5
        
    
    

        

            
        
        

            
        
        

            
        
        

            
        
        

            
        
    

效果图：

6. 标签内容

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

6.1 innerHTML

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

• 示例代码：

    
哈哈哈

6.2 innerText

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

示例代码：

    
哈哈哈

二者的区别：

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