HTMLの構造に依存する、とはどういうことなのか

Question

つい最近プログラミングを学習し始めた初学者です。
JavaScriptを学習しているのですが、タブメニューを作る際にJavaScriptにてquerySelectorAllで値を取得したところ、下記のような指摘を受けました。
「querySelectorAllの値の取得方法ですと、htmlの構造に依存してしまいます。
getElementByIdを使用すると良いでしょう」
自分なりにHTMLの構造に依存するということはどういうことなのかを調べた結果、要は疎結合を意識したコーディングをしろ、ということなのではないかと思うのですが、実際これはどういう意味なのでしょうか？
一度に処理すると不具合が出るから、一気に処理せずにid指定で一つずつ動作するように書け、ということなのでしょうか？

// 宣言
const menuItems =document.querySelectorAll('.menu li a');
const contents =document.querySelectorAll('.contents');
// メニュー部分に対する処理
menuItems.forEach(item => {
  item.addEventListener('click', e => {
    menuItems.forEach(item => {
      item.classList.remove('active');
    })
    item.classList.add('active');
    contents.forEach(content => {
      content.classList.remove('active');
      document.getElementById(item.dataset.id).classList.add('active');
    });
  });
});

Comments

[kei344]

指摘された方に聞けばよいのではないでしょうか。

[enjinia555]

当方初学者のため、教えてくれる方に脳死で質問するのではなく、自力で調べようとした結果結局理解できず終いになってしまい、ここで質問させていただきました。
もしかしたら同じように悩まれている初学者の方もいらっしゃる可能性も無くはないため、情報を共有できるここで質問させていただいた次第です。

Answer 1

querySelectorAllの値の取得方法ですと、htmlの構造に依存してしまいます。
getElementByIdを使用すると良いでしょう

document.querySelectorAll('.menu li a')だと以下のようなHTML構造では有効です。

<ul class="menu">
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  ...
</ul>

しかし開発の都合や、デザイナー/コーダー側でHTMLが以下のように変更になったときのことを考えてみてください。

<nav class="nav-group">
  <a class="nav-item" href=""></a>
  <a class="nav-item" href=""></a>
</nav>

このとき、元の記述document.querySelectorAll('.menu li a')だと、
変更後のHTML構造には対応できず、JavaScript側の修正が必要になります。「htmlの構造に依存してしまう」というのはそういった意図だと推測します。

一方、getElementById()を使用した場合はHTML側にidの指定を追加する必要は生じますが、JavaScript側は編集しなくてもいいので、特にJavaScript側のソースコードが大きくなってきたときに、楽になると思われます。

---

以上が、「getElementByIdを使用すると良いでしょう」というアドバイスをしてくれた人の考えを推測してみた結果です。

(私はデザイナーなのですが)
私見としては、querySelectorAll()は、「要素が可変で、JavaScript側の挙動が単純な場合」には有効ではないかと思われます。

Webサイト制作時に、ちょっとしたUIの挙動の実装時などJavaScript側は「active」クラスをつけたり外したりするだけの実装しかしないような場合には便利だと感じます。

Comments

[enjinia555]

非常にわかりやすく、かつ詳細なご回答ありがとうございます。
おかげで理解できました。

Answer 2

.menu li aのような子孫セレクタを多用すると、「うっかり深い階層にあるaタグにまでヒットしてしまった」というような事故が発生しうる、ということです。

Comments

[enjinia555]

ご回答感謝いたします。
今回の記述内容ですと、aタグが複数あるため、それぞれに適用するには個別に異なるidをつけて一つずつ処理をつけるしかないのでしょうか？

[maisumakun]

適用したいaタグに共通のクラスを振る、という形にすれば、目的のものを確実に取得できるかと思います。

[enjinia555]

上記にもある通り「getElementByIdを使用すると良い」と言われ、理解ができなかったのですが、やはりclassを使用してforeachメソッドを用いてまとめて処理した方が良いですよね？
ご回答ありがとうございます。