当前位置：首页 > 文章列表 > 文章 > 前端 > HTML中如何使用getElementsByTagName获取元素集合

HTML中如何使用getElementsByTagName获取元素集合

2026-05-04 11:09:40 0浏览收藏

从现在开始，我们要努力学习啦！今天我给大家带来《HTML中如何使用getElementsByTagName获取元素集合》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

getElementsByTagName返回HTMLCollection，是类数组对象但无map/filter/forEach方法；需用Array.from或扩展运算符转为真数组，或用for循环遍历；大小写不敏感，只读且不可修改。

getElementsByTagName 返回的是 HTMLCollection，不是数组

它看起来像数组（有 length、能用索引取值），但没有 map、filter、forEach 这些方法。直接调用会报 TypeError: NodeList.forEach is not a function（注意：虽然名字叫 HTMLCollection，但错误提示常写成 NodeList，别被误导）。

常见误操作：
document.getElementsByTagName('div').forEach(...) → 报错

正确做法是先转成真数组：

const divs = Array.from(document.getElementsByTagName('div'));

或者用扩展运算符（更简洁）：

const divs = [...document.getElementsByTagName('div')];

如果只处理前几个，也可以用 for 循环遍历原生集合（性能略好，无需转换）：

const els = document.getElementsByTagName('li');
for (let i = 0; i   console.log(els[i].textContent);
}

getElementsByTagName 只接受标签名字符串，不支持 CSS 选择器

它只能传纯标签名，比如 'p'、'input'、'*'（通配符）。不能传 'div.active' 或 '[data-id]' —— 那是 querySelectorAll 的活。

容易踩的坑：

写成 document.getElementsByTagName('div.class') → 返回空集合，不报错但查不到
想按 class 查却硬套这个 API，结果遍历全部再手动过滤，效率低还易漏

替代建议：

要精确匹配：用 document.querySelectorAll('div.active')
只要第一个匹配项：用 document.querySelector('input[type="text"]')
真得用标签名且范围可控：坚持用 getElementsByTagName，它比 querySelectorAll 略快（尤其在老浏览器里）

getElementsByTagName 是实时集合（live collection）

这意味着 DOM 变动会自动反映在该集合中。比如你拿到 const ps = document.getElementsByTagName('p')，之后又动态插入一个

new

，ps.length 会立刻变大，不需要重新调用。

这既是优势也是陷阱：

优势：适合监听 DOM 变化场景（如配合 MutationObserver 做轻量响应）
陷阱：在 for 循环中边遍历边删元素，可能导致跳过下一个节点（因为索引没变，但元素已上移）

安全删除写法（倒序遍历）：

const lis = document.getElementsByTagName('li');
for (let i = lis.length - 1; i >= 0; i--) {
  if (lis[i].textContent.includes('todo')) {
    lis[i].remove();
  }
}

兼容性没问题，但要注意作用域和大小写

getElementsByTagName 从 IE6 就支持，现代所有浏览器都稳。但它对标签名大小写**不敏感**（HTML 规范决定），document.getElementsByTagName('DIV') 和 'div' 效果一样。

但注意作用域限制：

只能查当前节点的后代，不能跨 shadow DOM（除非显式访问 shadowRoot）
如果在某个元素上调用，比如 el.getElementsByTagName('span')，只返回 el 内部的 span，不包括自身（即使它自己就是 span）
传空字符串或无效标签名（如 ''、null）会返回空集合，不报错

真正容易被忽略的一点：它返回的集合是只读的，不能用 push 或 splice 修改，也不能赋值给 length 来截断 —— 这些操作静默失败，不会报错，但也不起作用。

好了，本文到此结束，带大家了解了《HTML中如何使用getElementsByTagName获取元素集合》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！