🔹 一、文档节点获取
-
根节点相关
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,可直接用扩展运算符转数组 - 效果和方法一类似