DOM要素の取得

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