如何将HTMLElement转换为标签名并实现元素匹配？

我拥有一个包含HTMLParagraphElement、HTMLDivElement等不同HTMLElement标签的数组。请问是否可以将HTMLParagraphElement转换为'p'，或者通过某种方式实现元素类型与标签名的匹配？我希望达成类似HTMLDivElement === "div"、HTMLParagraphElement === "p"这样的匹配逻辑，同时完善以下findTag函数，使其能根据传入的标签名收集页面中对应的元素：

function findTag(tagName) {
  const nodes = []
  
  var all = document.getElementsByTagName("*");

  for (let i=0; i < all.length; i++) {
      // here i'm trying to compare tag to an HTMLElement. 
      // If it corresponds such as 'p' = HTMLParagraphElement, I want to push it into 'nodes' array.
  }
  
  return nodes
}

console.log(findTag('p'));

一、元素类型与标签名的匹配方法 #

1. 从元素实例获取对应标签名 #

直接调用元素的tagName属性（返回大写格式的标签名），转小写后就能得到标准标签名：

const pElement = document.querySelector('p');
console.log(pElement.tagName.toLowerCase()); // 输出 'p'

2. 构造函数与标签名的映射 #

如果需要直接将HTMLParagraphElement这类构造函数和标签名关联，可手动维护一个映射表：

// 构造函数到标签名的映射表
const typeToTagMap = {
  HTMLDivElement: 'div',
  HTMLParagraphElement: 'p',
  HTMLSpanElement: 'span',
  HTMLImageElement: 'img',
  // 按需补充其他元素类型
};

// 用法示例
console.log(typeToTagMap[HTMLParagraphElement.name]); // 输出 'p'

反过来也可以建立标签名到构造函数的映射，方便校验元素类型：

const tagToTypeMap = {
  'div': HTMLDivElement,
  'p': HTMLParagraphElement,
  'span': HTMLSpanElement,
};

// 校验元素类型
const div = document.querySelector('div');
console.log(div instanceof tagToTypeMap['div']); // 输出 true

二、完善findTag函数 #

1. 基于原始思路的修改 #

遍历所有元素时，统一标签名的大小写后进行匹配：

function findTag(tagName) {
  const nodes = []
  const targetTag = tagName.toLowerCase(); // 统一转小写，规避大小写差异问题
  
  const allElements = document.getElementsByTagName("*");

  for (let i = 0; i < allElements.length; i++) {
      const currentTag = allElements[i].tagName.toLowerCase();
      if (currentTag === targetTag) {
          nodes.push(allElements[i]);
      }
  }
  
  return nodes
}

console.log(findTag('p')); // 返回页面中所有<p>元素

2. 更高效的原生API实现 #

原生的getElementsByTagName或querySelectorAll本身就是专门按标签名查找元素的API，效率远高于手动遍历所有元素，直接使用即可：

// 方案一：用getElementsByTagName（返回动态HTMLCollection，转成数组）
function findTag(tagName) {
  return Array.from(document.getElementsByTagName(tagName));
}

// 方案二：用querySelectorAll（返回静态NodeList，转成数组）
function findTag(tagName) {
  return Array.from(document.querySelectorAll(tagName));
}

console.log(findTag('p'));

注意：getElementsByTagName返回动态集合（页面元素变化时会自动更新），querySelectorAll返回静态集合，可根据需求选择。

内容的提问来源于stack exchange，提问作者Roma Kim