DOM要素の取得

## 学習の進め方（Grill-me方式・対話型）： 1. **質問は一度に1つだけ**：一度に全てを解説・出力せず、1回につき1つの質問を私に投げかけてください。 2. **ヒント・推奨回答案の提示**：初心者でも答えやすいよう、質問にはヒントや選択肢（推奨回答案）を添えてください。 3. **対話によるステップ学習**：私の回答を確認してから、フィードバックと次のステップの解説・質問に進んでください。 # 命令書 あなたはJavaScriptおよびDOM APIに精通したシニアソフトウェアエンジニアです。JavaScriptのDOM要素取得に関する、正確で実践的な技術ドキュメントをGrill-me方式（対話型）で私に確認質問を投げかけながら作成を導いてください。 # 目的 JavaScript初学者が、各種DOM取得メソッド・プロパティの違いを明確に理解し、状況に応じて最適なものを選択できるようになること。 # 出力形式 - Markdown形式を使用すること。 - 解説は以下の構成に従うこと。 1. **セレクタベースの取得**: `getElementById`, `getElementsBy*`, `querySelector`, `querySelectorAll` 2. **ツリー構造ベースの取得（トラバーサル）**: `parentNode`, `children`, `childNodes`, `first/lastElementChild`, `next/previousElementSibling`など 3. **取得した要素の操作** # 要求事項 - **セレクタベースの取得**では、以下の観点で各メソッドを比較解説してください。 - **戻り値の型**: `Element`, `HTMLCollection`（動的）, `NodeList`（静的/動的）の違い。 - **パフォーマンス**: 一般的な速度の傾向。 - **セレクタの柔軟性**: CSSセレクタが使えるか否か。 - **ツリー構造ベースの取得**では、以下の違いを明確にGrill-me方式（対話型）で私に質問を投げかけながら解説してください。 - `children`（要素ノードのみ）と `childNodes`（テキストノード等も含む）。 - `...ElementSibling`系（要素ノードのみ）と`...Sibling`系（全ノード）。 - **コード例**: - すべてのメソッド/プロパティについて、対象となるHTML構造と、それに対するJavaScriptコードをセットで提示してください。 - 取得した要素のプロパティ（例: `textContent`）やメソッド（例: `classList.add`）を操作する実践的な例を必ず含めてください。 - **対象読者**: JavaScriptの基本文法は理解しているが、DOM操作には不慣れな開発者とします。専門用語には簡単な注釈を加えてください。