web-dev-qa-db-ja.com

querySelectorAllおよびgetElementsBy *メソッドは何を返しますか？

getElementsByClassName（およびgetElementsByTagNameやquerySelectorAllなどの同様の関数）はgetElementByIdと同じように機能しますか、または要素の配列を返しますか？

私が尋ねる理由は、getElementsByClassNameを使用してすべての要素のスタイルを変更しようとしているためです。下記参照。

//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';

//works
document.getElementById('myIdElement').style.size = '100px';
javascriptgetelementsbyclassnamedom-traversal
119
dmo

IDは一意である必要があるため、getElementById()コードは機能します。したがって、関数は常に正確に1つの要素を返します（見つからない場合はnull）。

ただし、 getElementsByClassName() 、 querySelectorAll() 、およびその他のgetElementsBy*メソッドは、配列のような要素のコレクションを返します。実際の配列と同じように繰り返します：

var elems = document.getElementsByClassName('myElement');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.size = '100px';
}

より短いものを希望する場合は、 jQuery の使用を検討してください。

$('.myElement').css('size', '100px');
131
ThiefMaster

オブジェクトとして配列を使用している場合、getElementbyIdとgetElementsByClassNameの違いは次のとおりです。

  • getElementbyIdはオブジェクトを返します。
  • getElementsByClassNameは配列を返します。

getElementsByClassName

getElementsByClassName(classNames)メソッドは、クラスを表す一意のスペースで区切られたトークンの順序付けられていないセットを含む文字列を取ります。呼び出されると、メソッドは、スペースで文字列を分割してクラスを取得した、その引数で指定されたすべてのクラスを持つドキュメント内のすべての要素を含むライブNodeListオブジェクトを返す必要があります。引数にトークンが指定されていない場合、メソッドは空のNodeListを返す必要があります。

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

getElementById

GetElementById（）メソッドは、指定されたIDを持つ最初の要素にアクセスします。

http://www.w3schools.com/jsref/met_doc_getelementbyid.asp

コードでは次の行：

1- document.getElementsByClassName（ 'myElement'）。style.size = '100px';

getElementByClassNameは配列を返し、配列はNOTstyleプロパティを持つため、NOTは期待どおりに動作します。各elementにアクセスするには、それらを繰り返し処理します。

それが関数getElementByIdがあなたのために働いた理由です。この関数は直接オブジェクトを返します。したがって、styleプロパティにアクセスできます。

15
Alvaro Joao

次の説明は このページ から引用されています。

GetElementsByClassName（）メソッドは、指定されたクラス名を持つドキュメント内のすべての要素のコレクションをNodeListオブジェクトとして返します。

NodeListオブジェクトは、ノードのコレクションを表します。ノードにはインデックス番号でアクセスできます。インデックスは0から始まります。

ヒント：NodeListオブジェクトのlengthプロパティを使用して、指定されたクラス名を持つ要素の数を決定し、すべての要素をループして、必要な情報を抽出できます。

したがって、パラメータとしてgetElementsByClassNameはクラス名を受け入れます。

これがHTML本文の場合：

<div id="first" class="menuItem"></div>
<div id="second" class="menuItem"></div>
<div id="third" class="menuItem"></div>
<div id="footer"></div>

var menuItems = document.getElementsByClassName('menuItem')は、指定されたクラス名と一致するため、上位3つの<div>sのコレクション（配列ではない）を返します。

次に、以下を使用して、このノード（この場合は<div>s）コレクションを反復処理できます。

for (var menuItemIndex = 0 ; menuItems.length ; menuItemIndex ++) {
   var currentMenuItem = menuItems[menuItemIndex];
   // do stuff with currentMenuItem as a node.
}

要素とノードの違いについての詳細は この投稿 を参照してください。

11
remdevtec

ES6は Array.from() メソッドを提供します。このメソッドは、配列のようなオブジェクトまたは反復可能なオブジェクトから新しいArrayインスタンスを作成します。

let boxes = document.getElementsByClassName('box');

Array.from(boxes).forEach(v => v.style.background = 'green');
console.log(Array.from(boxes));
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>

コードスニペットの内部を見るとわかるように、 Array.from() 関数を使用すると、各要素を操作できます。


jQueryを使用した同じソリューション。

$('.box').css({'background':'green'});
.box {
  width: 50px;
  height: 50px;
  margin: 5px;
  background: blue;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
8
kind user

他の言葉で

  • document.querySelector()は、指定されたセレクターの最初のone要素のみを選択します。したがって、配列は吐き出されず、単一の値になります。 IDは一意でなければならないため、ID要素のみを取得するdocument.getElementById()と同様です。

  • document.querySelectorAll()は、指定されたセレクターでall要素を選択し、配列で返します。クラスおよびdocument.getElementsByClassName()タグのみのdocument.getElementsByTagName()に似ています。


querySelectorを使用する理由

簡単さと簡潔さのためだけに使用されます。


getElement/sByを使用する理由*

より高速なパフォーマンス。


このパフォーマンスの違いはなぜですか？

両方の選択方法には、さらに使用するためにNodeListを作成する目的があります。 querySelectorsはセレクタを使用して静的NodeListを生成するため、最初から最初から作成する必要があります。
getElement/sBy *は、現在のDOMの既存のライブNodeListをすぐに適応させます。

したがって、どのメソッドをいつ使用するかは、あなた/プロジェクト/デバイス次第です。


情報

すべてのメソッドのデモ
NodeListのドキュメント
パフォーマンステスト

6
Thielicious

配列のようなリストを返します。

例としてそれを配列にします

var el = getElementsByClassName("elem");
el = Array.prototype.slice.call(el); //this line
el[0].appendChild(otherElem);
4
atilkan

実行することで単一の要素を取得できます

document.querySelector('.myElement').style.size = '100px';

ただし、クラス.myElementの最初の要素に対しては機能します。

クラスのすべての要素にこれを適用したい場合は、使用することをお勧めします

document.querySelectorAll('.myElement').forEach(function(element) {
    element.style.size = '100px';
});
4
Sergey 
/*
 * To hide all elements with the same class, 
 * use looping to reach each element with that class. 
 * In this case, looping is done recursively
 */

const hideAll = (className, i=0) => {
if(!document.getElementsByClassName(className)[i]){ //exits the loop when element of that id does not exist
  return; 
}

document.getElementsByClassName(className)[i].style.visibility = 'hidden'; //hide element
return hideAll(className, i+1) //loop for the next element
}

hideAll('appBanner') //the function call requires the class name
4
Irina Mityugova

ES5 +（最近閲覧されたもの-2017）でできること

[].forEach.call(document.getElementsByClassName('answer'), function(el) {
    el.style.color= 'red';
});
0
Matas Vaitkevicius