JavaScriptで親要素のIDを参照して存在すればtrue
存在しなければfalseみたいな処理を実装したい時がありました。
今回は取得した要素から親要素を辿っていって該当のIDが存在するか判定する処理を書いていきます。
対象となる子要素を取得する
まず最初に、親要素のIDを取得したい子要素を選択する必要があります。
素のJavaScriptであればdocument.getElementById()メソッドなどを使用すると行うことができます。
let childNode = document.getElementById("child");parentNodeプロパティを使用する
JavaScriptでは選択した子要素のparentNodeプロパティを使用することで、親要素を取得することができます。
let parentNode = childNode.parentNode;その中で親要素が持つid属性の値は、parentNode.idを使用すると取得できます。
let parentId = parentNode.id;親要素のIDをループで遡って参照する方法
今回は子要素をクリックされた際にparentNodeで親をたどって対象のIDがあるかどうかを判定します。
方法としては以下のように取得した子要素をwhile分でループしてparentIdが出現するまでたどっていくと判定することが可能です。
function handleClick(e) {
console.log(e);
let node = e.target.parentNode;
while (node !== null) {
if (parentId.includes(node.id)) {
return alert("ある！");
}
node = node.parentNode;
}
return alert("ない！");
}二種類のボタンを設置したサンプルを以下に用意しましたので試してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>サンプル</title>
</head>
<body>
<p>親要素に対象のIDがないボタン</p>
<div id="aaaaa">
<div id="hogehoge">
<input type="button" value="button" id="childId" />
</div>
</div>
<p>親要素に対象のIDがあるボタン</p>
<div id="displayId">
<div id="hogehoge">
<input type="button" value="button" id="childId2" />
</div>
</div>
<script>
let parentId = ["displayId", "filterId", "searchId"];
let button = document.getElementById("childId");
let button２ = document.getElementById("childId2");
button.addEventListener("click", handleClick);
button２.addEventListener("click", handleClick);
function handleClick(e) {
console.log(e);
let node = e.target.parentNode;
while (node !== null) {
if (parentId.includes(node.id)) {
return alert("ある！");
}
node = node.parentNode;
}
return alert("ない！");
}
</script>
</body>
</html>
関連記事
