简介
JavaScript中的 getElementsByTagName 方法可以通过标签名选取一个或多个文档对象模型（DOM）元素。然而，一些开发者可能会想知道是否可以使用这个方法来选取多个不同类型的标签。本篇文章将详细讨论这个问题，包括可行的解决方案和示例代码。
getElementsByTagName方法
getElementsByTagName 是一个常用于 JavaScript 中的 DOM 方法，它可以通过传递一个标签名字符串来选取一个或多个匹配该标签名的元素。例如：
const allDivs = document.getElementsByTagName("div"); // 选择所有 div 元素此时，allDivs 将包含文档中所有 <div> 标签的元素列表。
选取多个标签
然而，当我们要同时选取多个不同类型的标签时，getElementsByTagName 方法就无法满足我们的需求了。例如，假设我们想选取文档中的所有 <div> 和 <p> 标签，但是下面的代码并不能实现:
const allDivAndP = document.getElementsByTagName("div", "p"); // 这样的方法是错误的！解决方案
虽然 getElementsByTagName 方法无法同时选取多个不同类型的标签，但是有其他的方式可以实现这个功能。
使用querySelectorAll
可以使用 querySelectorAll 方法来选择多个不同类型的元素。语法与 querySelector 方法类似，只需要传递一个包含所有选择器的字符串。
例如，在下面的代码中，我们可以选择文档中的所有 <div> 和 <p> 标签：
const allDivAndP = document.querySelectorAll("div, p");使用数组合并
另一种方法是将多次调用 getElementsByTagName 的结果合并为一个数组。例如：
const allDivs = document.getElementsByTagName("div");
const allPs = document.getElementsByTagName("p");
const allDivAndP = [...allDivs, ...allPs];这里使用了扩展运算符 ... 来展开 NodeList 类型的数组。
示例代码
下面是一个完整的示例代码，演示如何使用 querySelectorAll 来选取多个不同类型的标签：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
-------
------
---- -------------- -- - ----------
------- -- - --------------
---- -------------- -- ------- ----------
--------
----- ---------- - ------------------------------- ----
------------------------------------ -
-------------------------------
---
---------
-------
-------在上面的代码中，我们使用 querySelectorAll 来选取所有 <div> 和 <p> 标签，并将结果存储在 allDivAndP 变量中。然后，我们使用 forEach 方法来迭代所有的元素，并打印它们的 innerHTML 属性。
结论
虽然 getElementsByTagName 方法无法同时选取多个不同类型的标签，但是使用 querySelectorAll 或多次调用 getElementsByTagName 后合并数组，都可以实现这个功能。由于 querySelectorAll 更加方便和灵活，建议优先考虑使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28165