6

私が言いたいのは、次のようなことをしたときに JavaScript がどのように DOM 要素を保存するかということです:

var foo = document.getElementsByTagName('p');

フーは何になる？オブジェクトの配列？また、その変数に要素を追加するにはどうすればよいですか。たとえば、次のようになります。

var bar = document.form[0].getElementsByTagName('input'); // 5 elements
var foo = document.form[1].getElementsByTagName('input'); // 4 elements

bar =+ foo;

for (i=0;i<bar.length;i++){
console.log(bar.value); // 9 logged values
}

すでに要素が含まれている変数に、同じ型の要素をさらに追加することはできますか? 追加したい変数のすべての要素をループして、すべてのデータを入れたい変数に「プッシュ」する必要がありますか?

4

3 に答える 3

9

getElementsByTagNamegetElementsByName(および、などの同様のメソッドgetElementsByClassName) はNodeList(またはHTMLCollection、明らかにブラウザによっては、HTMLCollection、NodeLists、およびオブジェクトの配列の違いも参照してください) を返します。

配列のようなオブジェクト、つまり数値プロパティと.lengthプロパティがありますが、新しい要素を追加することはできません。

を変更するにはNodeList、通常の配列に変換する必要があります。これは配列メソッドで簡単に実現でき.slice、同時に両方のリストを.concat次のようにマージできます。

bar = Array.prototype.slice.call(bar).concat(Array.prototype.slice(foo));

これが機能するのは、ほとんどのネイティブ配列メソッドが、引数が実際の配列である必要はなく、配列のようなオブジェクトである必要がないような方法で定義されているためです。

NodeListaと final 配列の注目すべき違いは次のとおりです。

  • 配列はもはやライブではありません。つまり、新しい DOM ノードが追加されたときにコレクションが自動的に更新されません。
  • 最終的な (マージされた) 配列の要素は、必ずしもドキュメントの順序であるとは限りません。
于 2013-06-19T21:42:29.210 に答える
1

バー =+ フー;

これは文字列連結に対してのみ機能し、次のようになりますbar+= foo

ただし、ここでは bar と foo の両方が DOM オブジェクトです。したがって、同じタイプの要素を追加したい場合は、配列を作成できます。

例えば、

var myArray =[]
myArray.push(foo);
myArray.push(bar);
于 2013-06-19T21:43:38.827 に答える
-4

foo が関数になります。したがって、意味がないため、foo を bar に追加することはできません。やろうとしているようなものです：

document.form[0].getElementsByName('input') document.form[1].getElementsByName('input');

1 つの配列に複数の要素を含めることができます。それがあなたの解決策に到達する最も簡単な方法だと思います。

于 2013-06-19T21:40:53.760 に答える