为什么 .attributes 包含无效的属性名称？答案

【问题标题】：Why does .attributes contain invalid attribute names?为什么 .attributes 包含无效的属性名称？
【发布时间】：2017-09-16 04:23:07
【问题描述】：

这是一个测试用例：

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

我知道属性在 HTML 中已经无效，但为什么浏览器仍然提示无效的nodeName。

【问题讨论】：

不管它是否是无效的 HTML，添加到元素的任何属性都将在 javascript 中可用，并且 javascript 不会真正即时验证 HTML。

标签： javascript attributes

【解决方案1】：

我稍微修改了你的 html 代码。

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

这就是javascript。它正在使用 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);

【讨论】：

这并没有尝试回答这个问题。 "...我知道属性在 HTML 中已经无效，但是为什么浏览器仍然提示无效的nodeName。"

【解决方案2】：

虽然你的问题有点模棱两可

我知道 HTML 中的属性已经无效，但是为什么浏览器仍然提示无效的节点名称

我将尝试提供一些可能有用的建议。

在您的示例中，您定义了多个content attributes。运行代码，values 数组包含以下值：

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

现在，根据 .attributes() spec

Element.attributes 属性返回注册到指定节点的所有属性节点的实时集合。它是 NamedNodeMap，而不是 Array，因此它没有 Array 方法，并且 Attr 节点的索引可能因浏览器而异。更具体地说，属性是字符串的键/值对，表示有关该属性的任何信息。

.attributes() 规范没有提及验证在 HTML 代码中明确设置的内容属性。如前所述，它只是所有已解析属性的实时集合。

同时，如果你尝试对无效的y"属性使用.getAttribute()方法，代码仍然不会报错并返回空值。但是当您尝试通过 .setAttribute('y"', "123") 以编程方式设置值时会发生什么？

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

这正好证明了@adeneo 在他的评论中提到的 Javascript 不会即时验证 HTML 实体，而只能通过某些方法来验证。

另一个相关线程here。您还可以查看standard，当涉及到属性名称中允许的字符时。

【讨论】：