質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.12%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 244

前提・実現したいこと

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

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

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

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

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

該当のソースコード

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script>
    function execute(){
        var start = document.getElementById("part1");
        alert(start.id);
        var goal1 = start.parentNode.parentNode;
        alert(goal1.getAttribute("id"));

        // ★ここで躓いています★
        alert(goal1.parentNode.getAttribute("id"));
        return;
    }

</script>
<body>
    <table id ="part3">
        <tr id = "part2">
            <td>要素1</td>
            <td>要素2</td>
            <td>
                <input id ="part1" type="button" value="実行" onclick="execute()">
            </td>
        </tr>
    </table>
</body>
</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」を取得する方法を御教示下さい。

よろしくお願いします。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

        var start = document.getElementById("part1");
        console.log(start.id);
        var goal1 = start.parentNode.parentNode;
        console.log(goal1.getAttribute("id"));

        console.log(goal1.parentNode);
        console.log(goal1.parentNode.parentNode.getAttribute("id"));

動くサンプル:https://jsfiddle.net/2be107tx/


【デバッグに大活躍! JavaScriptのconsole.logで値を表示しよう | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト】
https://www.sejuku.net/blog/27205

【二章第八回 テーブルの操作 — JavaScript初級者から中級者になろう — uhyohyo.net】
https://uhyohyo.net/javascript/2_8.html

詳しくはHTMLを勉強してほしいのですが、tableの中にはtbodyという要素があり、trはその中に入れます。このtbodyという要素は省略可能であり、まったく書かなくても暗黙のうちに存在すると見なされるのです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/28 00:30 編集

    素早い御対応、ありがとうございます!
    取得に成功しました!

    恥ずかしながら今回の調査で1時間以上要してしまいました。
    本来ならばどのように調査すればもっと効率良くかつ
    他の方のお時間を取らせずに進められたのでしょうか?

    一刻も早く、独り立ち出来るようになりたいと考えています。

    キャンセル

  • 2018/12/28 00:52

    また、参考資料の御提供までありがとうございました!

    キャンセル

  • 2018/12/28 01:07

    > どのように調査すれば
    ます、alertは文字列しか確認できないので console.log(デベロッパーツール)を使ってください。
    「期待した値がどこまで取得できているか」を調べるだけでもわかることは多いです。
    がんばってください!

    キャンセル

  • 2018/12/28 19:03 編集

    承知しました。
    DOMの資料で自分の求めているものが見つからなかったので、
    本当に助かりました!
    御提供して下さった参考資料を基に勉強しておきます。

    本件はこれにてクローズさせて頂きます。
    色々と御教示下さり、ありがとうございました!

    キャンセル

+1

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

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#part1').addEventListener('click',function(e){
    console.log(e.target.closest('table').getAttribute('id'));
  });
});
</script>

<table id ="part3">
<tr id = "part2">
<td>要素1</td>
<td>要素2</td>
<td>
<input id ="part1" type="button" value="実行">
</td>
</tr>
</table>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/28 19:05

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

    よろしくお願いします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる