FURUMO FZ-Y80MF 加湿フィルター 空気清浄機用交換フィルター KC-G50 KC-E50 KC-F50 KC-J50 KC-50TH4 KC-G40 KC-H50 加湿空気清浄機用 FZ-Y80MF（枠付き）互換品 1枚入り
商品ページAmazon
収益広告（自動登録）
サクラ度：△（要確認）
セラミックヒーター 小型 足元ヒーター 電気ファンヒーター 【2025最新進化! 2秒速暖! 超省エネ】暖房器具 2段階温度調節 1000W 大風量 二重過熱保護 転倒OFF 節電対策 静音 脱衣所/卓上/トイレ/寝室/車中泊/キッチン/オフィス/キ
商品ページAmazon
収益広告（自動登録）
サクラ度：△（要確認）
鼻毛カッター メンズ レディー 眉 耳 鼻毛切り（刀頭2本で）USB充電式 水洗い可能 眉 耳 鼻毛切り 兼用 母の日 父の日 誕生日 記念日 (ブラック)
商品ページAmazon
収益広告（自動登録）
サクラ度：△（要確認）
【2025冬新登場】Tibnozt 電気ブラシ ems 美顔器 リフトブラシ 頭皮ブラシ 電動 EMS RF EP 3D振動 2色LED マイナスイオン 大容量液体ケース 美容液と併用 スポイト付 髪 頭筋 表情筋 美容家電 Type-C充電式 クリ
商品ページ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 = "" | 子をすべて削除 | - |
コメントログ
コメント投稿
管理人ツイート
ケーブルトレー NoetixCo 配線隠し デスク下 収納 幅40cm 天板1〜5cm対応 高炭素鋼製 7KG耐荷重 穴あけ不要・工具不要・3分設置 コード まとめる コード隠し コード 収納 配線 整理 デスク周り 机下 収納 ケーブルオーガナイザ
商品ページAmazon
収益広告（自動登録）
サクラ度：△（要確認）
海外旅行用変圧器 220Vから100V 変換｜ACコンセント2口＋USBポート4個（USB-C×2）｜変換プラグ A/BF/C/Oタイプ対応｜アメリカ・韓国・オーストラリア・イギリス・中国など対応
商品ページAmazon
収益広告（自動登録）
サクラ度：△（要確認）
FZ-AX80MF 枠付き 加湿フィルター と Ag+ イオンカートリッジ FZ-AG01K1 抗菌 99.9%以上 加湿空気清浄機用 KC-HD70 KI-EX75 KI-HX75 KI-JX75 KI-EX55 KI-EX75 KI-JX75 K
商品ページAmazon
収益広告（自動登録）
サクラ度：△（要確認）
