Can't access element attributes by array index

[fortes]

I'm having issues iterating over the list of attributes on an element. Here's sample code:

domino = require('domino');

window = domino.createWindow("<h1 lang='en'>Hello</h1>");
h1 = window.document.body.firstChild;

// Outputs 1
console.log(h1.attributes.length);
// Returns undefined, expected an object
console.log(h1.attributes[0]);

[cscott]

h1.attributes.item(0)

should work fine. The attributes array is very hard to emulate in pure JavaScript; we'd need to use ES6 proxies in order to implement direct array access to attributes. See https://github.com/andreasgal/dom.js/blob/master/src/impl/Element.js#L241 for a long description of why exactly DOM attributes are hard.

[fortes]

@cscott Understood, and I was already using that workaround, filed just in case. How are you able to get around this for childNodes and other collections?

[cscott]

See https://github.com/fgnass/domino/blob/master/lib/NodeList.js (for example). We return an actual JavaScript array with an item() method added. This works when the single array can be the canonical storage for the values. Attributes are a funny case because they are mirrored and reflected all over the place, as described in that link above.

That said, it seems like it might be possible to re-engineer the representation of attributes such that Element.attributes is the One True Place to find attribute information, rewriting all the other ways to access attributes to use it. This would be a pretty invasive change, though, and if users tried to mutate the attributes array directly (in theory it is read-only, but in practice it would have to be writable) then Bad Things would happen.

[fortes]

Understood. Thanks for the explanation.

[cscott]

I'm leaving this bug open to remind me to add a note to the documentation explaining that array accesses on Element.attributes are not supported (use .item() instead).

[cscott]

If we ever bump the node minimum version to >= 6 (it's currently >= 4) then we could actually use ES6 proxies for attributes...