getelementbyid 只能用 id,因其直接查 dom 树的 id 索引表,不解析 css 选择器语法,故传入空格、点号或井号均返回 null;html id 大小写敏感,重复 id 时仅返回首个,属非法 html。

getElementById 为什么只能用 ID?
getElementById 是唯一一个不走 CSS 选择器引擎的 API,它直接查 DOM 树的 ID 索引表,所以快、准、只认 id 属性值(且必须是全局唯一)。一旦传入的字符串含空格、点号或井号,它不会报错,但返回 null——因为它根本不解析选择器语法。
- ID 值带前缀如
user-123没问题,但#user-123或.user就会失效 - 不区分大小写?错,HTML ID 是大小写敏感的,
getElementById("Header")找不到id="header" - 多个元素用了同一个
id?浏览器通常只返回第一个,但这是非法 HTML,别依赖
querySelector 和 querySelectorAll 的选择器陷阱
querySelector 和 querySelectorAll 共享同一套 CSS 选择器逻辑,但行为差异极大:前者只返回第一个匹配项(null 表示没找到),后者返回 NodeList(即使为空也是真 NodeList)。
-
document.querySelector("div p")匹配后代,document.querySelector("div > p")才是子元素 - 伪类如
:hover或:nth-child(2n)能用,但:focus只在真实聚焦时才匹配,脚本里调用基本无效 - 动态插入的节点,只要已挂载到 DOM,就能被立刻查到;但若还在内存中未 append,查不到
-
querySelectorAll(".btn[data-loading]")可以查带属性的元素,但querySelectorAll("[data-loading=true]")要求值完全相等,不推荐用布尔属性写法
getElementsByClassName 和 getElementsByTagName 返回的是“活”的集合
getElementsByClassName 和 getElementsByTagName 都返回 HTMLCollection,特点是「动态实时」:DOM 变了,集合内容自动更新。这和 querySelectorAll 返回的静态 NodeList 完全不同。
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
- 写
for (let i = 0; i 会漏删——因为每次 <code>remove()后els.length实时减小,下标错位 - 正确做法是倒序遍历,或先转成数组:
[...els].forEach(el => el.remove()) -
getElementsByClassName("a b")查的是同时含 classa和b的元素,不是查a下的b -
getElementsByTagName("*")返回所有元素,但性能差,现代代码尽量避免
为什么 document.getElementsByName 在现代项目里几乎不用
getElementsByName 只对具有 name 属性的表单控件(input、select、textarea、button、form)有效,且返回 NodeList(注意:不是 HTMLCollection)。它的语义是“表单数据提交时的字段名”,不是通用查找手段。
-
<div name="foo"></div>不会被选中,哪怕加了name属性也没用 - 在 iframe 中调用需注意上下文:
iframe.contentDocument.getElementsByName(...) - 多个同名
input type="radio"会归为一组,适合批量操作,但日常 DOM 查找更常用querySelector
容易被忽略的一点:这些 API 全部只在当前节点作用域内搜索,el.getElementById(...) 是无效的——getElementById 只属于 document,其他节点只能用 querySelector 系列。
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!










