.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ですでに無効であることを知っているが、なぜのブラウザはまだ

無効のnodeNameを示唆してください、私は」役に立つかもしれないいくつかの指摘をしようとするでしょう。

例では、content attributesの数を定義しています。 .attributes（）spec

Element.attributesプロパティは、すべての属性の生のコレクションを返すによると、今

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

：値配列は、次の値を含むコードを実行します指定されたノードに登録されたノードこれは、配列ではなくNamedNodeMapであるため、配列メソッドはなく、Attrノードのインデックスはブラウザによって異なる場合があります。具体的には、属性は、その属性に関する情報を表す文字列のキー/値のペアです。

.attributes（）スペックは、明示的にHTMLコードに設定されたコンテンツ属性の検証については何も言及していません。前述のように、それは解析されたすべての属性のライブコレクションです。同時に

、あなたが.getAttribute（）「無効yの属性メソッドを使用しようとすると、あなたがしようとすると、コードはまだ文句を言うと、空の値を返します。しかし、何が起こるではないでしょう値を.setAttribute（ 'y "'、" 123 "）にプログラムで設定しますか？

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

これはJavascriptが唯一の特定のメソッドを介して、その場でHTMLエンティティを検証しないことを彼のコメントで述べた@adeneoまさに証明しています。

別の関連スレッド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);