JavaScript querySelectorメソッドを使ってHTMLの子要素から親要素を取得する方法
環境
Windows 10 Home 64bit
Google Chrome 109.0.5414.120
書式
親要素の取得
let 変数名 =document.querySelector('#子要素のID’).parentElement;
変数名.localName
親要素のIDの取得
変数名.id
親要素のクラスリスト
変数名.classList
使用例
<!DOCTYPE html>
<html>
<body>
<div id="tokyo" class="shina shibuya">
<div id="aom">this is a test</div>
</div>
<script>
//親要素を取得します。
let cft = document.querySelector('#aom').parentElement;
console.log("親要素: " + cft.localName);
// 親要素のidの取得
console.log("親要素のID: "+cft.id);
//親要素のクラスリスト
console.log(cft.classList);
</script>
</body>
</html>
実行結果
親要素: div
親要素のID: tokyo
DOMTokenList(2) ['shina’, 'shibuya’, value: 'shina shibuya’]