getElementsByClassName（ "className"）[0]の説明が必要です。

Question

さらにJavaScriptコードでは、次のコード行で[0]の目的/意味を教えてください。 ：var contactSpan = document.getElementsByClassName（ "close"）[0];

私は、その部分以外のすべてのコードがどのように機能するのか理解しています。わかりやすくするために、jsコードのその部分にリンクされた関連するHTMLコードを含めました。

私はWebコーディングにはかなり新しいので、避けることができれば、あまり技術的な言語を使用しないでください。ありがとう:)

<div class="collapse navbar-collapse" id="bs-nav-demo"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#" id="contact">Contact</a></li> 
      </ul> 
     </div> 

<div id="contactModal" class="modal"> 
    <div class="modal-content"> 
    <span class="close">&times;</span> 
     <p>Contact details here</p> 
    </div> 
</div> 

のjavascript：

// Get the button that opens the modal 
var contact = document.getElementById('contact'); 

// Get the modal 
var contactModal = document.getElementById('contactModal'); 

// Get the <span> element that closes the modal 
var contactSpan = document.getElementsByClassName("close")[0]; 

Answer 1

getElementsByClassNameElementsリターンarray-likeオブジェクトのplural形態に応じて。クラスcloseを持つ要素が複数ある可能性があります。その理由は、array-likeオブジェクトを返す理由です。

Arrayまたはarray-likeオブジェクトアイテムは、0から始まるアイテムのインデックスを使用してアクセスできます。

ページに要素が1つしかなく、array-likeオブジェクトには1つのアイテムしか含まれていませんが、とにかく1つのアイテムでarray-likeオブジェクトが返されます。

その後、現在のspan要素のインデックス表記[]を使用して最初の項目を取得しようとしています。あなたのコードの

最終ラインは、同じクラスを含む複数の要素が存在しなかった理由ですが、IDがユニークである。この二つの文

var elemetsWithClassClose = document.getElementsByClassName("close"); 
var contactSpan = elemetsWithClassClose[0]; 

Answer 2

に相当します。したがって、ドームでは、アクセスする要素を正確に定義する必要があります。

<div class="sample">Bla Bla Bla</div> 

そして

<div class="sample">No Bla Bla</div>

のように同じクラスを使用して2つの要素がdocument.getElementsByClassName("sample")[0];そして、存在する場合と同様に は、最初の要素は、そのクラスを持ち、それだけを求めていますように見える

document.getElementsByClassName("sample")[1]; is the second element having that class.