JavaScript | 親要素のidやclassを取得する方法

2021-02-02JavaScript,javascript CSSセレクタ

JavaScriptで指定したHTML要素を持つ親要素を取得してそのidやclassを取得する方法のサンプルです。

See the Pen JavaScript | Get id and class of parent element by yochans (@yochans) on CodePen.

親要素のidやclassを取得する

子要素から、その親要素のidやclassを取得するサンプルコードです。

サンプルでは、HTMLに入れ子になった2つのdiv要素を用意して、JavaScriptで子要素の方から親要素にアクセスして親要素の情報を取得します。

<div class="classA classB" id="parent">
	<div id="child"></div>
</div>

親要素の情報を得るにはHTML要素の情報から「parentElement」を取得します。
「parentElement」で取得した親要素の情報は、そのままHTML要素の情報を取得可能です。

また、指定したHTML要素に親要素が存在しない場合「parentElement」は「body」を取得します。

//出力先
const output = document.querySelector('#output');

//親要素を取得
var parent_element = document.querySelector('#child').parentElement;

//各情報を取得
//parent_element.localName
//parent_element.id
//parent_element.classList