文章目录

一、前言🚀🚀🚀

二、DOM简介：☀️☀️☀️

2.1 为什么需要DOM

2.2 什么是DOM

2.3 节点与关系

三、如何使用DOM🚀🚀🚀

3.1 入门案例

3.2 文档结点 | Doucument对象（代表整个网页）

3.3 元素节点（代表每一个标签）

① 如何获取元素节点

② 元素节点（方法小总结）

③ 元素节点的属性和方法

3.4 文本节点

3.5 属性节点

四、DOM相关概念/知识🚀🚀🚀

4.1 事件

4.2 文档的加载

4.3 练习

① 图片按钮点击切换

② 按钮点击全选

4.4 元素的增删改

4.5 如何解决XXS注入问题

4.6 节点的复制

五、JS操作CSS🚀🚀🚀

5.1 修改CSS样式

5.2 读取CSS样式

5.3 通过属性读取CSS样式

5.3 操作class修改样式

六、事件对象🚀🚀🚀

6.1 事件对象简介

6.2 Event对象

6.3 事件的冒泡

6.3 事件委派

6.4 事件的捕获

一、前言🚀🚀🚀

☀️ 广州的冬天没有雪但不影响他开着花。

这个系列可以叫作《前端从零开始系列》，花一周时间，把JS个人觉得笔记重点且常见的知识点，并且总结了起来。

二、DOM简介：☀️☀️☀️

2.1 为什么需要DOM

前边我们所学习的JS基础课程，学习了JS的基础知识。但是在学习过程中你会发现，似乎JS和网页并没有太大的关系。换句话说，我们所编写的代码，除了是写在网页中以外，并没有和网页产生任何实质的联系。如果JS不能操作网页，那么对于我们来说它就是一个废物，没有任何的使用价值。所以我们就需要一个新的技术，一个可以让我们使用J来操作网页的技术，也就是DOM.

2.2 什么是DOM

DOM，全称Document Object Model，中文翻译为文档对象模型。 DOM属于Web API的一部分。Web API中定义了非常多的对象，通过这些对象可以完成对网页的各种操作(添加删除元素、发送请求、操作浏览器等)

① DOM中的D意为Document，即文档。所谓文档就是指整个网页，换言之，DOM是用来操作网页的。 ② O意为Object，即对象。DOM将网页中的每一部分内容都转换为了对象，div有div的对象，input有input的对象，甚至一段文本，一段注释也有其所对应的对象。 转换为对象干什么?还记得面向对象吗?转换对象以后，我们就可以以面向对象的方式去操作网页，想要操作哪个元素就获取哪个元素的对象，然后通过调用其方法或属性完成各种操作。 ③ M意为Model，即模型模型用来表示对象之间的关系，也就是父子元素、祖先后代、兄弟元素等，明确关系后我们便可以通过任意一个对象去获取其他的对象。

2.3 节点与关系

三、如何使用DOM🚀🚀🚀

3.1 入门案例

通过JS代码可以获得按钮的对象，那么就可以通过JS来修改按钮的属性（文字、颜色、大小等）

3.2 文档结点 | Doucument对象（代表整个网页）

3.3 元素节点（代表每一个标签）

① 如何获取元素节点

doucument是代表整个网页，而元素节点element就代表某个标签。

除了这些，还有两个更强大的方法：