DOM 操作简介

只编写 HTML 而产生的页面是静态的（静态页面），是没办法和它进行交互，例如点击按钮，提交表单等。 JavaScript 语言，就是专门为 HTML 页面添加交互。（使用JS编写相关代码，将页面由静转动，也就是动态页面）

【PS：爬虫的时候最不喜欢的就是动态页面了（doge）要动脑】

为了能在 JavaScript 直接操作 HTML 元素，浏览器在解析 HTML 页面的时候，会按页面结构，把 HTML 文档转换成一个树形结构的 JavaScript 对象，与 HTML 中的元素层级保持一致。这个树形的 JS 对象，就是 DOM 对象。在 JavaScript 中，可以通过 document 这个对象来访问 dom。

DOM 全称是 Document Object Model，是 HTML 在浏览器内存中的表现形式，可以通过 JavaScript 来操作。（是BOM的其中一个对象，BOM是Windows）

在浏览器的 console 控制台中，打印一下 document 对象的值：（两种方式）

  • 使用console.log()函数来打印document对象的值【console.log()是输出函数】
  • 直接document回车，就会输出document 对象的值

JS的DOM操作一：DOM操作简介_javascript

JS的DOM操作一：DOM操作简介_javascript_02

可以看到它的内容就是整个 HTML 页面。

在普通的 JS 文件中，只要是在 HTML 中引入的，或者直接在 HTML <script> 标签中编写 JS 代码，也可以像这样直接访问 document 对象：

<head>
</head>
  <body>
    <script src="./index.js">
  </body>
</html>

// index.js文件
console.log(document);
<!-- 外链式导入js文件  -->
<script src="./DOM操作简介.js"></script>
<!-- html文件加载完毕后才会执行js文件，所以一般js文件写在html文件的最下面 -->

JS的DOM操作一：DOM操作简介_javascript_03

可以通过 DOM 对象暴露出来的方法（API）来选择某个 HTML 元素、修改它的内容、注册事件等等，这样就可以让页面有了交互性，可以处理按钮的点击事件、处理表单提交事件。

JS的DOM操作一：DOM操作简介_外链式_04


总结

  1. JavaScript 语言，为 HTML 页面添加交互效果。（脚本语言，弱类型）
  2. JavaScript 中通过 document 来访问 DOM。
  3. DOM是浏览器提供的，不是JS本身的功能。
  4. 直接在浏览器控制台输出document即可查看该值。

SOP一下

  • document：文件、文档、证件
  • DOM
  • API：应用程序接口（接口）、空气污染指数
  • Script：脚本、剧本、广播