JS读取DOM对象自定义属性的兼容性问题与解决方案

作者：小圆点

时间：2026-10-30

本文探讨在JavaScript中读取DOM元素自定义属性的方法。通过对比直接访问属性与使用getAttribute方法，发现IE与Firefox在解析HTML标签中自定义属性时存在差异。为确保跨浏览器兼容，推荐使用getAttribute()方法获取自定义属性值。

文章目录

DOM对象与自定义属性概述

DOM对象是JavaScript开发中的基础元素，日常脚本编写几乎必然涉及对它的操作。开发者可以便捷地为DOM元素附加自定义属性，例如：


<div id="test" class="hello"></div>

var test = document.getElementById("test");

test.adang = "adang";

alert(test.adang);

执行上述代码后，id为test的DOM元素便拥有了名为adang的属性，随后在JS脚本中即可直接调用该属性。笔者在实际开发中频繁采用此方式，将DOM对象视为高效的数据容器，用于存储各类特殊数据。

由此引申出一个问题：既然属性能在JS中动态添加，是否也能像Flex技术那样，直接在HTML标签中定义？事实上，诸如id、src等标准属性，既可在JS中赋值，也可在标签中声明，JS均能正常读取。需注意的是class属性较为特殊，HTML标签中使用class，而在JS中访问时必须使用className。

对于id、title、src等HTML原生支持的属性，通常建议在标签中设置，再由JS读取。那么，针对如前文示例中的adang这类自定义属性，DOM对象是否也能直接访问？为此进行了如下实验：

JS动态添加自定义属性


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript">
window.onload=function(){
  var test = document.getElementById("test");
  test.adang = "adang";
  alert(test.adang);
}
</script>
<body>
<div id="test"></div> 
</body>
</html>

通过JS动态扩展自定义属性，结果符合预期，在IE和Firefox浏览器中均能正常输出。

接着编写了第二段测试代码，如下所示：

HTML标签中定义自定义属性的兼容性问题


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<script type="text/javascript">
window.onload=function(){
  var test = document.getElementById("test");
  alert(test.adang);
}
</script>
<body>
<div id="test" adang="adang"></div> 
</body>
</html>

此次将扩展属性直接写入HTML标签中。在IE浏览器下能正常输出adang的值，但在Firefox浏览器中却返回undefined。

然而令人意外的是，若采用DOM提供的getAttribute("属性名")方法，无论IE还是Firefox，均能正确获取到标签中定义的自定义属性值。