JavaScript querySelectorメソッドを使ってHTMLの子要素から親要素を取得する方法

2023年2月9日

環境
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’]

JavaScript

Posted by arkgame