ps4コントローラー【2026年革新版・アップデート】ps4 コントローラ- pc Turbo連射機能 6軸ジャイロセンサー 二重振動 高精密ボタン Bluetoooth5.4 無線/有線安定接続 1000mAh 急速充電 16時間連続使用 人体工学
商品ページAmazon
収益広告（自動登録）
サクラ度：△（要確認）
【PS5】仁王3 【メーカー特典あり】 【早期購入特典】「氷獄の防具セット」(氷獄の武者鎧 一式、氷獄の忍装束 一式)ダウンロードシリアル 同梱
商品ページAmazon
収益広告（自動登録）
サクラ度：△（要確認）
【任天堂ライセンス商品】ワイヤレスホリパッド TURBO for Nintendo Switch 2 コントローラー ミストブラック【Switch2・Switch両対応】【連射/連射ホールド機能搭載】
商品ページAmazon
収益広告（自動登録）
サクラ度：△（要確認）
本記事のトピック
- 概要
- 前提知識
- 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 = "" | 子をすべて削除 | - |
コメントログ
コメント投稿
