【JS】一篇DOM详解笔记 | b站李立超

---

一、前言🚀🚀🚀

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

---

这个系列可以叫作《前端从零开始系列》，花一周时间，把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就代表某个标签。

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