咨询：使用Element.getAttributeNames替代Element.attributes的优劣及潜在问题

Great question! Let's break down the tradeoffs of using Element.getAttributeNames() instead of directly working with Element.attributes—since MDN highlights the performance win but doesn't cover the potential downsides.

Pros of getAttributeNames() #

• Better performance: As MDN notes, this method returns a static array of attribute names, whereas Element.attributes gives you a live NamedNodeMap collection. Live collections have inherent overhead because they sync with DOM changes in real time—every time you access or iterate over them, the browser may re-query the DOM. The static array from getAttributeNames() is a snapshot, so iterating or manipulating it is faster and more predictable.
• Cleaner, more intuitive code: Getting attribute names becomes a one-liner, and you can use all familiar array methods (forEach, filter, map) right out of the box. Compare:
  Using attributes:

  const attrNames = [];
  const attrs = element.attributes;
  for (let i = 0; i < attrs.length; i++) {
    attrNames.push(attrs[i].name);
  }
  

  Using getAttributeNames():

  const attrNames = element.getAttributeNames();
  // Example: filter data attributes easily
  const dataAttrs = attrNames.filter(name => name.startsWith('data-'));
  

• No unexpected live collection behavior: Since NamedNodeMap is live, if the element's attributes change while you're iterating over it, you might get skipped or duplicated entries. The static array from getAttributeNames() avoids this entirely—it won't update even if the DOM changes later.

Cons of getAttributeNames() #

• Browser compatibility gaps: This method is not supported in any version of Internet Explorer (including IE11). If your project needs to support legacy browsers, you'll have to stick with Element.attributes or add a polyfill for getAttributeNames().
• Extra overhead if you need attribute values: If your goal is to get both names and values, Element.attributes gives you Attr objects that include both properties in one go. With getAttributeNames(), you'd have to loop through the array and call element.getAttribute(name) for each entry, which adds unnecessary steps (especially for elements with many attributes).
• No built-in attribute manipulation: The NamedNodeMap from Element.attributes includes methods like getNamedItem(), setNamedItem(), and removeNamedItem() to directly modify attribute nodes. getAttributeNames() only returns names—you'll need to use separate methods like setAttribute() or removeAttribute() if you want to make changes to the element's attributes.

内容的提问来源于stack exchange，提问作者Oscar Fabiani