DOM 操作简介
我们知道，仅仅编写 HTML 而产生的页面是静态的，用户没办法和它进行交互，例如点击按钮，提交表单等，正因为如此，浏览器厂商推动了 JavaScript 语 言，来专门为 HTML 页面添加交互。
那么，为了能在 JavaScript 直接操作 HTML 元素，浏览器在解析 HTML 页面的时候，会按页面结构，把 HTML 文档转换成一个树形结构的 JavaScript 对象，与 HTML 中的元素层级保持一致。这个树形的 JS 对象，就是 DOM 对象。在 JavaScript 中，我们可以通过 document 这个对象来访问 dom。
DOM 全称是 Document Object Model，是 HTML 在浏览器内存中的表现形式，可以通过 JavaScript 来操作。
在浏览器的 console 控制台中，我们可以直接打印一下 document 对象的值：
可以看到它的内容就是整个 HTML 页面。
在普通的 JS 文件中，只要是在 HTML 中引入的，或者直接在 HTML <script> 标签中编写 JS 代码，也可以像这样直接访问 document 对象：
<!-- index.html -->
<!DOCTYPE html>
<head>
</head>
<body>
<script src="./index.js">
</body>
</html>
// index.js
console.log(document);
我们可以通过 DOM 对象暴露出来的方法（API）来选择某个 HTML 元素、修改它的内容、注册事件等等，这样就可以让页面有了交互性，可以处理按钮的点击事件、处理表单提交事件，还可以添加动画、播放音视频、绘图、支付、截图等等，这些增强用户体验的功能。
DOM 是浏览器提供给 JavaScript 操作 HTML 的途径，它是宿主环境提供的 API，而不是 JavaScript 语言本身的功能。
这一章里，我们就看一下如何在 JavaScript 中操作 DOM。
一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑，示例全部都为工作项目简化而来，学完即可直接上手开发！
即使你已经是高级前端工程师，在课程里也可能会发现新的知识点和技巧，让你的工作更加轻松！
《React 完全指南》课程，连载中现只需 48 元（领取优惠券）点击查看详情。
《Vue 3.x 全家桶完全指南与实战》课程，包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解，让你完全胜任 Vue 前端开发的工作。点击查看详情。
《React即时通信UI实战》课程，利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。
《JavaScript 基础语法详解》本人所著图书，包含 JavaScript 全面的语法知识和新特性， 可在京东、当当、淘宝等各大电商购买