2つの識別子を使用してjavascriptを使用して要素の幅を変更する

Question

W3Schoolのexample side navigation barを確認していて、Javascriptの実装方法を理解できませんでした。 jsは、ボタンをクリックしてサイドナビゲーションメニューを開くことを目的としています。以下のコードでは、なぜメニューdivにid mySidenavを追加する必要がありますか？私はdivクラスをsidenavでgetElementsByClassNameでターゲティングするのは意味があると思っていたが、何もしなかった。誰かがなぜidが必要なのか説明できますか？私はjsを学ぶので、私はどんな助けにも感謝します。

これは、メニューのための基本的なhtmlです：

.sidenav { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: #111; 
    overflow-x: hidden; 
    transition: 0.5s; 
    padding-top: 60px; 
} 

そして、JS：

function openNav() { 
    document.getElementById("mySidenav").style.width = "250px"; 
} 

Answer 1

メニューのようなものがあるときは、各ページに1つしか表示されません。IDに固執する必要があります。 IDは1つのオカレンスにのみ一致することが保証されます。同じ方法で動作する必要がある複数の要素がある場合は、クラスごとのマッチングを行う必要があります。 しかし、クラスごとに一致させたい場合は、getElementsByClassName("sidenav")を試したと仮定します。この場合、配列を返すので、一致するものを指定する必要があります。正しい構文は次のようになりますgetElementsByClassName("sidenav")[0]

Answer 2

私は変更しようとしました。ここ

<div id="mySidenav" class="sidenav"> 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
    <a href="#">About</a> 
    <a href="#">Services</a> 
    <a href="#">Clients</a> 
    <a href="#">Contact</a> 
</div> 

は、メニューのCSSですそれはTryit Editorにあり、行を

に変更しました

document.getElementsByClassName("sidenav")[0].style.width = "250px"; 

となりました。この場合、配列を取得する際にインデックスを使用することを忘れましたか？

Answer 3

どちらのセレクタも動作しますが、idで要素を選択する方が高速です。

詳細は、この質問を参照してください：jQueryのネイティブブラウザセレクタ（getElementByIdをまたはのgetElementsByClassName）を使用して、この質問はjqueryの程度であってもIn jQuery, is selecting by class or id faster than selecting by some other attribute?
利用可能な場合