IE7のgetElementsByName
-
07-07-2019 - |
質問
これを行うコードがいくつかあります:
var changes = document.getElementsByName(from);
for (var c=0; c<changes.length; c++) {
var ch = changes[c];
var current = new String(ch.innerHTML);
etc.
}
これはFFとChromeでは正常に機能しますが、IE7では機能しません。おそらくgetElementsByNameがIEで機能していないためです。最善の回避策は何ですか?
解決
IEでこれが機能しない理由がわからない場合は、その関数に関するMSDNドキュメント:
getElementsByNameメソッドを使用すると、指定されたNAME属性またはID属性値を持つドキュメント内のすべての要素が返されます。
NAME属性とID属性の両方をサポートする要素は、getElementsByNameメソッドによって返されるコレクションに含まれますが、NAME expandoを持つ要素はコレクションに含まれません。したがって、このメソッドを使用して名前でカスタムタグを取得することはできません。
Firefoxでは、 getElementsByName()
NAME expandoを使用する要素を取得するため、機能します。それが良いことであるかどうか&#8482;議論の余地があるかもしれませんが、それが現実です。
したがって、1つのオプションは を使用することですgetAttribute()
DOMメソッドを使用してNAME属性を要求し、値をテストして必要な値であるかどうかを確認し、必要な場合は配列に追加します。ただし、これには、ページ内または少なくともサブセクション内ですべてのノードを反復処理する必要がありますが、これは最も効率的ではありません。 getElementsByTagNameのようなものを使用して、そのリストを事前に制限できます。 ()
おそらく。
これを行う別の方法は、ページのHTMLを制御している場合、対象のすべての要素に、数字のみで異なるIDを与えることです。例:
<div id="Change0">...</div>
<div id="Change1">...</div>
<div id="Change2">...</div>
<div id="Change3">...</div>
そして、次のようなJavaScriptを使用します:
// assumes consecutive numbering, starting at 0
function getElementsByModifiedId(baseIdentifier) {
var allWantedElements = [];
var idMod = 0;
while(document.getElementById(baseIdentifier + idMod)) { // will stop when it can't find any more
allWantedElements.push(document.getElementById(baseIdentifier + idMod++));
}
return allWantedElements;
}
// call it like so:
var changes = getElementsByModifiedId("Change");
それはもちろんハックですが、あなたが必要とする仕事をするでしょうし、他のいくつかのハックに比べて非効率ではありません。
ある種のJavaScriptフレームワーク/ツールキットを使用している場合、オプションははるかに優れていますが、使用することを示されない限り、これらの詳細に入る時間はありません。個人的に、私は人々がそれなしでどのように生活しているかを知りません、彼らはあなたがそれを使用する余裕がないほどの時間、労力と欲求不満を節約します。
他のヒント
いくつかの問題があります:
- IEは
id =&quot;&quot;
をname =&quot;&quot;
と混同しています。
-
name =&quot;&quot;
は、&lt; span&gt;
では使用できません
修正するには、次をお勧めします:
- すべての
name =&quot;&quot;
をclass =&quot;&quot;
に変更します
- 次のようにコードを変更します:
-
var changes = document.getElementById('text').getElementsByTagName('span');
for (var c=0; c<changes.length; c++) {
var ch = changes[c];
if (ch.className != from)
continue;
var current = new String(ch.innerHTML);
NAMEプロパティを使用して要素を見つけることは、あまり一般的ではありません。 IDプロパティに切り替えることをお勧めします。
ただし、jQueryを使用して特定の名前の要素を見つけることができます:
$("*[name='whatevernameYouWant']");
これは、指定された名前を持つすべての要素を返します。
getElementsByNameはIEでサポートされていますが、バグがあります。特に、&#8216; id&#8217;の要素を返します。 &#8216; name&#8217;と同様に、指定された値と一致します。コンテキスト、コード、および実際のエラーメッセージがなければ、それが問題なのかどうかわかりません。
一般に、&#8216;名前&#8217; HTMLの属性には、混乱を招く可能性のあるいくつかの重複する目的があります。 getElementByIdを使用すると、はるかに信頼性が高くなります。特にフォームフィールドを操作する場合、form.elements [name]を使用して、探しているフィールドをより確実に取得できます。
ラッパーを使用して要素の配列を返すことに成功しました。 IE 6および7でも動作します。 NodeListではないため、document.getElementsByNameとまったく同じものではないことに注意してください。しかし、私が必要としているのは、要素の配列に対してforループを実行するだけで、.disabled = trueを設定するなどの簡単なことを行うだけで、十分に機能します。
この関数はまだgetElementsByNameを使用していますが、この方法で使用すると機能します。自分で見てください。
function getElementsByNameWrapper(name) {
a = new Array();
for (var i = 0; i < document.getElementsByName(name).length; ++i) {
a.push(document.getElementsByName(name)[i]);
}
return a;
}
回避策
var listOfElements = document.getElementsByName('aName'); // Replace aName with the name you're looking for
// IE hack, because it doesn't properly support getElementsByName
if (listOfElements.length == 0) { // If IE, which hasn't returned any elements
var listOfElements = [];
var spanList = document.getElementsByTagName('*'); // If all the elements are the same type of tag, enter it here (e.g.: SPAN)
for(var i = 0; i < spanList.length; i++) {
if(spanList[i].getAttribute('name') == 'aName') {
listOfElements.push(spanList[i]);
}
}
}