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 pare 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.

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 pare 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.

• javascript
• attributes

Share Improve this question Follow edited Jun 10, 2024 at 14:05 Rycochet asked Jan 19, 2018 at 10:49 RycochetRycochet 2,93811 gold badge2525 silver badges4040 bronze badges 4

• "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." is impossible--any attribute can be added in the future. I assume you want something that follows a spec that lists all attributes, but you've accepted an answer that only gives the current values, not all possible values. So I'm not sure what you're looking for or why you need this. – ggorlen Commented Jun 9, 2024 at 13:54
• This actually is a dupe of How to list all element attributes in JS?. I probably shouldn't have reopened so hastily. – ggorlen Commented Jun 9, 2024 at 13:56
• @ggorlen I was specifically after a list of HTML attributes, not javascript object keys - as in the ones which are part of the spec and the browser may do something with – Rycochet Commented Jun 10, 2024 at 14:04
• Thanks for clarifying. The dupe says "I would like to list ALL the possible attributes an SVG element may have" which is the same as this it seems to me. Answers in that thread actually follow the spec like you're asking, unlike this thread which only show how to get active properties. – ggorlen Commented Jun 10, 2024 at 14:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5 +100

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?

There is no API for that and I don't think a workaround is possible because when you change an attribute on a current DOM node, the browser is responsible for re-rendering and updating the webpage in a low-level way that is not exposed to the JavaScript context.

Also, keep in mind that any correctly formatted attribute is actually valid in the context of a DOM tree, even though it might not trigger any change at the rendering level or in the way the browser renders the page. Especially the data-* attributes.

There might be some vendor-specific API but that wouldn't be useful if you want cross-browser patibility.

You need to hardcode it, sadly. Given that you specifically want the SVGElement attributes, maybe you can scrape the W3's SVG standard document to automatically create the list?

Edit: I made a snippet to easily scrape the values from the standard:

const uniq = arr => Array.from(new Set(arr))

const nameElements = document.querySelectorAll('table[summary="Alphabetic list of attributes"] .attr-name')
const arrNameElements = Array.prototype.slice.call(nameElements)
const svgAttributes = uniq(arrNameElements.map(el => el.innerText.replace(/\‘|\’/g, '')))

Just execute it on the svg attributes page, by opening the dev console on the page and pasting in this code :)

Edit 2: I forgot the presentation attributes. I'll let you figure that one out ;)

Any one of these should work because they return a live HTMLCollection.

var svgElement = window.document.getElementsByClassName("someSvgClass")[0];
//assume someSvgClass is on svg element.
//var svgElement = window.document.getElementsByTagName("svg")[0];
//var svgElement = window.document.getElementsByName("mySvg")[0];
//assume svg has this name.

var svgAttributes = svgElement.attributes;

for(let i=0; i<svgAttributes.length; i++) {
  console.log(svgAttributes[i]);
}

See the below documentation from MDN on getElementsByTagName()

The Element.getElementsByTagName() method returns a live HTMLCollection of elements with the given tag name. The subtree underneath the specified element is searched, excluding the element itself. The returned list is live, meaning that it updates itself with the DOM tree automatically. Consequently, there is no need to call several times Element.getElementsByTagName() with the same element and arguments.

The documentation for getElementsByName , and getElementsByClassName say the same thing; a live node list is returned. If you'd like to try it, I created a fiddle here.

You'll see that svgAttributes list is automatically updated upon clicking "Add Attribute" without re-executing any of those functions.