JavaScript 在 HTML 节点中读写自定义属性的方法

JavaScript 操作自定义属性概述

本文详细介绍如何在 JavaScript 中操作 HTML body 内的任意节点，并为其添加自定义属性。内容包含具体实现代码与示例，供开发者参考学习。

在 HTML 结构中，除了 body 标签本身外，其内部任意节点均支持自定义属性。例如以下代码展示了这一特性：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html自定义标签</title>
</head>
<body>
<span id="s" iii="222"></span>
</body>
</html>

可以为 id 为 s 的 span 元素定义一个名为 iii 的自定义属性，并赋予值 222。该属性并非 span 元素的标准属性（如 id、style 等），因此不会影响节点本身的渲染表现。那么，这种操作的实际意义何在？

自定义属性的主要用途是为 JavaScript 提供数据载体。在实际开发中，HTML 结构往往较为复杂，尤其是配合 PHP、JSP 或 ASP.NET 等动态网页语言时。通过为特定节点设置自定义标签，可以利用 getAttribute 和 setAttribute 方法进行交互。例如，针对上述 HTML 页面，可以编写如下脚本：

<script>
var span=document.getElementById("s");
alert(s.getAttribute("iii")+"");
s.setAttribute("iii","2222121");
alert(s.getAttribute("iii")+"");
</script>

首先通过 getElementById 获取 span 节点，然后使用 getAttribute 方法读取其 iii 属性的值。需要注意的是，必须通过 +"" 将获取到的值强制转换为字符串，否则 alert 弹窗可能显示异常。

接着，使用 setAttribute 方法将 span 节点的 iii 属性值更新为 2222121，并再次弹出提示框以验证修改结果。

具体运行效果如下图所示：

如需了解更多 JavaScript 相关知识，建议参考本站专题：《JavaScript 操作 DOM 技巧总结》、《JavaScript 错误与调试技巧总结》、《JavaScript 数据结构与算法技巧总结》、《JavaScript 遍历算法与技巧总结》及《JavaScript 数学运算用法总结》。

希望本文关于 JavaScript 自定义属性操作的描述，能对大家的程序设计工作有所帮助。