JavaScript核心知识第一章---DOM 文档对象模型（含大量案例分析）

• 三、事件基础

• • （1）事件概述

• （2）事件三要素

• • 2.1 案例：点击按钮弹出警示框

• （3）执行事件的步骤

• （4）常见的鼠标事件

• 四、操作元素

• • （1）改变元素内容
• • 1.1 innerText 和 innerHTML的区别

• 1.2 案例：分时显示不同图片，显示不同问候语

• （2）表单元素的属性操作

• • 2.1 案例：仿京东显示密码

• （3）样式属性操作<1>

• • 3.1 案例：显示隐藏文本框内容

• （4）样式属性操作<2>

• • 4.1 案例： 密码框格式提示错误信息

• （5）操作元素总结

• （6）排他思想

• • 6.1 案例1：表格隔行变色

• 6.2 案例2：表单全选取消全选案例

• （7）自定义属性的操作

• • 7.1 案例：tab 栏切换（重点案例）

• （8）H5自定义属性

• • 8.1 设置H5自定义属性

• 8.2 获取H5自定义属性

• 五、节点操作

• • （1）为什么学节点操作

• （2）节点概述

• （3）节点层级

• • 3.1 父级节点

• 3.2 子节点

• 3.3 兄弟节点

• （4） 创建节点

• （5） 添加节点

• • 3.5.1 案例：简单版发布留言案例

• （6） 删除节点

• • 3.6.1 案例：删除留言案例

• （7） 复制节点(克隆节点)

• • 3.7.1 案例：动态生成表格

• （8）三种动态创建元素区别（重点）

• 六、总结

一、DOM 简介

---

（1）什么是 DOM

1️⃣ 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

2️⃣ W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

（2）DOM 树

• 文档：一个页面就是一个文档，DOM 中使用 document 表示；

• 元素：页面中的所有标签都是元素，DOM 中使用 element 表示；

• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示；

😆温馨提醒😆：DOM 把以上内容都看做是对象；

---

二、获取元素

---

（1）如何获取页面元素

1️⃣ DOM在我们实际开发中主要用来操作元素。

2️⃣ 获取页面中的元素可以使用以下几种方式：

• 根据 ID 获取

• 根据标签名获取

• 通过 HTML5 新增的方法获取

• 特殊元素获取

（2）根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

语法演示如下：

document.getElementById('id');

代码演示如下：

（3）根据标签名获取

1️⃣ 使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合；

语法演示如下：

document.getElementsByTagName('标签名');

😆温馨提醒😆：

1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历；

2. 得到元素对象是动态的；

3. 如果获取不到元素,则返回为空的伪数组（因为获取不到对象）；

2️⃣ 还可以获取某个元素(父元素)内部所有指定标签名的子元素；

语法演示如下：

element.getElementsByTagName('标签名');

😆温馨提醒😆：父元素必须是单个对象(必须指明是哪一个元素对象)。获取的时候不包括父元素自己。

代码演示如下：

• 柳庭风静人眠昼，昼眠人静风庭柳。
• 柳庭风静人眠昼，昼眠人静风庭柳。
• 柳庭风静人眠昼，昼眠人静风庭柳。
• 柳庭风静人眠昼，昼眠人静风庭柳。

1. 菩萨蛮·回文夏闺怨
2. 菩萨蛮·回文夏闺怨
3. 菩萨蛮·回文夏闺怨
4. 菩萨蛮·回文夏闺怨

（4）通过 HTML5 新增的方法获取

语法演示如下：

//第一种

document.getElementsByClassName(‘类名’)； // 根据类名返回元素对象集合

//第二种

document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象

//第三种

document.querySelectorAll('选择器'); // 根据指定选择器返回

