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・クラス・要素名を取得する方法について紹介しました。
目次