JavaScript 的组成
Web API 和标准库不同，WebAPI 是 浏览器 提供的一套 API，用于操作浏览器窗口和界面；
WebAPI 中包含两个部分：
- BOM：Browser Object Model，浏览器模型，提供和浏览器相关的操作；
- DOM：Document Object Model，文档模型，提供和页面相关的操作；
BOM
BOM 提供了一系列的对象和函数，提供和浏览器本身相关的操作
DOM
DOM 是一个对象，它对应到 HTML 中的节点
获取 dom
| API | 含义 |
|---|---|
| document.getElementById() | 根据元素 id 获取 dom，得到单个 dom |
| document.getElementsByTagName() | 根据元素名称获取 dom，得到 dom 的伪数组 |
| document.getElementsByClassName() | 根据元素类样式获取 dom，得到 dom 的伪数组 |
| document.querySelector() | 根据 CSS 选择器获取 dom，得到第一个匹配的 dom |
| document.querySelectorAll() | 根据 CSS 选择器获取 dom，得到所有匹配的 dom 伪数组 |
| document.documentElement | 获取 html 元素 |
| document.body | 获取 body |
| document.head | 获取 head |
| dom.children | 获取 dom 的子元素，得到 dom 的伪数组 |
| dom.childNodes | 获取 dom 的子节点，得到 dom 节点的伪数组，关于节点对象点 |
| dom.previousElementSibling | 得到 dom 前一个兄弟元素 |
| dom.nextElementSibling | 得到 dom 后一个兄弟元素 |
| dom.parentElement | 得到 dom 的父元素 |
创建 dom
| API | 含义 |
|---|---|
| document.createElement() | 创建一个 dom 并返回，传入元素名称 |
更改 dom 结构
| API | 含义 |
|---|---|
| dom.remove() | 从文档树中删除 dom，不是删除对象 |
| dom.removeChild() | 删除 dom 的某个子节点，传入 dom 对象 |
| dom.insertBefore() | 在 dom 的子节点中，添加一个新节点到另一个节点之前 |
| dom.appendChild() | 添加一个新节点到 dom 的子节点末尾，传入 dom 对象 |
dom 属性
dom 属性是指 HTML 元素的「属性」；
属性有两种：
- 标准属性：HTML 元素本身拥有的属性，例如： a 元素的 href、title …；
- 自定义属性：HTML 元素标准中未定义的属性；
所有标准属性均可通过
dom.属性名得到，其中：
- 布尔属性会被自动转换为 boolean；
- 路径类的属性会被转换为 绝对路径；
- 标准属性始终都是存在的，不管你是否有在元素中操作该属性；
- class 由于和关键字重名，因此需要使用 className；
所有的自定义属性均可通过下面的方式操作：
- dom.setAttribute(name, value)，设置属性键值对；
- dom.getAttribute(name)，获取属性值；
dom 内容
| API | 含义 |
|---|---|
| dom.innerText | 获取或设置元素文本内容，设置时会自动进行 HTML 实体编码 |
| dom.innerHTML | 获取或设置元素的 HTML 内容 |
dom 样式
在 JS 中，有两种样式：
- 内联样式：元素的 style 属性中书写的样式；
- 计算样式（最终样式）：元素最终计算出来的样式；
JS 可以获取内联样式和计算样式，但只能设置内联样式，下面罗列了样式的常见操作：
- dom.style：获取元素的内联样式，得到样式对象，对象中的所有样式属性均可以被赋值，赋值后即可应用样式到元素的 style 中；
- getComputedStyle(dom)：获取元素的计算样式，得到一个样式对象，该样式对象中的属性是只读的，无法被重新赋值；
关于 样式对象，注意：
- 当给样式赋值为空字符串时，相当于删除内联样式；
- 当给样式的赋值不合法时，赋值语句无效，不会报错；
- CSS 的短横线命名法，在属性名中表现为驼峰命名法；
dom 尺寸和位置
窗口尺寸
元素尺寸
元素相对于浏览器窗口位置
调用 dom.scrollTo(x, y) 可以设置元素的滚动位置，x 和 y 分别表示 scrollLeft 和 scrollTop；
该方法通用元素回到元素顶部 dom.scrollTo(0, 0)；
如果要监听元素的滚动，可以监听 scroll 事件类型；
元素相对于视口位置
const { top, left, right, bottom } = Element.getBoundingClientRect()
top、left、right、bottom 均相对于视口；
打赏作者
您的打赏是我前进的动力
微信
支付宝
第 2️⃣ 座大山：浅克隆、深克隆
上一篇
评论
