文章目录
一、前言🚀🚀🚀
☀️
广州的冬天没有雪但不影响他开着花。
这个系列可以叫作《前端从零开始系列》，花一周时间，把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就代表某个标签。
除了这些，还有两个更强大的方法：
② 元素节点（方法小总结）
③ 元素节点的属性和方法
上面我们讲的是如何去获取元素节点 ，接下来我们看一下元素节点的结构，也就是它的这个原型链，
我们先简单的写一段js代码通过元素ID获取标签对象。如下图：
我们可以直接看到如下：直接把这个东西给打印出来了。
现在的话我们来看一下它的原型链。（我们这里看的是div它的原型链）
如果是其他标签，比如span，那它的HTMLDivElement这个元素会变。
这里还有几个注意的方法。 第二个方法比较实用一点。
3.4 文本节点
前面教的内容是不是可以通过元素去获得文本节点对象，但是我们一般不会这么做，在DOM中网页的所有内容都是文本对象。
即上面这个并不能作为正在的标签去显示。
重点：xss注入与element.innerHTML
什么叫xss注入呢，就是一些别有用心的人把游戏恶意的代码注入到我们的网站当中去，注入以后可能会窃取到网页中用户的信息等。
如下图：
假设你这一块是一段留言，他以留言的方式给你插入了这一行代码，那注意了， 这行代码他能看见，其他人访问你的网站的话，也会使得这个脚本在其他人的网站上运行。
小总结
3.5 属性节点
四、DOM相关概念/知识🚀🚀🚀
4.1 事件
4.2 文档的加载
这是什么原因，const btn = document.getElementById（“btn”）,这句话是当浏览器把网页给加载完后，它会自动根据网页当中的元素去生成对象。加载网页就生成一个document对象，加载html就生成一个html元素对象。加载到哪就生成什么对象。
那当我们把代码写在上面的时候，是不是谁先加载谁就先执行了，写在上面先执行了，下面这一堆还没有加载，那这个btn还没有所以就获取不到。
这里有四种实现方法
（注意：回调函数会在我们的窗口加载完了以后才执行）
总结
4.3 练习
① 图片按钮点击切换
需求： 我们有几张图片，然后在网页当中把图片给显示出来，然后整两个按钮，通过按钮的点击来切换这个图片。
这里相当于把切换图片给写死了，因为只能转上下张，并且这里图片名称要为1和2。缺乏灵活性。要是路径是英文该怎么办勒？
但是这边它的索引页写死了，我们需要动态的变换。
这里由于current不能小于0与大于图片的总数量，所以可以在逻辑上加一点校验。
如何实现？
② 按钮点击全选
body内容：
全选按钮：
获取取消按钮和反选功能：
查看
点击全选checkbox，小的checkbox和它同步
到这里代码功能就全部实现了，但是可以看到代码比较冗杂，复用性不高。
4.4 元素的增删改
元素的修改
body部分：
完善后整体的代码：
body内容：
script内容：
4.5 如何解决XXS注入问题
4.6 节点的复制
五、JS操作CSS🚀🚀🚀
前面我们学的可以说是js如何操作结构，然后接下来将学习操作css。
5.1 修改CSS样式
5.2 读取CSS样式
getComputedStyle()，它会返回一个对象，这个对象中包含了当前元素所有的生效的样式
5.3 通过属性读取CSS样式
body部分：
script部分：
5.3 操作class修改样式
六、事件对象🚀🚀🚀
6.1 事件对象简介
6.2 Event对象
6.3 事件的冒泡
6.3 事件委派
我们本来是要一个一个绑定事件的，但是可以直接通过委派把事件绑定给doucument，完了后事件我们只需要绑定一次，即可让多个元素拥有该事件。统一把事件委托给doucument管了。
6.4 事件的捕获
版权归原作者 她和夏天一样热 所有， 如有侵权，请联系我们删除。