获取所有自定义 DOM 属性答案

【问题标题】：Get all custom DOM properties获取所有自定义 DOM 属性
【发布时间】：2023-03-25 10:35:01
【问题描述】：

我将 DOM 属性动态附加到一个元素，如下所示：

i = 0;
document.body['a' + i] = "foo";
document.body['b' + i] = "bar";

有没有一种方法可以获得我作为数组附加的所有这些属性？示例：

var allProperties = ['a0', 'b0'];

谢谢！

【问题讨论】：

你想要key还是value？我的意思是，您希望数组是 ["foo","bar"] 还是 ['a0','b0']？
@MarkWalters 我不想使用全局数组。
@AlexMorrise 如果我有密钥，我可以调用值，所以只有密钥就足够了。

标签： javascript html arrays dom

【解决方案1】：

您实际上可以创建一个新的 body 对象，并与该对象进行比较以获取浏览器未添加的属性

i = 0;
document.body['a' + i] = "foo";
document.body['b' + i] = "bar";

var el  = document.createElement('body'),
    arr = [];

for (var key in document.body) {
    if (document.body.hasOwnProperty(key) && !(key in el)) {
        arr.push(key);
    }
}

FIDDLE

有点花哨

var el  = document.createElement('body'),
    arr = Object.keys(document.body).filter(function(prop) {
        return !(prop in el);
    });

【讨论】：

完美答案！谢谢！
不错的一个！完全回避了添加单独的属性数组的需要。同时它会报告可能为初始body设置的属性
@samy - 它会返回浏览器本身未设置的所有属性，因此以后随时添加的任何内容都会返回，是的。

【解决方案2】：

为感兴趣的元素添加一个固定名称的属性，并推送自定义属性

var pushInto = function(element, name, value)
{
    element[name] = value;
    if (element["customProperties"] == undefined)
    {
         element["customProperties"] = [];
    }
    element["customProperties"].push(name);
}

那么你可以这样做：

pushInto(document.body, "name", "value");
document.body["customProperties"]; // ["name"]

【讨论】：