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>
実行結果
ボタン「検証」をクリックすると、コンソールに下記メッセージが表示されます。
親要素の取得 <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