Document

[TOC]

索引

属性：

document.documentElement：Element，只读，返回当前文档的直接子节点。对于 HTML 文档一般代表该文档的 html 元素。
document.body：body|frameset|null，获取或设置当前文档的 body 或 frameset节点（不常用设置）。
document.head：HTMLHeadElement，只读，返回当前文档的 head 元素。
document.title：string，获取或设置当前文档的标题。
document.doctype：DocumentType，只读，返回当前文档的文档类型定义DTD（<!DOCTYPE html>）。
document.images：HTMLCollection，只读，返回当前文档中所包含的图片的 HTMLCollection。
document.scripts：HTMLCollection，只读，返回包含文档中所有的 script 元素的 HTMLCollection。
document.links：HTMLCollection，只读，返回一个包含文档中所有超链接的 HTMLCollection。
document.forms：HTMLCollection，只读，返回一个包含当前文档中所有表单元素 form 的 HTMLCollection。
document.cookie：string，返回一个使用分号分隔的 cookie 列表，或设置（写入）一个 cookie。

方法：

元素查询：

现代方法：
document.querySelector() / el.querySelector()：(selectors)，返回文档中与指定的选择器匹配的第一个元素节点。
document.querySelectorAll() / el.querySelectorAll()：(selectors)，返回包含文档中与指定的选择器匹配的所有元素节点的列表。
传统方法：
document.getElementById()：(id)，返回与ID匹配的元素。
document.getElementsByClassName() / el.getElementsByClassName()：(classNames)，返回匹配给定类名的元素列表。
document.getElementsByTagName() / el.getElementsByTagName()：(tagname|*)，返回匹配给定标签名的元素列表。

元素创建：

document.createElement()：(tagName,options?)，用给定标签名创建一个新的元素，支持自定义标签。

文本写入：

document.write()：(...content)，不建议，用于向 HTML 文档直接写入内容的方法（可能引发副作用）。

Document

属性

document.documentElement：Element，只读，返回当前文档的直接子节点。对于 HTML 文档一般代表该文档的 html 元素。
document.body：body|frameset|null，获取或设置当前文档的 body 或 frameset节点（不常用设置）。
document.head：HTMLHeadElement，只读，返回当前文档的 head 元素。
document.title：string，获取或设置当前文档的标题。
document.doctype：DocumentType，只读，返回当前文档的文档类型定义DTD（<!DOCTYPE html>）。
document.images：HTMLCollection，只读，返回当前文档中所包含的图片的 HTMLCollection。
document.scripts：HTMLCollection，只读，返回包含文档中所有的 script 元素的 HTMLCollection。
document.links：HTMLCollection，只读，返回一个包含文档中所有超链接的 HTMLCollection。
document.forms：HTMLCollection，只读，返回一个包含当前文档中所有表单元素 form 的 HTMLCollection。
document.cookie：string，返回一个使用分号分隔的 cookie 列表，或设置（写入）一个 cookie。

方法

元素查询

querySelector()

document.querySelector() / el.querySelector()：(selectors)，返回文档中与指定的选择器匹配的第一个元素节点。

selectors：string，一个有效的 CSS 选择器，用于匹配目标元素。支持所有标准 CSS 选择器语法，包括组合器和伪类。
返回：
el：Element | null，返回文档中第一个匹配 selector 的元素（按文档流顺序）。若无匹配项，返回 null。
特性：
- 选择器规则：选择器遵循CSS的选择器规则
- 仅返回首个匹配项：即使有多个匹配元素，也只返回第一个
- 作用域限定：在父元素上调用时，仅搜索其后代元素
- 静态结果：返回的是查询时的快照，DOM 后续变化不影响结果（需重新查询）
- 性能优化：复杂选择器可能影响性能（推荐优先使用 ID 或类名选择器）
- 兼容性：支持所有现代浏览器（IE8+ 部分支持，需 CSS2 选择器）

示例：

基础用法

// 按 ID 选择（等效于 getElementById，但更灵活）
const header = document.querySelector('#header');

// 按类名选择（返回第一个匹配项）
const firstActiveItem = document.querySelector('.item.active');

// 按标签名选择（返回第一个 div）
const firstDiv = document.querySelector('div');

复合选择器

// 选择类为 btn 的 button 元素
const button = document.querySelector('button.btn');

// 选择 type 为 email 的输入框
const emailInput = document.querySelector('input[type="email"]');

// 选择直接子元素（ul 下的第一层 li）
const listItem = document.querySelector('ul > li');

伪类选择器

// 选择第一个段落（CSS 伪类）
const firstParagraph = document.querySelector('p:first-of-type');

// 选择被勾选的复选框
const checkedBox = document.querySelector('input[type="checkbox"]:checked');

querySelectorAll()

document.querySelectorAll() / el.querySelectorAll()：(selectors)，返回包含文档中与指定的选择器匹配的所有元素节点的列表。

