[SOLVED] How to get all possible valid attributes on a DOM element

How to get all possible valid attributes on a DOM element

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

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

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.

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.

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.

Solution

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

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)
}

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

See also this thread. How to list all element attributes in JS?