JavaScript中如何获取未设置或无效属性的默认值？

当然有办法解决这个问题！你不用自己去实现getAttributeOrDefault这类函数，因为DOM元素本身就提供了直接获取浏览器实际生效属性值的方式——直接访问元素的对应属性，而不是用getAttribute方法。

为什么getAttribute不行？ #

getAttribute的作用是读取HTML源码里显式声明的属性值，它不会处理浏览器的默认行为或无效值修正。所以：

• 没写type的input，它返回null
• 写了无效type（比如integer）的input，它只会原封不动返回这个无效字符串

而直接访问DOM元素的属性（比如elm.type），会返回浏览器根据HTML规范处理后的实际生效值：

• 未声明type的input，浏览器默认设为text，所以elm.type返回text
• 声明了无效type的input，浏览器会自动修正为text，所以elm.type也返回text

代码示例对比 #

原来的代码：

let inputs = document.querySelectorAll('input');
inputs.forEach(function(elm){
  console.log(elm.getAttribute('type'));
});

输出结果：

null
integer
number
submit

改进后的代码：

let inputs = document.querySelectorAll('input');
inputs.forEach(function(elm){
  console.log(elm.type);
});

输出结果：

text
text
number
submit

通用场景的封装（可选） #

如果需要一个通用的工具函数来处理类似场景（不止input的type），可以简单封装一个，但对于input的type来说，直接用elm.type是最准确高效的：

function getEffectiveAttribute(element, attrName) {
  // 优先返回元素的标准化属性值（如果存在）
  if (attrName in element) {
    return element[attrName];
  }
  // fallback到getAttribute
  return element.getAttribute(attrName);
}

// 使用示例
inputs.forEach(elm => {
  console.log(getEffectiveAttribute(elm, 'type'));
});

这个函数会优先使用DOM元素的标准化属性，确保拿到的是浏览器实际生效的值，而不是源码里的原始字符串。

内容的提问来源于stack exchange，提问作者Takit Isy