【HTML】document api

发布于:2025-08-19 ⋅ 阅读:(17) ⋅ 点赞:(0)

🔹 一、文档节点获取

  • 根节点相关

    • document.documentElement<html> 元素
    • document.head<head> 元素
    • document.body<body> 元素
  • 元素获取

    • getElementById(id) → 返回单个元素
    • getElementsByClassName(className) → 类数组,HTMLCollection
    • getElementsByTagName(tag) → 类数组,HTMLCollection
    • querySelector(selector) → 返回匹配的第一个元素
    • querySelectorAll(selector) → 返回 NodeList(可迭代)

🔹 二、节点创建 / 修改

  • createElement(tagName) → 创建元素节点
  • createTextNode(text) → 创建文本节点
  • appendChild(node) → 插入子节点
  • removeChild(node) → 移除子节点

🔹 三、文档信息

  • document.title → 文档标题
  • document.URL → 当前页面完整 URL
  • document.domain → 当前域名(可设置用于子域共享)
  • document.referrer → 引用来源 URL
  • document.cookie → 读写 cookie(受 SameSite、HttpOnly 限制)

🔹 四、事件相关

  • addEventListener(type, listener) → 事件绑定
  • removeEventListener(type, listener) → 移除事件
  • load 事件 → 所有资源加载完成

✅ 总结(面试答法)

👉 可以这样回答:

Document 提供的 API 主要分几类:

  1. 获取元素:如 getElementByIdquerySelector
  2. 创建修改:如 createElementappendChild
  3. 文档信息:如 titleURLcookie
  4. 事件相关:如 addEventListenerload

获取页面所有标签名

方法一: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,可直接用扩展运算符转数组
  • 效果和方法一类似


网站公告

今日签到

点亮在社区的每一天
去签到