このセクションでは、JavaScript Document Object Model (DOM) について説明し、DOM要素を効果的に操作する方法を紹介します。
セクション1. はじめに
セクション2. 要素の選択
- getElementById() – idで要素を選択します。
- getElementsByName() – 名前で要素を選択します。
- getElementsByTagName() – タグ名で要素を選択します。
- getElementsByClassName() – 1つ以上のクラス名で要素を選択します。
- querySelector() – CSSセレクターで要素を選択します。
セクション4. 要素の操作
- createElement() – 新しい要素を作成します。
- appendChild() – 指定された親ノードの子ノードのリストにノードを追加します。
- textContent – ノードのテキストコンテンツを取得および設定します。
- innerHTML – 要素のHTMLコンテンツを取得および設定します。
- innerHTML vs. createElement – 新しい要素を作成する際のinnerHTMLとcreateElementの違いを説明します。
- DocumentFragment – DOMノードを構成し、アクティブなDOMツリーに挿入する方法を学びます。
- after() – 要素の後にノードを挿入します。
- append() – 親ノードの最後の子ノードの後にノードを挿入します。
- prepend() – 親ノードの最初の子ノードの前にノードを挿入します。
- insertAdjacentHTML() – テキストをHTMLとして解析し、結果のノードを指定された位置にドキュメントに挿入します。
- replaceChild() – 子要素を新しい要素で置き換えます。
- cloneNode() – 要素とそのすべての子孫を複製します。
- removeChild() – ノードの子要素を削除します。
- insertBefore() – 指定された親ノードの子ノードとして、既存のノードの前に新しいノードを挿入します。
- insertAfter()ヘルパー関数 – 指定された親ノードの子ノードとして、既存のノードの後に新しいノードを挿入します。
セクション5. 属性の操作
- HTML属性とDOMオブジェクトのプロパティ – HTML属性とDOMオブジェクトのプロパティの関係を理解します。
- setAttribute() – 要素の指定された属性の値を設定します。
- getAttribute() – 要素の属性の値を取得します。
- removeAttribute() – 指定された要素から属性を削除します。
- hasAttribute() – 要素に指定された属性があるかどうかを確認します。
セクション6. 要素のスタイルの操作
- styleプロパティ – 要素のインラインスタイルを取得または設定します。
- getComputedStyle() – 要素の計算されたスタイルを返します。
- classNameプロパティ – スペースで区切られたCSSクラスのリストを返します。
- classListプロパティ – 要素のCSSクラスを操作します。
- 要素の幅と高さ – 要素の幅と高さを取得します。
セクション7. イベントの操作
- JavaScriptイベント – JavaScriptイベント、イベントモデル、およびイベントを処理する方法を紹介します。
- イベントの処理 – JavaScriptでイベントを処理する3つの方法を示します。
- ページロードイベント – ページのロードとアンロードイベントについて学びます。
- loadイベント – ドキュメント、画像、およびスクリプト要素から発生するloadイベントの処理手順を説明します。
- DOMContentLoaded –
DOMContentLoadedイベントを正しく使用する方法を学びます。 - beforeunloadイベント – ユーザーがページを離れる前に確認ダイアログを表示する方法を説明します。
- unloadイベント – ページが完全にアンロードされたときに発生するunloadイベントを処理する方法を示します。
- マウスイベント – マウスイベントを処理する方法。
- キーボードイベント – キーボードイベントを処理する方法。
- スクロールイベント – スクロールイベントを効果的に処理する方法。
- scrollIntoView – 要素をビューにスクロールする方法を学びます。
- フォーカスイベント – フォーカスイベントについて説明します。
- haschangeイベント – URLハッシュが変更されたときにイベントを処理する方法を学びます。
- イベント委譲 – イベントが発生した要素よりもDOMの上位レベルでイベントを処理するために、イベントバブリングを利用する手法です。
- dispatchEvent – コードからイベントを生成してトリガーする方法を学びます。
- カスタムイベント – カスタムJavaScriptイベントを定義し、要素にアタッチします。
- MutationObserver – DOMの変更を監視し、変更が発生したときにコールバックを呼び出します。
セクション8. Webフォームのスクリプト
- JavaScriptフォーム – フォームの
submitイベントを処理し、Webフォームの簡単な検証を実行する方法を学びます。 - ラジオボタン – ラジオボタンのJavaScriptを記述する方法を示します。
- チェックボックス – JavaScriptでチェックボックスを操作する方法を説明します。
- セレクトボックス – JavaScriptでセレクトボックスとそのオプションを処理する方法を学びます。
- オプションの追加/削除 – セレクトボックスにオプションを動的に追加したり、セレクトボックスからオプションを削除したりする方法を示します。
- <select>要素から条件付きで項目を削除 –
<select>要素から条件付きで項目を削除する方法を示します。 - changeイベントの処理 – 入力テキスト、ラジオボタン、チェックボックス、セレクト要素のchangeイベントを処理する方法を学びます。
- inputイベントの処理 – 入力要素の値が変更されたときにinputイベントを処理します。
JavaScript DOMプロジェクト
このチュートリアルは役に立ちましたか？
