本記事では、ある要素の親の親の要素を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です。

##参考記事