DOM
HTMLファイルは一度読み込まれ、その後ページはそこにあります。しかし、入力時に結果を提案する検索ボックス、クリックで開くメニュー、カウントアップするカウンター、これらのどれもHTMLファイルには含まれていません。ページ読み込み後に何かがページ上に表示される内容を変更し、その何かはJavaScriptがDOMを通じてページに到達することです。この章はその到達について、つまりJavaScriptがページの部分を見つけてそれらを変更し、ページがリーダーの前で更新されるしくみについてです。
DOMとは何か
ブラウザがページを読み込むとき、HTMLを読んで、それから**オブジェクトツリー**を構築します：ページ用に1つのオブジェクト、<body>用に1つ、その内部の各見出し、段落、ボタンに1つずつ。そのツリーはDOM、Document Object Modelの略です。JavaScriptはこのツリーを読むことも変更することもでき、そうするとページは直ちに更新されます。
押さえておく価値がある部分：DOMはあなたのHTMLファイルではありません。ページのライブバージョン、ブラウザのメモリ内に存在するものです。.htmlファイルは最初のレシピ、DOMはブラウザが提供している完成した料理で、JavaScriptは皆がまだ食べている間にプレートを並べ替えることができます。
DOMのすべての要素はオブジェクトで、オブジェクトで出会ったのと同じ種類で、読むと変更できるプロパティを持っています。それが全トリックです：ページはオブジェクトで、そしてあなたはすでにオブジェクトの扱い方を知っているので、ページを変更することはオブジェクトプロパティを変更することです。
要素の選択
要素を変更する前に、ツリー内でそれを見つける必要があります。CSSと同じ方法で、セレクターを使って指し、ブラウザは一致するオブジェクトを返します。
主力はdocument.querySelectorです。あなたは**CSSセレクター**を渡します。CSSで使うのと同じ種類のパターンで、一致する最初の要素を返します：
const card = document.querySelector(".card"); // class="card" を持つ最初の要素
const total = document.querySelector("#total"); // id="total" を持つ要素.cardはクラスで照合、#totalはidで照合、"button"のような単語はタグ名で照合します。querySelectorは最初の照合を取得してそこで停止します。すべての照合が欲しいとき、ループできるリストを返すquerySelectorAllを使います：
const cards = document.querySelectorAll(".card"); // class="card" を持つすべての要素
console.log(cards.length); // それがいくつ見つけたか何も照合しない場合、querySelectorはnullを返し、これはJavaScriptが「ここには何もありません」と言う方法です。
document.querySelectorにCSSセレクター（.cardまたは#totalなど）を渡して、最初の照合を取得します。すべてをリストとして取得したいときはquerySelectorAllを使用します。何も照合しない場合はnullを取得します。これは「ここには何もありません」を意味します。 要素の読取と変更
要素を保有すると、オブジェクトのプロパティを読取りと変更する場合と同じ方法で、そのプロパティを通じて読取りと変更します。ここがページが実際に動き始めるところです。
最も使うプロパティはtextContentで、要素内のテキストです。読むと設定できます：
const total = document.querySelector("#total");
total.textContent = "42 items"; // ページは「42 items」を表示見た目を変更するには、通常クラスを追加または削除して、CSSにスタイリングを行わせます。classListにはそのための3つのメソッドがあります：
const card = document.querySelector(".card");
card.classList.add("selected"); // クラスを追加
card.classList.remove("selected"); // それを取り除く
card.classList.toggle("selected"); // 足りなければ追加、あれば削除.styleを通じて単一のスタイルを直接設定でき、setAttributeでsrcまたはhrefのような属性を設定できます：
card.style.color = "crimson"; // 1つのインラインスタイル
const avatar = document.querySelector(".avatar");
avatar.setAttribute("src", "太郎.jpg"); // 画像ソースを設定classListに最初に手を伸ばし、.styleは1回限りの調整にのみ使ってください。スタイリングをCSSに保つことは、それを1か所に保つためです。
textContentで要素内のテキストを設定して、classList.add、remove、toggleでクラスを追加または削除することで見た目を変更します。1回限りの調整には.styleを、画像ソースのようなものsetAttributeを使ってください。クラスに寄りかかってスタイリングをCSSに保ってください。 要素の作成と削除
既に存在する要素を変更するとあなたは遠いところに到達しますが、時々何もない：追加しているto-do、到着する検索結果。そのためにあなたは新しい要素を構築してツリーに入れ、古いものを取り出します。
document.createElementで新しい要素を作り、何かコンテンツを与えてから、appendでページに追加します：
const list = document.querySelector(".todo-list");
const item = document.createElement("li"); // 新しい <li>、ページ上にはまだない
item.textContent = "Buy oat milk"; // テキストを与える
list.append(item); // これでリストの最後に表示されますcreateElementからの新しい要素は、あなたが何かにappendするまでメモリの中だけに存在します。その手順がそれをページに置く。要素をページから削除するには、それにremoveを呼び出します：
item.remove(); // ページから消えるdocument.createElementで新しい要素を構築して、textContentでテキストを与えて、appendでページに置いてください。新しい要素はあなたがそれを追加するまでメモリの中だけに存在するので、その手順がそれを表示させる。ページから削除するには、それにremoveを呼び出してください。 ここからDOMはどこに行く
選択、読取、変更、作成、削除は、JavaScriptがページにすることのほとんどをカバーし、すべては下の同じ動きです：ツリー内のオブジェクトを見つけてそのプロパティを変更。DOMはオブジェクトで、オブジェクトで学んだすべてが直接ここに適用されて、この章の小さなメソッドセット（querySelector、textContent、classList、createElement、append）はツールキットのほとんど。
これまでのところ、タイミングが足りません。すべてのサンプルはここで一度実行され、トップから下ですが、実ページはリーダーがすることに応答して変更されます：クリック、キーストロークス、提出されたフォーム。DOMの変更をそれらの瞬間に配線することはイベントで、次の章で、addEventListenerは「ユーザーがこれを行った」を「ページがそうする」に接続。選択と変更がイベントへの応答と一緒に座ると、あなたはこのハンドブックがこしらえる対話型ページを構築できます。