DOM 元素是否可以具有其值为任意对象(而不是字符串）的属性

Can a DOM element have an attribute whose value is an arbitrary object (not a string)?

本文关键字：对象 字符串 属性 任意 是否 元素 DOM      更新时间：2023-09-26

我想做这样的事情：

var elem = document.createElement("input");
elem.setAttribute("my-attribute", myObject);
document.getElementById("parent").appendChild(elem);

稍后，我将需要在此（和类似）元素上执行某些操作时获取myObject。

注意：我需要将其作为属性（而不是例如，作为元素对象的成员，如elem.myAttribute = myObject），对于某些元素，该值是一个字符串，该字符串被硬编码到页面的 HTML 中。我需要的是能够以编程方式为其他元素设置此属性，并使用并不总是纯字符串的值。

我试过这个，它在我的浏览器（Firefox 14）中工作，但我需要知道这是否适用于跨浏览器，以及如果我决定稍后在我的页面中使用 jQuery，我是否能够使用 jQuery 获取这些属性的值。

否 - 根据定义，属性存储字符串值。显而易见的方法是将对象存储为属性，但您说这不合适。

也：

1）使用jQuery的数据API（因为它不会在元素上记录数据，所以你可以存储任何你想要的东西，而不仅仅是字符串）

2） 字符串化对象并将其作为 HTML5 数据属性附加到元素中。

var elem = document.querySelector('p'),
    obj = {foo: 'bar'};
elem.setAttribute('data-myObj', JSON.stringify(obj));
/* ...then, later... */
var data = JSON.parse(elem.getAttribute('data-myObj'));

但请注意，由于我们正在处理 JSON，因此您将无法将方法存储为此对象的一部分。它们将被JSON.stringify()剥离.

最后，使用属性意味着你会混淆你的 HTML，因为它们出现在任何 HTML 转储中（与属性不同），但这纯粹是一个表面弱点。

您可以使用 jquery 中的数据属性来执行此操作（http://api.jquery.com/data/）

您可以使用 html 5 数据属性：http://ejohn.org/blog/html-5-data-attributes/

这些可以使用jquery数据API进行检索。

但是，这些必须被串起来

"从jQuery 1.4.3开始，HTML 5数据属性将自动拉入jQuery的数据对象"

相关文章：