JavaScript核心之 DOM BOM

素颜马尾好姑娘i 2024-03-30 11:27 65阅读 0赞

**课程亮点**

1.带你了解并掌握jQuery库的使用。

2. 不再快速过api，而是通过大量经典案例加强jQuery语法练习。

3. 不再纠结于常见网页特效，而是突出两大案例：购物车案例和todolist案例，重点练习对数据操作的编程思想。

**课程内容**

学完JavaScript基础，我们就可以学习JavaScript核心 DOM 和 BOM操作了，真正体会JavaScript的魅力，这里我们会讲解如何获取DOM元素，如何操作DOM 元素，BOM操作， 事件，事件对象，事件委托，JS执行队列，定时器，常见网页特效，比如轮播图，tab栏切换等。 还会讲解移动端如何制作网页特效，带你进入JavaScript的实际开发应用。

**适用人群**

1、希望未来从事前端行业的小伙伴，在学习了JavaScript基础学习课程以后，继续进行深入学习。

2、网页常见特效制作人员

**推荐教程：**[JavaScript核心DOMBOM操作][JavaScript_DOMBOM]

**1****.1** **什么是** **DOM**

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

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

**1.2.DOM** **树**

![9e7cedbd4981422887068d392a64d555.png][]

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

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

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

**DOM 把以上内容都看做是对象**

**2. 获取元素**

**2.1** **如何获取****页面****元素**

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

我们如何来获取页面中的元素呢?

获取页面中的元素可以使用以下几种方式:

根据 ID 获取

根据标签名获取

通过 HTML5 新增的方法获取

特殊元素获取

**2.2** **根据** **ID** **获取**

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

![5aea714a607647ce8fa672ff567d1cc8.png][]

使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

**2.3** **根据****标签名****获取**

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

![7ae6cf99dc8e4129bdc8680e74376b46.png][]

注意：

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

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

**2.4** **通过** **HTML5** **新增的方法获取**

![3811f0c4f93145b2a43e7713f9a72fa9.png][]

![9c5075c2c1b74e07b6889998112f6455.png][]

![35dd034322e04fec85ad42c00d350daf.png][] **注意：**

querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector('\#nav');

**2.5** **获取****特殊元素（****body****，****html****）**

获取body元素

![eacadb2252e84a59bcff810ad65fb15a.png][]

获取html元素

![996c4f647233419fb027f01050b1a061.png][] **事件基础**

**3.1** **事件概述**

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解： 触发\--- 响应机制。

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

**3.2** **事件三要素**

1. 事件源 （谁）

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

3. 事件处理程序 （做啥）

**3.3** **执行事件的步骤**

1. 获取事件源

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

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

**3.3** **常见的鼠标事件**

![30d51bdf17c44f54888917a60285a39c.png][]

**3.4** **分析事件三要素**

下拉菜单三要素

关闭广告三要素

**4.** **操作****元素**

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

**4.1** **改变元素内容**

![ce8f66d8be1e4ee3997bd87cf8b18e78.png][]

从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉

![2a138496889e4d41af7c0fa14c69c8cc.png][]

起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

**4.2** **常用元素的属性操作**

![1a98258893b64b32b360ec1e6d3da284.png][] **4.3** **表单元素的属性操作**

利用 DOM 可以操作如下表单元素的属性：

![dfeea0b6eb0349f096c251412088b2f3.png][]

**4.4** **样式属性操作**

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

![8465f78cd96542b4878e1a9bc07f6757.png][]

**注意**：

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

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

操作元素是 DOM 核心内容

![fe7eeea601c348d19c55c2adfa430da3.png][]

[JavaScript_DOMBOM]: http://yun.itheima.com/course/553.html
[9e7cedbd4981422887068d392a64d555.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0179d31ad71d40a88acd7d891c87647e.png
[5aea714a607647ce8fa672ff567d1cc8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/869b038dbc0643bd9d136d1bab319dec.png
[7ae6cf99dc8e4129bdc8680e74376b46.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0c40e145c5e14a159ea523574e3706c1.png
[3811f0c4f93145b2a43e7713f9a72fa9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0084bd3982454c17bd5740e9e76224a8.png
[9c5075c2c1b74e07b6889998112f6455.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b202a1bc511b49f7bcc668f6a2ee3e68.png
[35dd034322e04fec85ad42c00d350daf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/bfdb3d37dbc24b3f98b156710b51e910.png
[eacadb2252e84a59bcff810ad65fb15a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/eab4e3c0d31641999aeaa770eb7a4a2a.png
[996c4f647233419fb027f01050b1a061.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/75635a2dbad04accbdd5b8918d614bb0.png
[30d51bdf17c44f54888917a60285a39c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0e2cded95a35468bacd230dd43a16dfb.png
[ce8f66d8be1e4ee3997bd87cf8b18e78.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e762f0345e1d4428add11efdfa9b0c2d.png
[2a138496889e4d41af7c0fa14c69c8cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/d7d86b805737488d9682cba5c4cac7a6.png
[1a98258893b64b32b360ec1e6d3da284.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b7e68def42294ff18b0ea8d96a82c081.png
[dfeea0b6eb0349f096c251412088b2f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/ad8feca1d75a48d1a565472d0a57d681.png
[8465f78cd96542b4878e1a9bc07f6757.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c27a5fc90a3e4f76913b02ee74918e5d.png
[fe7eeea601c348d19c55c2adfa430da3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0c3afc1af4014b8e8eb0fe41c4ae3817.png