属性値を取得したいのですが…。

前提・実現したいこと

JavaScript初心者です。簡単なレベルでしたら申し訳ございません。

下記のJavaScript(DOMプログラミング)で属性idの値を取得するコードを作っています。
どうしても取得したい値が取得出来ません。
取得した「part3」の値をalert文で表示させたいです。

必須条件：
子ノードから親ノードへ下から上に辿ったやり方であること。

発生している問題・エラーメッセージ

「part3」を表示させるはずが、「null」が表示されてしまいます。

該当のソースコード

JavaScript,
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Insert title here</title>
6</head>
7<script>
8	function execute(){
9		var start = document.getElementById("part1");
10		alert(start.id);
11		var goal1 = start.parentNode.parentNode;
12		alert(goal1.getAttribute("id"));
13
14		// ★ここで躓いています★
15		alert(goal1.parentNode.getAttribute("id"));
16		return;
17	}
18
19</script>
20<body>
21	<table id ="part3">
22		<tr id = "part2">
23			<td>要素１</td>
24			<td>要素２</td>
25			<td>
26				<input id ="part1" type="button" value="実行" onclick="execute()">
27			</td>
28		</tr>
29	</table>
30</body>
31</html>

試したこと

・原因究明時、属性の値である「part1」「part2」を表示させることは成功しましたが、
どうしても「part3」を表示させることが出来ません。
・getElementByIdを用いて、直接<table id ="part3">の要素を取得した結果は、object HTML Table Elementで、
parentNodeを複数回使って親ノードへ辿った結果はobject HTML Table Section Elementでした。
→alert(document.getElementById("part3") == start.parentNode.parentNode.parentNode);
→falseが返される
・初心者で質問下手だと思いますが、子ノードから親ノードへ辿った上で、idの値である「part3」を取得する方法を御教示下さい。

よろしくお願いします。

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答2件

closestなら段階をすっとばせるので楽かもしれません

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  document.querySelector('#part1').addEventListener('click',function(e){
4    console.log(e.target.closest('table').getAttribute('id'));
5  });
6});
7</script>
8
9<table id ="part3">
10<tr id = "part2">
11<td>要素１</td>
12<td>要素２</td>
13<td>
14<input id ="part1" type="button" value="実行">
15</td>
16</tr>
17</table>

投稿2018/12/28 00:34

yambejp

総合スコア117719

yamamoto_nara

2018/12/28 10:05

御教示下さり、ありがとうございます！基本をマスターした後に、後学のために理解しておきます。よろしくお願いします。

行動規範の内容に同意します

ベストアンサー

tbodyが挿入されるからgoal1.parentNode.parentNode.getAttribute("id"))にすれば取得できます。

js
1        var start = document.getElementById("part1");
2        console.log(start.id);
3        var goal1 = start.parentNode.parentNode;
4        console.log(goal1.getAttribute("id"));
5
6        console.log(goal1.parentNode);
7        console.log(goal1.parentNode.parentNode.getAttribute("id"));
8```**動くサンプル：**[https://jsfiddle.net/2be107tx/](https://jsfiddle.net/2be107tx/)
9
10---
11
12【デバッグに大活躍! JavaScriptのconsole.logで値を表示しよう | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト】
13[https://www.sejuku.net/blog/27205](https://www.sejuku.net/blog/27205)
14
15【二章第八回　テーブルの操作 — JavaScript初級者から中級者になろう — uhyohyo.net】
16[https://uhyohyo.net/javascript/2_8.html](https://uhyohyo.net/javascript/2_8.html)
17> 詳しくはHTMLを勉強してほしいのですが、tableの中にはtbodyという要素があり、trはその中に入れます。このtbodyという要素は省略可能であり、まったく書かなくても暗黙のうちに存在すると見なされるのです。