JavaScript | 子要素から親要素のidやclassを取得する方法
JavaScriptでHTMLの子要素から親要素を取得してそのidやclassを取得する方法のサンプルコードです。
子要素から親要素のidやclassを取得する
子要素から、その親要素のidやclassを取得するサンプルコードです。
サンプルでは、HTMLに入れ子になった2つのdiv要素を用意して、JavaScriptで子要素の方から親要素にアクセスして親要素の情報を取得します。
<div id="parent" class="classA classB">
<div id="child"></div>
</div>子要素から「parentElement」を指定して親要素のHTMLを取得します。
「parentElement」で取得した親要素の情報は、そのままHTML要素の情報を取得可能です。
また、指定したHTML要素に親要素が存在しない場合「parentElement」は「body」を取得します。
//親要素を取得
let parent = document.querySelector('#child').parentElement;
console.log(parent.localName);
//div
console.log(parent.id);
//parent
console.log(parent.classList);
//["classA", "classB", value: "classA classB"]HTML要素のタイプを取得する場合は「localName」、idを取得する場合は「id」、class名を取得する場合は「classList」を使います。
classListは配列形式で取得します。