Why does .attributes contain invalid attribute names?

Question

Here is a test case:

HTML:

<div id="div1" x="="y">Test</div>

JS:

var div1 = document.getElementById('div1');

var attributes = [];

for (var i=0, len=div1.attributes.length; i < len; i++) {
  attributes[div1.attributes[i].nodeName] = div1.attributes[i].value;
}

console.log(attributes);

https://codepen.io/anon/pen/LyGdxd

I know that the attributes are already invalid in the HTML but why do browsers still suggest an invalid nodeName.

Answer 1

Although your question is a bit ambiguous

I know that the attributes are already invalid in the HTML but why do browsers still suggest an invalid nodeName

I'll try to give a few pointers that might be helpful.

In your example you have defined a number of content attributes. Running the code the values array contains the following values:

[id: "div1", x: "=", y": ""]

Now, according to the .attributes() spec

The Element.attributes property returns a live collection of all attribute nodes registered to the specified node. It is a NamedNodeMap, not an Array, so it has no Array methods and the Attr nodes' indexes may differ among browsers. To be more specific, attributes is a key/value pair of strings that represents any information regarding that attribute.

The .attributes() spec doesn't mention anything about validating content attributes explicitly set in the HTML code. As stated, it's just a live collection of all attributes parsed.

At the same time, if you try to use the .getAttribute() method for the invalid y" attribute, the code would still not complain and return an empty value. But what happens when you try to set the value programmatically through .setAttribute('y"', "123")?

Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': 'y"' is not a valid attribute name.

This proves exactly what @adeneo mentioned in his comment that Javascript doesn't validate HTML entities on the fly, but only through certain methods.

Another related thread here. Also you can have a look at the standard when it comes to allowed chars in attribute names.

Answer 2

I changed your html code a little.

<div id="div1" x="y">Test</div>

And this is the javascript. It's working on codepen.

var div1 = document.getElementById('div1');

var attributes = [];
var values = [];

for (var i=0, len=div1.attributes.length; i < len; i++) {
  attributes[i] = div1.attributes[i].nodeName;
  values[i] = div1.attributes[i].nodeValue;
}

console.log(attributes);
console.log(values);