selectors：string，一个有效的 CSS 选择器，用于匹配目标元素。支持所有标准 CSS 选择器语法，包括组合器和伪类。
返回：
els：NodeList，返回一个静态的 NodeList 集合，包含所有匹配的元素节点。若无匹配元素，返回空 NodeList（length 为 0）。
特性：
- 选择器规则：选择器遵循CSS的选择器规则
- 返回所有匹配项：特殊，返回全部匹配元素（非仅第一个）
- 作用域限定：在父元素上调用时，仅搜索其后代元素
- 静态结果：返回的是查询时的快照，DOM 后续变化不影响结果（需重新查询）
- 遍历方式：特殊，支持 forEach() 方法，或转换为数组操作
- 性能优化：复杂选择器可能影响性能（推荐优先使用 ID 或类名选择器）
- 兼容性：支持所有现代浏览器（IE8+ 部分支持，需 CSS2 选择器）

示例：

基础用法

// 选择所有类名为 "item" 的元素
const items = document.querySelectorAll('.item');
items.forEach(item => {
  console.log(item.textContent);
});

// 选择所有段落中的链接
const linksInParagraphs = document.querySelectorAll('p a');

转换为数组操作

const buttons = document.querySelectorAll('.btn');
const buttonsArray = Array.from(buttons); // 或 [...buttons]

// 使用数组方法过滤元素
const activeButtons = buttonsArray.filter(btn => btn.disabled === false);

getElementById()

document.getElementById()：(id)，返回与ID匹配的元素。

id：string，要查找的元素的 ID 值。需严格区分大小写，且必须与目标元素的 id 属性完全匹配。
返回：
el：HTMLElement | null，找到对应 ID 的元素时，返回该元素的引用，未找到时返回 null。
特性：
1. ID 唯一：HTML 文档中 ID 应唯一，多个相同 ID 时返回第一个匹配元素（行为不确定，需避免此情况）。
2. 区分大小写：ID会区分大小写，Header和header是不同的ID。
3. DOM 加载时机：需确保元素已加载到 DOM 中，否则返回 null（建议在 DOMContentLoaded 事件后调用）。
4. 性能优化：浏览器内部通过哈希表加速查找，时间复杂度为 O(1)。
5. 动态元素支持：动态添加的元素（如通过 JS 插入）只要 ID 唯一且已插入 DOM，即可被找到。

示例：

基本用法

html

<div id="content">页面内容</div>

// 获取元素并修改内容
const contentDiv = document.getElementById('content');
if (contentDiv) {
  contentDiv.textContent = '更新后的内容';
}

动态元素处理

// 动态创建元素并插入 DOM
const newElement = document.createElement('div');
newElement.id = 'dynamicElement';
document.body.appendChild(newElement);

// 立即获取（有效）
const dynamicElement = document.getElementById('dynamicElement');
console.log(dynamicElement); // 输出: <div id="dynamicElement"></div>

getElementsByClassName()

document.getElementsByClassName() / el.getElementsByClassName()：(classNames)，返回匹配给定类名的元素列表。

classNames：string，一个或多个类名，用空格分隔。方法会匹配所有同时包含这些类名的元素。
返回：
els：HTMLCollection，一个动态的类数组对象，包含所有匹配的元素。若无匹配元素，返回空的 HTMLCollection（非 null）。
特性：
- 类名顺序无关：参数中的类名顺序不影响匹配（如 "active btn" 和 "btn active" 等效）
- 部分匹配无效：必须完全包含所有指定的类名（如 class="btn-primary" 不会被 "btn" 匹配）
- 多类名逻辑：多个类名用空格分隔，方法会匹配所有同时包含这些类名的元素。
- 作用域限制：可通过父元素调用以限定搜索范围
- 动态性：返回的HTMLCollection集合会随 DOM 变化自动更新（如新增/删除符合条件的元素）。
- 兼容性：支持所有现代浏览器（IE9+），但 IE8 及更早版本不支持

示例：

基本用法

html

<div class="item">Item 1</div>
<div class="item active">Item 2</div>
<div class="item">Item 3</div>

// 获取所有包含 "item" 类的元素
const items = document.getElementsByClassName("item");
console.log(items.length); // 输出: 3

// 获取同时包含 "item" 和 "active" 类的元素
const activeItem = document.getElementsByClassName("item active");
console.log(activeItem.length); // 输出: 1

限定作用域

html

<div id="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
</div>

const container = document.getElementById("container");
const boxes = container.getElementsByClassName("box"); // 仅在容器内查找

处理动态集合

const buttons = document.getElementsByClassName("btn");

// 新增一个按钮（自动加入集合）
const newButton = document.createElement("button");
newButton.className = "btn";
document.body.appendChild(newButton);
console.log(buttons.length); // 输出: 原数量 + 1

// 删除一个按钮（自动从集合移除）
document.querySelector(".btn").remove();
console.log(buttons.length); // 输出: 原数量 - 1

getElementsByTagName()

document.getElementsByTagName() / el.getElementsByTagName()：(tagname|*)，返回匹配给定标签名的元素列表。

