爲什麼.attributes包含無效的屬性名稱？

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已經無效，但爲什麼瀏覽器還是建議無效的節點名稱

我試着給出一些可能有用的提示。

在您的示例中，您已定義了一些content attributes。運行值陣列包含以下值代碼：

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

現在，根據.attributes（）spec

的Element.attributes屬性返回所有屬性的集合直播註冊到指定節點的節點。它是一個NamedNodeMap，不是數組，因此它沒有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);