Written by Kasumi

JavaScriptで親・兄弟のID・クラス・要素名を取得する方法

JavaScriptで親・兄弟要素のID・クラス・要素名を取得する方法について知りたい。

本記事ではこのような悩みを解決。

実装方法について解説します。

親要素のID・クラス・要素名を取得

<div id="section" class="parent">
  <div class="child01">子要素</div>
</div>
<script>
  const child = document.querySelector('.child');

  // 親要素を含む子要素
  const parent = child.parentNode;

  // 親要素のID
    const parentId = parent.id;
  // 親要素のクラス
  const parentClass = parent.className;
  // 親要素名
  const parentLocal = parent.localName;

  // コンソール
  console.log(parentClass);
  // id
  console.log(parentId);
  // section
  console.log(parentLocal);
  // div
</script>

親要素を取得するコード例です。

親要素を取得するにはparentNodeを使います。

指定した要素にparentNodeを連結。

親のノードを取得してくれます。

後は以下Elementプロパティを使う事でID・クラス・要素名を取得できます。

id
ID名

className
クラス名

localName
要素名

兄弟要素のID・クラス・要素名を取得

<div id="section" class="parent">
  <div id="child01-id" class="child01">子要素01</div>
  <div id="child02-id" class="child02">子要素02</div>
  <div id="child03-id" class="child03">子要素03</div>
</div>

<script>
  const child = document.querySelector('.child02');

  // 指定した要素の次の兄弟要素
  const siblingNext = child.nextElementSibling;
  // 指定した要素の前の兄弟要素
  const siblingPrev = child.previousElementSibling;

  // 兄弟要素のID
    const siblingtId = siblingNext.id;
  // 兄弟要素のクラス
  const siblingClass = siblingNext.className;
  // 兄弟要素名
  const siblingLocal = siblingNext.localName;

  // コンソール
  console.log(siblingtId);
  // child03-id
  console.log(siblingClass);
  // child03
  console.log(siblingLocal);
  // div
</script>

兄弟要素を取得するコード例です。

指定した要素の次の兄弟要素を取得するにはnextElementSibling

前の兄弟要素を取得するにはpreviousElementSiblingを使います。

後は親要素同様、id・className・localNameを使えば、兄弟要素のID・クラス・要素名を取得出来ます。

以上で実装完了です。

まとめ

JavaScriptで親・兄弟のID・クラス・要素名を取得する方法について紹介しました。

目次

関連記事

JavaScript

JavaScriptを使って別ページにリダイレクトさせる方法

2022.12.13
354
JavaScript

JavaScriptでDOM(HTML)・画像の読み込み完了時に任意の処理を実行する方法

2022.12.26
260
JavaScript

【JavaScript】配列から最大値・最小値を求める方法

2022.06.08
375
JavaScript

【JavaScript】キーボードで入力したキー値を取得する方法

2023.01.23
129