javascript - 如何获取 DOM 元素上所有可能的有效属性

<分区>

请注意，.attributes 仅获取当前属性，这不是本题的目的。

我想要一种获取 DOM 元素的所有属性的方法。不仅是现在的，还有将来可能的。

具体用例是在 SVGElement 中找到 HTMLElement 中不存在的潜在属性 - MDN 上有一个列表 (SVG Attribute reference)，但是，出于显而易见的原因，硬编码不是一个好主意。

我最初的想法是遍历每个实例的原型(prototype)链并比较两个列表(对事件处理程序进行基本过滤)，但这实际上并没有给出潜在的 svg 属性。

编辑

重要说明 - 将您的答案代码粘贴到此页面的控制台中并使用 document.body 作为目标应该会显示超过 50 个属性的列表，包括 contentEditable、contextMenu、dir、style等
这也需要跨浏览器工作。

最佳答案

这会是您要找的东西吗？

看起来像一个 DOM 元素对象存储了所有可能属性的空键。您能否遍历这些键并将它们存储在一个数组中，然后从那里使用类似的东西来过滤掉继承的属性？

HTML

<svg id="blah"></svg>

Javascript

const blah = document.getElementById('blah')
let possibleKeys = []
for (let key in blah) {
  possibleKeys.push(key)
}

这是一个 JSBin example ...看起来它生成了所有可能属性的列表，但它需要一些过滤。

关于javascript - 如何获取 DOM 元素上所有可能的有效属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48339367/

相关文章：

javascript - 使用动态变量作为多维对象的键