【JavaScript】$0で移動した選択対象を確認しよう

こんにちは。

JQueryでは.next()や.parent()で選択対象を移動することができますね。

実際にコードを書いていると思った通りに対象を選択できず、うまく実装されないことはありませんか？

そのようなときのためにディベロッパーツールでどこを選択しているか確認する方法があります。

$0で移動した選択対象を確認しよう

以下のようなHtmlを用意しました。

Html

 <div id="mother">
    親要素
    <div id="child">
      子要素
      <div id="grandchild">
        孫要素
      </div>
    </div>
  </div>
  <div id="mother-next">
    親要素の次の要素
  </div>

ディベロッパーツールを開きましょう。

①ディベロッパーツールの左上のアイコンをクリック
②子要素をクリック
③id="child"のdiv要素が選択される

次にコンソールに$0と記載します。
すると、$0の下に今選択されている要素、つまりdiv#childが表示されます。

$0から選択対象を移動させてみましょう。
$0.parentElement.nextElementSiblingと記載すると、今度は下にdiv#mother-nextが表示されます。

$0で移動した選択対象をディベロッパーツールで確認する方法について説明しました。
選択対象の移動が複雑なときに便利だと思います。