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

问题描述

请注意 .attributes 只获取当前属性，这不是本题的内容.

Please note that .attributes only gets the current attributes, which is not what this question is about.

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

I want a way to get all the attributes of a DOM element. Not just the ones that are on it now, but the ones that are possible in the future too.

具体用例是在 SVGElement 中查找 HTMLElement 中没有的潜在属性 - MDN 上有一个列表(SVG 属性参考)，但是，由于显而易见的原因，硬编码不是一个好主意.

The specific use case is to find the potential attributes in an SVGElement that aren't in an HTMLElement - there's a list on MDN (SVG Attribute reference), but, for obvious reasons, hardcoding is not a good idea.

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

My initial thought was to iterate through the prototype chain of an instance of each and compare the two lists (with basic filtering for event handlers), but this doesn't actually give the potential svg attributes.

编辑

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

• IMPORTANT NOTE - pasting your answer code into the console on this page and using document.body as a target should show a list of over 50 attributes, including things like contentEditable, contextMenu, dir, style, etc.
• This also needs to work cross-browser.

推荐答案

你正在寻找这样的东西吗?

Could something like this be what you're looking for?

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

It looks like a DOM element object stores empty keys for all possible attributes. Could you loop over these keys and store them in an array, then from there use something similar to filter out inherited attributes?

HTML

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

Javascript

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

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

Here's a JSBin example ... it looks like it produces a list of all possible attributes but it would need some filtering.

另请参阅此线程.如何列出JS中的所有元素属性?

这篇关于如何获取 DOM 元素上所有可能的有效属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！