異なるブラウザのアクセスエレメントの属性が異なる結果を返す

Question

異なるブラウザからhtml要素の属性にアクセスするための（非常に簡単な）テストを実行しようとしていますが、結果は異なります。 すべてがChromeで動作しますが、その上に表示されます。 Firefoxなし、エッジなし、IEなし、サファリなし。

したがって、問題はどうやって結果が得られるかです。わかりました。because var elements = document.querySelectorAll('input[data-request="2"]');は異なるオブジェクトを作成します。たとえば、Webインスペクタを使用して、Chromeでは、Edgeには属性タグがありますが、className！は表示されません。

変数内でループする必要があり、$(#obj).class('attrName')を使用できません。 私はjsFiddleの例を作りました。

https://jsfiddle.net/BlackShawarna/qLxqtsqz/

ヘルプ

Answer 1

[OK]をしてくれてありがとう、あなたのすべてを、そう私はちょうど私が試みることができる最も基本的なことを考え出しました。

Using .getAttribute('nameAttr') made the trick. 

Answer 2

は、次のコードのショートを付け、

$('input[data-request=2]').each(function(index){ 
    var className = $(this).attr("class"); 
    var selectID = className.split('_')[2]; 
    var selectName = className.split('_')[1]; 
    var value = $(this).attr('data-value'); //data-value 
    var rule = $(this).attr('data-rule'); //data-rule 
    var str = selectID + "\n" + selectName + "\n" + value + "\n" + rule + "\nElement Index " + index; 
    $("#result").append(str); 
    $("#result").append($('<br/>')); 
}); 

このJavaScriptコードはChromeとFirefoxの両方で同じ結果を与えます。

は、以下のHTML構造を使用します

<input class="hidden_1_4" type="hidden" data-request="2" data-value="0" data-rule="Equal" /> 
<input class="hidden_1_4" type="hidden" data-request="3" data-value="0" data-rule="NotEqual" /> 
<input class="hidden_1_5" type="hidden" data-request="2" data-value="0" data-rule="Equal" /> 
<div id="result"></div> 

JSFiddle