Javascript Node.parentElementを使用して親要素を取得する
環境
Windows 10 home 64bit
Google Chrome 107.0.5304.122（Official Build） （64 ビット）
構文
要素.parentElement
「parentElement」を使用して、親要素を取得します。
const 変数名 =document.getElementById(セレクタID名);
1).親要素を取得します
変数名.parentElement
2).親要素のidを取得します
変数名.parentElement.id
parentElement は Node インターフェイスの読み取り専用プロパティで、この DOM ノードの親である要素 (Element) を返します。
このノードに親ノードがないか、親が DOM の Element でない場合は null を返します。
使用例
<!DOCTYPE html>
<html>
<body>
<div id="city">
<div id="tokyo">東京</div>
<div id="oosaka">大阪</div>
</div>
<br>
<button id="cft">検証</button>
<script>
document.getElementById('cft').onclick = function(e) {
const cftA = document.getElementById("tokyo");
const cftB = document.getElementById("oosaka");
console.log("親要素の取得");
console.log(cftA.parentElement);
console.log(cftB.parentElement);
console.log("親要素のidを取得");
console.log(cftA.parentElement.id);
console.log(cftB.parentElement.id);
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="city">
<div id="tokyo">東京</div>
<div id="oosaka">大阪</div>
</div>
<br>
<button id="cft">検証</button>
<script>
document.getElementById('cft').onclick = function(e) {
const cftA = document.getElementById("tokyo");
const cftB = document.getElementById("oosaka");
console.log("親要素の取得");
console.log(cftA.parentElement);
console.log(cftB.parentElement);
console.log("親要素のidを取得");
console.log(cftA.parentElement.id);
console.log(cftB.parentElement.id);
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="city">
<div id="tokyo">東京</div>
<div id="oosaka">大阪</div>
</div>
<br>
<button id="cft">検証</button>
<script>
document.getElementById('cft').onclick = function(e) {
const cftA = document.getElementById("tokyo");
const cftB = document.getElementById("oosaka");
console.log("親要素の取得");
console.log(cftA.parentElement);
console.log(cftB.parentElement);
console.log("親要素のidを取得");
console.log(cftA.parentElement.id);
console.log(cftB.parentElement.id);
};
</script>
</body>
</html>
実行結果
ボタン「検証」をクリックすると、コンソールに下記メッセージが表示されます。
親要素の取得
<div id="city">
<div id="tokyo">東京</div>
<div id="oosaka">大阪</div>
</div>
<div id="city">
<div id="tokyo">東京</div>
<div id="oosaka">大阪</div>
</div>
親要素のidを取得
city
city
親要素の取得
<div id="city">
<div id="tokyo">東京</div>
<div id="oosaka">大阪</div>
</div>
<div id="city">
<div id="tokyo">東京</div>
<div id="oosaka">大阪</div>
</div>
親要素のidを取得
city
city
親要素の取得 <div id="city"> <div id="tokyo">東京</div> <div id="oosaka">大阪</div> </div> <div id="city"> <div id="tokyo">東京</div> <div id="oosaka">大阪</div> </div> 親要素のidを取得 city city