原生JavaScript获取输入元素属性值：旧IE代码失效问题与最佳实践

一、如何用原生JavaScript获取输入元素的属性值？ #

这里有几种常用且靠谱的方法：

• 使用getAttribute()方法：不管是标准属性还是自定义属性，都可以用这个方法获取，比如要获取某个input的自定义属性值，写法是：document.querySelector('input').getAttribute('tipo')
• 直接访问标准属性：对于HTML标准规定的属性（比如value、type、id这些），可以直接通过DOM元素对象访问，比如myInput.value就能拿到输入框的值
• HTML5自定义数据属性（data-*）：如果是自己定义的属性，现在推荐用data-前缀，然后通过dataset对象访问，比如myInput.dataset.tipo

二、旧代码在新版浏览器失效的原因及最佳实践 #

问题背景 #

你提到这段10年前在IE6能正常运行的代码，现在调用返回undefined：

<html> 
<body> 
<input type="button" tipo="MA" onclick="alert(this.tipo);"> 
</body> 
</html>

这确实是因为HTML5规范和现代浏览器的处理逻辑变了。旧版IE对自定义属性的处理比较“随性”，允许直接通过元素对象访问非标准属性，但现代浏览器严格遵循HTML5规范，非标准的自定义属性不会自动挂载到DOM元素对象上，所以this.tipo自然拿不到值。

解决方案（最佳实践） #

现在自定义元素属性的标准做法是用HTML5的data-*属性，具体步骤：

1. 把自定义属性改成data-开头的格式，比如把tipo="MA"改成data-tipo="MA"
2. 通过元素的dataset属性来访问这个值，也就是this.dataset.tipo

修改后的代码如下：

<input type="button" data-tipo="MA" onclick="alert(this.dataset.tipo);">

这种写法完全符合HTML5规范，在所有现代浏览器都能正常工作，同时也保持了代码的可读性和兼容性。

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