本記事では、ある要素の親の親の要素をJSで取得する方法を紹介します。
##やり方
closestメソッドを使います。
このメソッドはparentNodeメソッドと同様、親要素を取得するメソッドです。
しかし、parentNodeメソッドと違い、このメソッドは全親要素（親の親や、親の親の親の要素など）を取得できます。
（parentNode.parentNodeみたいな事をする必要はありません！）
##実例
今回使用するHTMLは以下です。
idがgrandParantのdivタグを取得します。
取得処理はtest.js（後述）に記載し、htmlファイルからこのjsファイルを呼び出します。
test.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="grandParent">
<div id="Parent">
<div id="Child">子ども</div>
</div>
</div>
<script src="test.js"></script>
</body>
</html>
・test.js
まず、getElementByIdを使用して子要素を取得します。
次に、closestメソッドを使用して、grandParentを取得します。
引数に、取得したい親要素を示すセレクタを指定することで、親要素を取得できます。
test.js
const child = document.getElementById("Child");
const grandParent = child.closest("#grandParent");
console.log(grandParent);
####実行結果
コンソールにgrandParentのdivタグが表示されればOKです。
##参考記事