Question

这是一个测试用例：

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。

Answer 1

虽然你的问题有点含糊不清

我知道HTML中的属性已经无效但为什么浏览器仍然建议使用无效的nodeName

我会尝试提供一些可能有帮助的指示。

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

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

现在，根据 .attributes（） spec

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

.attributes（）规范未提及有关验证HTML代码中显式设置的内容属性的任何信息。如上所述，它只是解析所有属性的实时集合。

同时，如果您尝试将 .getAttribute（）方法用于无效的 y“属性，代码仍然不会抱怨并返回空但是，当您尝试通过 .setAttribute（'y“'，”123“）以编程方式设置值时会发生什么？

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

这证明了@adeneo在评论中提到的Javascript不会动态验证HTML实体，而只是通过某些方法。

另一个相关主题here。另外，在属性名称中允许使用字符时，您可以查看standard。

Answer 2

我稍微更改了你的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);

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

2 个答案: