本記事のトピック
- 概要
- 前提知識
- DOM要素の操作でよく使うプロパティ・メソッド一覧
DOM要素の操作でよく使うプロパティ・メソッド一覧
概要
JavaScriptでDOM操作（取得・作成・更新・削除）をする際によく使うプロパティとメソッドを一覧形式でまとめたものです。
まぁ実際には（少なくともボクは）あまり使わないものも含まれていますが、とりあえずこれらは頭の中に入れておいた方が良いのでは、というものでまとめています。
詳細な説明は省いているので、分からないものがある場合はググるなりジピる（ChatGPTで調べる）なりする前提です。
前提知識
一覧には戻り値の型も書いてありますが、それぞれの型の継承関係は以下になっているそうです。
戻り値の継承関係
Node
└──Element
└──SVGElement
└──HTMLElement
├──HTMLDivElement
└──...（タグごとの型）
（一覧に登場する）コレクション型
| スカラー型 | コレクション型 |
|---|---|
| Node | NodeList |
| Element | Element[] |
| HTMLElement | HTMLCollection |
DOM要素の操作でよく使うプロパティ・メソッド一覧
| CRUD | 小分類 | プロパティ/メソッド名 | 概要 | 戻り値 |
|---|---|---|---|---|
| 取得 | 絶対位置 | document.documentElement | html要素全体を取得 | HTMLElement |
| document.head | htmlのhead要素全体を取得 | HTMLElement | ||
| document.body | htmlのbody要素全体を取得 | HTMLElement | ||
| document.getElementById(id) | 指定したID属性の要素1つだけ取得 | HTMLElement | ||
| document.getElementsByClassName(className) | 指定したクラス名を持つ全ての要素を取得 | HTMLCollection | ||
| document.getElementsByTagName(tagName) | 指定したタグ名（例：div）の全ての要素を取得 | HTMLCollection | ||
| document.querySelector(selector) | CSSセレクタに一致する最初の要素1つだけ取得 | Element | ||
| document.querySelectorAll(selector) | CSSセレクタに一致するすべての要素を取得 | NodeList | ||
| 相対位置 =親/子/兄弟 |
element.closest(selector) | 指定セレクタに一致する最も近い親要素を取得 | Element | |
| element.children | 指定要素の子要素（要素ノードのみ）を取得 | HTMLCollection | ||
| element.childNodes | 指定要素のすべての子ノード（テキスト、コメント含む）を取得 | NodeList | ||
| element.firstElementChild | 最初の子要素ノードを取得 | Element | ||
| element.lastElementChild | 最後の子要素ノードを取得 | Element | ||
| element.parentElement | 親の要素ノードを取得 | Element | ||
| element.previousElementSibling | 直前の兄弟要素を取得 | Element | ||
| element.nextElementSibling | 直後の兄弟要素を取得 | Element | ||
| 作成 | DOM要素の作成 | document.createElement(tagName) | 指定したHTMLタグ名の要素を作成 | HTMLElement |
| document.createElementNS(namespaceURI, qualifiedName) | 指定したHTMLタグ名の名前空間付き要素を作成（例：SVG） | Element | ||
| document.createTextNode(data) | テキストノードを作成 | Text | ||
| document.createDocumentFragment() | 大量のDOM要素を追加するときなどに、軽量な仮想DOMコンテナを作成 | DocumentFragment | ||
| DOM要素の挿入 | parentElement.appendChild(node) | 親要素の末尾に子要素を追加 | Node | |
| parentElement.insertBefore(newNode, referenceNode) | 参照ノードの直前に新ノードを追加 | Node | ||
| parentElement.replaceChild(newNode, oldNode) | 既存ノードを置換 | Node | ||
| parentElement.append(...nodes) | 複数のノードや文字列を末尾に追加 | undefined | ||
| parentElement.prepend(...nodes) | 複数のノードや文字列を先頭に追加 | undefined | ||
| parentElement.insertAdjacentElement(position, node) | 指定した位置に要素を追加 | Element | ||
| parentElement.insertAdjacentHTML(position, html) | HTML文字列を挿入（要素でなく文字列） | undefined | ||
| parentElement.insertAdjacentText(position, text) | テキストノードとして文字を挿入 | undefined | ||
| element.replaceWith(newNode) | 自分自身を置き換える | undefined | ||
| 更新 | 内容変更 | element.textContent | テキスト内容を変更 | - |
| element.innerText | テキスト内容を変更 | - | ||
| element.innerHTML | HTMLとして要素の中身を再構築 | - | ||
| element.outerHTML | 自身を含めてHTMLとして置換 | - | ||
| スタイル変更 | element.style.property = value | 直接CSSスタイルを設定（例：min-widthの場合はstyle.minWidth = "50%"） | - | |
| 属性操作 | element.setAttribute(name, value) | 属性を設定（例：setAttribute("href", "#")） | - | |
| element.removeAttribute(name) | 属性の削除（例：removeAttribute("disabled")） | - | ||
| クラス操作 | element.className | クラス名を文字列で指定 | - | |
| element.classList.add("name") | クラスを追加 | - | ||
| element.classList.remove("name") | クラスを削除 | - | ||
| element.classList.toggle("name") | クラスの有無を切り替え | - | ||
| データ属性 | element.dataset.key = value | data-*属性の操作 | - | |
| イベント追加 | element.addEventListener(event, handler) | イベントリスナを登録 | - | |
| element.removeEventListener(event, handler) | イベントリスナを削除 | - | ||
| 表示制御 | element.hidden = true | 非表示にする | - | |
| element.style.display = "none" | CSSスタイルで非表示にする | - | ||
| 削除 | - | parent.removeChild(child) | 指定の子ノードを削除 | - |
| element.remove() | 自分自身を削除 | - | ||
| element.innerHTML = "" | 子をすべて削除 | - |
コメントログ
コメント投稿