tagname：string，要匹配的 HTML 标签名（如 "div"、"a"）。特殊值 * 匹配所有元素。
返回：
els：HTMLCollection，动态的类数组对象，包含所有匹配的元素节点。若无匹配元素，返回空集合（length 为 0）。
特性：
- 大小写区分：
  - HTML 文档中标签名大小写不敏感（如 "DIV" 和 "div" 等效）。
  - XML/XHTML 文档中，标签名可能区分大小写。
- 仅匹配元素节点：忽略文本节点、注释节点等非元素节点
- 全局与局部作用域：可在 document 或特定父元素上调用以限定搜索范围
- 通配符支持："*" 匹配所有元素（谨慎使用，可能影响性能）
- 动态性：返回的HTMLCollection集合会随 DOM 变化自动更新（如新增/删除符合条件的元素）。
- 兼容性：所有现代浏览器（包括 IE6+）
- 性能优化：标签名查询速度较快，但大规模文档中建议限定作用域

示例：

基础用法

html

<div>Div 1</div>
<div>Div 2</div>
<p>段落</p>

// 获取所有 div 元素
const divs = document.getElementsByTagName("div");
console.log(divs.length); // 输出: 2

// 获取所有段落元素
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs[0].textContent); // 输出: "段落"

使用通配符 *

// 获取文档中所有元素
const allElements = document.getElementsByTagName("*");
console.log(allElements.length); // 输出文档总元素数

限定作用域

html

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

const list = document.getElementById("list");
const items = list.getElementsByTagName("li"); // 仅在列表内查找
console.log(items.length); // 输出: 2

处理动态集合

const divs = document.getElementsByTagName("div");

// 动态添加元素（自动加入集合）
const newDiv = document.createElement("div");
document.body.appendChild(newDiv);
console.log(divs.length); // 输出: 原数量 + 1

// 动态删除元素（自动从集合移除）
document.querySelector("div").remove();
console.log(divs.length); // 输出: 原数量 - 1

元素创建

createElement()

document.createElement()：(tagName,options?)，用给定标签名创建一个新的元素，支持自定义标签。

tagName：string，要创建的元素的标签名（如 "div"、"p"），不区分大小写。支持自定义标签。
options?：{is}，该对象的值是用 customElements.define() 方法定义过的一个自定义元素的标签名。
返回：
el：HTMLElement，返回一个新创建的 HTMLElement 对象。
特性：
- 创建自定义标签：可以创建自定义标签，但需通过 customElements.define() 注册。
  js
```
// 创建自定义元素
const myElement = document.createElement("my-component");

// 注册自定义元素类
customElements.define("my-component", class extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = "<p>自定义组件</p>";
  }
});

// 插入到文档
document.body.appendChild(myElement);
```
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
- 元素命名规范：
  - 标准标签：如 "div"、"span"，浏览器自动映射到对应的 DOM 接口。
  - 自定义标签：必须包含连字符（如 "my-element"），否则会被视为无效。
- 元素初始状态：
  - 新创建的元素默认未添加到 DOM 树中，需手动插入（如 appendChild、insertBefore）。
  - 未设置属性的元素仅有默认行为（如 <a> 无 href 时不可点击）。

示例：

创建一个div元素并设置属性

// 创建元素
const div = document.createElement("div");

// 设置属性
div.id = "myDiv";
div.className = "container";
div.textContent = "动态创建的 Div";

// 插入到 body 末尾
document.body.appendChild(div);

// DIV元素： <div id="myDiv" class="container">动态创建的 Div</div>

文本写入

write()

document.write()：(...content)，不建议，用于向 HTML 文档直接写入内容的方法（可能引发副作用）。

...content：string，接受一个或多个字符串参数（可以是纯文本、HTML 标签或动态生成的内容），多个参数会自动拼接成一个字符串。
特性：
- 建议同步使用：
  - 同步使用：若在script中同步使用，内容会直接插入文档。
    html
```
<body>
  <script>
    document.write("<p>页面加载中插入的内容</p>");
  </script>
</body>
```
    1
    2
    3
    4
    5
  - 异步使用：若在事件处理函数或定时器中异步使用，会清空当前文档并从头开始写入。
    js
```
// 点击按钮后，整个页面内容被覆盖！
button.addEventListener("click", () => {
  document.write("页面已被覆盖！");
});
```
    1
    2
    3
    4
- 阻塞渲染：同步写入可能延迟页面渲染。
- 难以维护：直接操作文档流可能导致代码混乱，尤其是在复杂项目中。

Document ​

索引 ​

Document ​

属性 ​

方法 ​

元素查询 ​

querySelector() ​

querySelectorAll() ​

getElementById() ​

getElementsByClassName() ​

getElementsByTagName() ​

元素创建 ​

createElement() ​

文本写入 ​

write() ​

Document

索引

Document

属性

方法

元素查询

querySelector()

querySelectorAll()

getElementById()

getElementsByClassName()

getElementsByTagName()

元素创建

createElement()

文本写入

write()