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

環境
Windows 10 Home 64bit
Google Chrome 109.0.5414.120

書式
親要素の取得
let 変数名 =document.querySelector('#子要素のID’).parentElement;
変数名.localName

親要素のIDの取得
変数名.id

親要素のクラスリスト
変数名.classList

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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