Web API 基本认知

作用和分类

作用：使用js去操作html和浏览器 分类：DOM（文档对象模型）、BOM（浏览器对象模型）

什么是DOM

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API

白话文：DOM是浏览器提供的一套专门用来 “操作网页内容” 的功能

作用：开发网页内容特效和实现用户交互

DOM树

• DOM树是什么：
  • 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
  • 描述网页内容关系的名词

作用：文档树直观的体现了标签与标签之间的关系

DOM对象（重要）

DOM对象：浏览器根据html标签生成的 JS对象

• 所有的标签属性都可以在这个对象上面找到
• 修改这个对象的属性会自动映射到标签身上

⚠️ 在html叫标签 在js的DOM里叫DOM对象

代码演示：

  <div>123</div>
  <script>
    const div = document.querySelector('div')
    // 打印对象
    console.dir(div)  // dom 对象
  </script>

结果：

DOM的核心思想

• 把网页内容当做对象来处理

document 对象

• 是 DOM 里提供的一个对象
• 所以它提供的属性和方法都是用来访问和操作网页内容的
  • 例：document.write()
• 网页所有内容都在document里面