querySelectorで取得している値について調べてみた #JavaScript

経緯

『JavaScript Primer』第32章の「ユースケース：Todoアプリケーション」を手を動かしながら学習しています。

第32章の小見出し

エントリーポイント {#entrypoint}
アプリの構成要素 {#app-structure}
Todoアイテムの追加を実装する {#form-event}　←今ここ！
イベントとモデル {#event-model}
Todoアイテムの更新と削除を実装する {#update-delete}
Todoアプリのリファクタリング {#final}

気になったところ

HTML要素を

ドットを付けないで出力した場合
ドットを付けて出力した場合

ではどう変化するのか、が気になったのでデバッグしてみました。

ソースコード

todoapp/src/App.js

export class App {
    mount() {
        const formElement = document.querySelector("#js-form");
        const inputElement = document.querySelector("#js-form-input");
        formElement.addEventListener("submit", (event) => {
            // submitイベントの本来の動作を止める
            event.preventDefault();
            console.log(`入力欄の値: ${inputElement.value}`);
        });
    }
}

コンソール出力内容

入力欄の値:　フォームに入力した値

ドットを付けないで出力した場合

querySelectorが詰められているformElementの中身は何だろう
気になったのでコードを書き換えてローカルサーバーを起動してみました。

export class App {
    mount() {
        const formElement = document.querySelector("#js-form");
        const inputElement = document.querySelector("#js-form-input");
        formElement.addEventListener("submit", (event) => {
            //追記箇所
            console.log(inputElement);
            // submitイベントの本来の動作を止める
            event.preventDefault();
            console.log(`入力欄の値: ${inputElement.value}`);
        });
    }
}

出力結果はhtml要素をそのまま出力している模様でした。

<input id="js-form-input" class="new-todo" type="text" placeholder="What need to be done?" autocomplete="off">

一方、デベロッパーツールでinputElement単体で見てみたところ、要素の中身はキャプチャのような状態でした。

ということは

querySelectorで取ってきている中身はキー:バリューの羅列
キーだけだとhtml要素をそのまま取ってくる
キー.バリューで指定すると特定の要素だけ取ってきそう

と思ったので書き換えて再度ローカルサーバーを起動してみました。

ドットを付けて出力した場合

キーにbaseURIという値があったのでinputElement.baseURIを出力してみることにしました。
出力結果は下記のようになりました。

どうやら特定の要素だけ指定して取得できるようになるようです。

結び

ソースコードと睨めっこするより、実際にデバッグして中身見た方が早く理解できるときもあるのですね。
また本書ではnpxコマンド一つでローカルサーバーが起動するのでデバッグしやすいです。
最後に、キーとバリューって表現が正しいのかどうかはわかりません。

querySelectorで取得している値について調べてみた

経緯