183

(およびやのようなgetElementsByClassName同様の関数)は、要素の配列と同じように機能しますか?getElementsByTagNamequerySelectorAllgetElementById

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

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

//works
document.getElementById('myIdElement').style.size = '100px';
4

12 に答える 12

174

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

ただし、メソッド getElementsByClassName、 getElementsByName、 getElementsByTagName、および getElementsByTagNameNS は反復可能な要素のコレクションを返します。

メソッド名はヒントを提供します:単数形をgetElement意味しますが、複数形を意味します。getElements

このメソッドquerySelectorはまた、単一の要素をquerySelectorAll返し、反復可能なコレクションを返します。

反復可能なコレクションは、NodeListまたは のいずれかHTMLCollectionです。

getElementsByNameとは両方とも;querySelectorAllを返すように指定されています。NodeList他のgetElementsBy*メソッドは を返すように指定されていますがHTMLCollection、ブラウザーのバージョンによってはこれを異なる方法で実装することに注意してください。

これらのコレクション タイプは両方とも、要素、ノード、または同様のタイプが提供する同じプロパティを提供しません。…<code>(…<code>)の読み取りstyleが失敗するのはそのためです。document.getElementsつまり、 aNodeListまたは anには;HTMLCollectionがありません。styleのみがElementを持っていstyleます。

これらの「配列のような」コレクションは、0 個以上の要素を含むリストであり、それらにアクセスするために反復する必要があります。配列と同様にそれらを反復処理できますが、それらはsとは異なることに注意してください。Array

最新のブラウザーでは、これらのイテラブルを適切な配列に変換できますArray.from。次に、反復メソッドforEachなどの他の配列メソッドを使用できます。

Array.from(document.getElementsByClassName("myElement"))
  .forEach((element) => element.style.size = "100px");

Array.fromまたは反復メソッドをサポートしていない古いブラウザーでは、引き続き を使用できますArray.prototype.slice.call。次に、実際の配列の場合と同じように反復できます。

var elements = Array.prototype.slice
    .call(document.getElementsByClassName("myElement"));

for(var i = 0; i < elements.length; ++i){
  elements[i].style.size = "100px";
}

NodeListまたは自体を反復することもできますがHTMLCollection、ほとんどの場合、これらのコレクションはライブ( MDN docs、DOM spec ) であることに注意してください。つまり、DOM の変更に応じて更新されます。したがって、ループ中に要素を挿入または削除する場合は、誤っていくつかの要素をスキップしたり、無限ループを作成したりしないようにしてください。MDN のドキュメントでは、メソッドがライブ コレクションを返すか静的コレクションを返すかについて常に注意する必要があります。

たとえば、 aは最新のブラウザーNodeListなどでいくつかの反復メソッドを提供します。forEach

document.querySelectorAll(".myElement")
  .forEach((element) => element.style.size = "100px");

単純なforループも使用できます。

var elements = document.getElementsByClassName("myElement");

for(var i = 0; i < elements.length; ++i){
  elements[i].style.size = "100px";
}

DOM クエリを少し短くし、「1 つの要素」と「要素のコレクション」を抽象化するレイヤーを作成するjQueryのようなライブラリがいくつかあります。

$(".myElement").css("size", "100px");
于 2012-05-21T23:18:23.053 に答える
13

以下の説明は、このページからの抜粋です。

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>

次に、このノード (<div>この場合は s) コレクションを次のように反復処理できます。

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

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

于 2016-01-07T09:14:12.577 に答える
7

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

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

しかし、クラス .myElement を持つ最初の要素に対しては機能します。

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

document.querySelectorAll('.myElement').forEach(function(element) {
    element.style.size = '100px';
});
于 2017-07-02T19:29:34.480 に答える
1

そのため、これは私の質問と重複しているため、私の質問を削除する必要があると言われました。これにより、フォーラムをクリーンに保ち、質問をする権利を維持することができます。

私の質問とこの質問は本当に違うと思うので、私の答えを指摘しますので、このページで知識を完成させ、情報が失われることはありません.

質問

  1. スニペットに が含まれているコードがあります。これはdocument.getElementsByClassName("close")[0]何をしているの[0]ですか?

  2. 角かっこがgetElementsByClassNameどのような目的で使用されているのを見たことがありませんか?

  3. また、どうすればjQueryに変換できますか?

答え

  1. スニペットのコードには、[0]実際には配列として使用されており、0 であるため、指定されたクラスが初めて使用されたときに参照されます。

  2. 上と同じ。

  3. 私は本当にそれをすることができず、誰もそれに答えませんでした。event. targetI can't use $("#myModal")instead ofを参照しているコードの部分では、document.getElementById("myModal")それらは同等であるべきだと思いますが、この場合、標準のものを置き換える jQuery フォームは、望ましい効果をもたらしません。

    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }


var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
body {font-family: Arial, Helvetica, sans-serif;}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
<h2>Modal </h2>

<button id="myBtn">Open Modal</button>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

アップデート

私の質問を本当に削除できないようで、人々はそれに満足していません。どうしたらいいのか本当にわかりません。

于 2021-12-25T18:47:54.927 に答える