【HTML】document api
🔹 一、文档节点获取
-
根节点相关
document.documentElement→<html>元素document.head→<head>元素document.body→<body>元素
-
元素获取
getElementById(id)→ 返回单个元素getElementsByClassName(className)→ 类数组，HTMLCollectiongetElementsByTagName(tag)→ 类数组，HTMLCollectionquerySelector(selector)→ 返回匹配的第一个元素querySelectorAll(selector)→ 返回 NodeList（可迭代）
🔹 二、节点创建 / 修改
createElement(tagName)→ 创建元素节点createTextNode(text)→ 创建文本节点appendChild(node)→ 插入子节点removeChild(node)→ 移除子节点
🔹 三、文档信息
document.title→ 文档标题document.URL→ 当前页面完整 URLdocument.domain→ 当前域名（可设置用于子域共享）document.referrer→ 引用来源 URLdocument.cookie→ 读写 cookie（受 SameSite、HttpOnly 限制）
🔹 四、事件相关
addEventListener(type, listener)→ 事件绑定removeEventListener(type, listener)→ 移除事件load事件 → 所有资源加载完成
✅ 总结（面试答法）
👉 可以这样回答：
Document 提供的 API 主要分几类：
- 获取元素：如
getElementById、querySelector。- 创建修改：如
createElement、appendChild。- 文档信息：如
title、URL、cookie。- 事件相关：如
addEventListener、load。
获取页面所有标签名
方法一：getElementsByTagName("*")
const allTags = document.getElementsByTagName("*")
const tagNames = [...allTags].map(el => el.tagName.toLowerCase())
console.log(tagNames)
*表示选择所有元素- 返回
HTMLCollection，需要转为数组再取.tagName - 输出所有标签名（可能会重复）
方法二：querySelectorAll("*")
const allTags = document.querySelectorAll("*")
const tagNames = [...allTags].map(el => el.tagName.toLowerCase())
console.log(tagNames)
- 返回
NodeList，可直接用扩展运算符转数组 - 效果和方法一类似