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

HTMLのformでsubmitした時、ページ遷移させない方法【JavaScript】

2022.10.09
10851
JavaScript

【JavaScript】同じ文字列を指定した回数繰り返して表示する方法

2023.01.24
1179
JavaScript

【簡単】JavaScriptを使って文字列を数値、数値を文字列に変換する方法

更新日:2022.09.09
748
JavaScript

ローディング画面にパーセントとプログレスバーを表示する方法【progressbar.js】

2023.02.18
6470