😆温馨提醒😆：querySelector 和 querySelectorAll 里面的选择器需要加符号,比如：document.querySelector(’#nav’);

代码演示如下：

（5）获取特殊元素（body，html）

1️⃣ 获取body元素

doucumnet.body // 返回body元素对象

2️⃣ 获取html元素

document.documentElement // 返回html元素对象

代码演示如下：

---

三、事件基础

---

（1）事件概述

1️⃣ JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解： 触发— 响应机制。

2️⃣ 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。

（2）事件三要素

1. 事件源 （谁）

2. 事件类型 （什么事件）

3. 事件处理程序 （做什么）

2.1 案例：点击按钮弹出警示框

要求：页面中有一个按钮，当鼠标点击按钮的时候，弹出“你好”警示框；

案例分析：

1. 获取事件源（按钮）；

2. 注册事件（绑定事件），使用 onclick；

3. 编写事件处理程序，写一个函数弹出 alert 警示框；

代码演示如下：

点击这里哦

（3）执行事件的步骤

1. 获取事件源

2. 注册事件（绑定事件）

3. 添加事件处理程序（采取函数赋值形式）

（4）常见的鼠标事件

| 鼠标事件 | 触发条件 |

| --- | --- |

| onclick | 鼠标点击左键触发 |

| onmouseover | 鼠标经过触发 |

| onmouseout | 鼠标离开触发 |

| onfocus | 获得鼠标焦点触发 |

| onblur | 失去鼠标焦点触发 |

| onmousemove | 鼠标移动触发 |

| onmouseup | 鼠标弹起触发 |

| onmousedown | 鼠标按下触发 |

---

四、操作元素

---

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等；

（1）改变元素内容

1️⃣ element.innerText：从起始位置到终止位置的内容，但它去除 html 标签，同时空格和换行也会去掉；

2️⃣ element.innerHTML：起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行；

1.1 innerText 和 innerHTML的区别

代码演示如下：

我是文字

123456

显示效果如下：

1.2 案例：分时显示不同图片，显示不同问候语

要求：根据不同时间，页面显示不同图片，同时显示不同的问候语。

1. 如果上午时间打开页面，显示上午好，显示上午的图片。

2. 如果下午时间打开页面，显示下午好，显示下午的图片。

3. 如果晚上时间打开页面，显示晚上好，显示晚上的图片。

案例分析：

1. 根据系统不同时间来判断，所以需要用到日期内置对象；

2. 利用多分支语句来设置不同的图片；

3. 需要一个图片，并且根据时间修改图片，就需要用到操作元素src属性；

4. 需要一个div元素，显示不同问候语，修改元素内容即可；

完整代码演示如下：

Document img { width: 300px; }

😆温馨提醒😆：因代码涉及到使用图片，所以小伙伴们首先先理解代码，然后再将自己准备的图片代替代码中的图片即可哦；

（2）表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性：type、value、checked、selected、disabled

代码演示如下：

按钮

显示效果如下：

2.1 案例：仿京东显示密码

要求：点击按钮将密码框切换为文本框，并可以查看密码明文；

案例分析：

1. 核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码；

2. 一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框；

3. 算法：利用一个flag变量，来判断flag的值，如果是1 就切换为文本框，flag 设置为0，如果是0 就切换为密码框，flag设置为1；

案例图片素材：

完整代码演示如下：

Document .box { position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input { width: 370px; height: 30px; border: 0; outline: none; } .box img { position: absolute; top: 2px; right: 2px; width: 24px; }

（3）样式属性操作<1>

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

1️⃣ element.style：行内样式操作；

😆温馨提醒😆：

1. JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor；

2. JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高；

3.1 案例：显示隐藏文本框内容

要求：当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示；

案例分析：

1. 首先表单需要2个新事件，获得焦点 onfocus 失去焦点 onblur；

2. 如果获得焦点， 判断表单里面内容是否为默认文字，如果是默认文字，就清空表单内容；

3. 如果失去焦点， 判断表单内容是否为空，如果为空，则表单内容改为默认文字；

代码演示如下：

Document input { color: #999; }

（4）样式属性操作<2>

1️⃣ element.className：类名样式操作；

😆温馨提醒😆：

1. 如果样式修改较多，可以采取操作类名方式更改元素样式；

2. class因为是个保留字，因此使用className来操作元素类名属性；

3. className 会直接更改元素的类名，会覆盖原先的类名；

完整代码演示如下：

Document div { width: 100px; height: 100px; background-color: pink; } .change { background-color: purple; color: #fff; font-size: 25px; margin-top: 100px; }

4.1 案例： 密码框格式提示错误信息

要求：用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息；

案例分析：

1. 首先判断的事件是表单失去焦点 onblur；

2. 如果输入正确则提示正确的信息颜色为绿色小图标变化；

3. 如果输入不是6到16位，则提示错误信息颜色为红色小图标变化；

4. 因为里面变化样式较多，我们采取className修改样式；

案例图片素材：

完整代码演示如下：

Document div { width: 600px; margin: 100px auto; } .message { display: inline-block; font-size: 12px; color: #999; background: url(images/mess.png) no-repeat left center; padding-left: 20px; } .wrong { color: red; background-image: url(images/wrong.png); } .right { color: green; background-image: url(images/right.png); }

（5）操作元素总结

（6）排他思想

如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

1. 所有元素全部清除样式（干掉其他人）；

2. 给当前元素设置样式 （留下我自己）；

3. 注意顺序不能颠倒，首先干掉其他人，再设置自己；

代码演示如下：

按钮1

按钮2

按钮3

按钮4

按钮5

显示效果如下：

6.1 案例1：表格隔行变色

显示效果如下：

完整代码演示如下：

Document table { width: 800px; margin: 100px auto; text-align: center; border-collapse: collapse; font-size: 14px; } thead tr { height: 30px; background-color: skyblue; } tbody tr { height: 30px; } tbody td { border-bottom: 1px solid #d7d7d7; font-size: 12px; color: blue; } .bg { background-color: pink; }

代码	名称	最新公布净值	累计净值	前单位净值	净值增长率
003526	农银金穗3个月定期开放债券	1.075	1.079	1.074	+0.047%
000689	前海开源新经济混合A	1.075	1.079	1.074	+0.047%
003567	华夏行业景气混合	1.075	1.079	1.074	+0.047%
002296	长城行业轮动混合A	1.075	1.079	1.074	+0.047%
001704	国投瑞银进宝混合	1.075	1.079	1.074	+0.047%
515220	国泰中证煤炭ETF	1.075	1.079	1.074	+0.047%

6.2 案例2：表单全选取消全选案例

业务需求：

1. 点击上面全选复选框，下面所有的复选框都选中（全选）；

2. 再次点击全选复选框，下面所有的复选框都不中选（取消全选）；

3. 如果下面复选框全部选中，上面全选按钮就自动选中；

4. 如果下面复选框有一个没有选中，上面全选按钮就不选中；

5. 所有复选框一开始默认都没选中状态；

案例分析：

1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可；

2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中；

3. 可以设置一个变量，来控制全选是否选中；

显示效果如下：

完整代码演示如下：

* { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微软雅黑"; color: #fff; } td { font: 14px "微软雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; }

（7）自定义属性的操作

1️⃣ 获取属性值

• element.属性 ：获取属性值。

• element.getAttribute('属性');

😆区别😆：

• element.属性 ：获取内置属性值（元素本身自带的属性）；

• element.getAttribute(‘属性’); ：主要获得自定义的属性 （标准） 我们程序员自定义的属性

2️⃣ 设置属性值

• element.属性 = ‘值’ ：设置内置属性值。

• element.setAttribute('属性', '值');

😆区别😆：

• element.属性 ：设置内置属性值；

• element.setAttribute(‘属性’); ：主要设置自定义的属性 （标准）；

3️⃣ 移除属性

• element.removeAttribute('属性');

代码演示如下：

7.1 案例：tab 栏切换（重点案例）

要求：当鼠标点击上面相应的选项卡（tab），下面内容跟随变化；

案例分析：

1. Tab栏切换有2个大的模块；

2. 上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式；

3. 下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面；

4. 规律：下面的模块显示内容和上面的选项卡一一对应，相匹配；

5. 核心思路： 给上面的tab_list 里面的所有小li 添加自定义属性，属性值从0开始编号；

6. 当我们点击tab_list 里面的某个小li，让tab_con 里面对应序号的 内容显示，其余隐藏（排他思想）；

显示效果如下：

完整代码演示如下：

Document * { margin: 0; padding: 0; } li { list-style-type: none; } .tab { width: 978px; margin: 100px auto; } .tab_list { height: 39px; border: 1px solid #ccc; background-color: #f1f1f1; } .tab_list li { float: left; height: 39px; line-height: 39px; padding: 0 20px; text-align: center; cursor: pointer; } .tab_list .current { background-color: #c81623; color: #fff; } .item_info { padding: 20px 0 0 20px; } .item { display: none; }

（8）H5自定义属性

1️⃣ 自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

2️⃣ 自定义属性获取是通过getAttribute(‘属性’) 获取。但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5给我们新增了自定义属性：

8.1 设置H5自定义属性

H5规定自定义属性data-开头做为属性名并且赋值。

比如

或者使用 JS 设置

element.setAttribute(‘data-index’, 2)

8.2 获取H5自定义属性

1. 兼容性获取：element.getAttribute(‘data-index’);

2. H5新增 element.dataset.index 或者 element.dataset[‘index’]，ie11才开始支持

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

开源分享：docs.qq.com/doc/DSmRnRG…