dom_dom0900_001
Todoリストアプリで新しい項目を追加する際、まず入力値を取得し、document.( A )(‘li’)で要素を作成してから、リストにappendChildではなくより柔軟な( B )を用いると複数ノードや文字列も追加できる。
DOM : 実践例
dom_dom0900_002
Todo項目の削除ボタンを各liに動的に付与するには、ボタン要素を作成し、クリックイベントでliの( A )()を呼び出すか、親からremoveChildする。大量要素に効率よく対応するには、ulに対してイベントの( B )を使う。
dom_dom0900_003
モーダルウィンドウを開くときは、背景スクロールを抑制するためにdocument.body.style.( A ) = ‘hidden’を設定することがある。閉じるときは( B )イベント（例: ×ボタンや背景クリック）でクラスを外し、スクロールを元に戻す。
dom_dom0900_004
タブ切り替えUIでは、クリックしたタブにaria-selected=”true”を付与し、非アクティブにはfalseを設定する。対応するパネルはhiddenを切り替える。タブからパネルを特定するには( A )属性で関連付け、クリック時に( B )で対象要素を取得する。
dom_dom0900_005
画像スライダーでは、インジケータをクリックしたらcurrentIndexを更新し、transform: ( A )( -currentIndex * 100% )のように横に移動する。連続ループを表現するには先頭・末尾のクローンを用意し、トランジション終了時に位置を( B )で調整する。
dom_dom0900_006
バリデーション付きフォームでは、inputやchangeイベントでリアルタイム検証を行い、無効時には( A )メソッドで送信を阻止する。また、アクセシビリティのためにエラーメッセージ領域に( B )=”assertive”を付け、画面リーダー通知を促す。
dom_dom0900_007
Todoリストで並び替えボタンを押すと、Array.from(ul.children)で配列化し、sort後に( A )で一括挿入すると再描画を最小化できる。また、個々のliを直接大量移動するより、先に( B )を使ってバッファ上で並べると効率がよい。
dom_dom0900_008
モーダルをキーボード操作で閉じるには、keydownイベントで( A ) === ‘Escape’を判定する。また、モーダル内のフォーカスを閉じるまでトラップするため、フォーカス移動キーの( B )も処理する。
dom_dom0900_009
タブUIでURLのハッシュに同期させると、ページ再読み込み後も状態を復元できる。タブクリック時にlocation.( A ) = ‘#p2’のように設定し、初期表示時は( B )イベント（例: DOMContentLoaded）でlocation.hashを読んで該当パネルを開く。
dom_dom0900_010
画像スライダーの自動再生はsetIntervalで定期的にnext()を呼ぶが、ユーザーがホバー中は一時停止したい。これはコンテナにmouseenterでclearInterval(timer)、( B )で再開する。パフォーマンス的にはDOM幅計測の回数を減らすため、( A )を事前に保持しておく。