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でURL末尾のアンカー(ハッシュ)を取得・条件分岐する方法

2022.10.28
1748
JavaScript

Failed to execute ‘insertBefore’ on ‘Node’ The node before which the new node is to be inserted is not a child of this node.の原因・対処方法

2022.12.03
3491
JavaScript

JavaScriptでスクロールしたら要素をアニメーション表示する方法【Intersection Observer APIが便利】

2022.09.08
4083
JavaScript

【JavaScript】文字列から必要な特定文字のみ切り出す方法

2023.01.27
821