19

私は当初、IE または古いブラウザーで関数Array.concat()の結果の機能をシミュレートするエレガントな方法を求めていました。サポートされていないようだったからです。もちろんそうです-返されたオブジェクトがそれをサポートしなかった理由は、それが. おっとっと！getElementsByTagNameconcatArray

getElementsByTagName実際には を返しますNodeList。本当の問題は、ドキュメント内のすべてのフォーム要素 (input、select、textarea、button) の単一のリストを取得してそれらをループする良い方法は何ですか? 配列は必要ありません...単一NodeListでも完璧です。

これは企業のイントラネット用であるため、IE6を使用していることに注意してください（ただし、まもなくIE8になります）。

私が思いついた答えは次のとおりです。

  • それらを 1 つに詰め込む良い方法について心配するよりも、コードを別の関数に入れ、異なるノードリストで 3 回呼び出す方が簡単になり、おそらくパフォーマンスが向上しました。

  • 私は最終的に MooTools の使用に切り替えました (すべての異なるフレームワークの比較を数時間読んだ後)。これで、必要なアイテムの配列を取得するのは非常に簡単になりました。最善の方法を見つけ出そうと頭を悩ませるよりも、このような JavaScript フレームワークを使用することをお勧めします。もちろん、私は生の言語を実際に学ぶことには大賛成です (フレームワークの使用を長い間控えてきたのはそのためです) が、物事を進めるための最速の方法であるとは限りません。コーダーの言語能力の向上として。

更新: ほぼ 2 年後、私は jQuery を使用するだけで完了しました!

4

6 に答える 6

31

ノードリストを連結するには、 を使用してそれらを配列に変換してから、Array.prototype.slice.call通常どおり連結します。

var a = Array.prototype.slice.call(document.getElementsByTagName("p")),
    b = Array.prototype.slice.call(document.getElementsByTagName("div"))

var c = a.concat(b);

編集：（コメントへの返信）

数種類の要素しかない場合は問題ありませんが、DOM 呼び出しの回数に応じてパフォーマンスが低下します。document.getElementsByTagName('*'), リストをループして、必要なnodeName.

留意すべきもう 1 つの点は、Array.prototype.slice上記で使用した方法がすべてのブラウザーで機能するとは限らないことです。sizzle.js (jQuery の背後にあるセレクター エンジン) の723 行目から始まるコメントを確認してください。

もちろん、すべての頭痛の種を処理する jQuery のようなライブラリを使用するのが最善です。あなたは簡単に行うことができます：

$("input, select, textarea, <other tags>")
于 2010-03-12T02:59:17.740 に答える
3 
function mergeNodeLists(a, b) {
  var slice = Array.prototype.slice;
  return slice.call(a).concat(slice.call(b));
}

console.log( mergeNodeLists( inputs, selects ) ); // => [input, select]

于 2013-06-23T15:59:15.590 に答える
1 
var a1=document.getElementsByTagName('div'),
a2=document.getElementsByTagName('button');
a1=[].slice.call(a1, 0,a1.length).concat([].slice.call(a2, 0,a2.length))
于 2010-03-12T04:26:38.860 に答える