DOM操作チートシート

自分用チートシートです。

要素の取得

メソッド	説明	例
document.getElementById('id')	指定されたIDを持つ単一の要素を取得。	const el = document.getElementById('myId');
document.querySelector('selector')	指定されたCSSセレクタに一致する最初の要素を取得。	const el = document.querySelector('.myClass'); const el2 = document.querySelector('div.item');
document.querySelectorAll('selector')	指定されたCSSセレクタに一致するすべての要素のNodeList（配列ライク）を取得。	const els = document.querySelectorAll('li'); const els2 = document.querySelectorAll('div > p');
document.getElementsByClassName('class')	指定されたクラス名を持つすべての要素のHTMLCollection（配列ライク）を取得。	const els = document.getElementsByClassName('item');
document.getElementsByTagName('tag')	指定されたタグ名を持つすべての要素のHTMLCollectionを取得。	const els = document.getElementsByTagName('p');
element.querySelector('selector')	指定した要素の子孫からセレクタに一致する最初の要素を取得。	const child = parentEl.querySelector('span');
element.querySelectorAll('selector')	指定した要素の子孫からセレクタに一致するすべての要素を取得。	const children = parentEl.querySelectorAll('a');

要素の作成と追加/削除

メソッド	説明	例
document.createElement('tagName')	指定されたタグ名を持つ新しいHTML要素を作成。	const newDiv = document.createElement('div');
element.appendChild(childElement)	指定した要素の末尾に子要素を追加。	parentElement.appendChild(newDiv);
element.removeChild(childElement)	指定した要素の子要素を削除。	parentElement.removeChild(childToRemove);
element.insertBefore(newNode, referenceNode)	referenceNodeの直前にnewNodeを挿入。	parentElement.insertBefore(newEl, existingEl);
element.replaceChild(newChild, oldChild)	oldChildをnewChildに置き換える。	parentElement.replaceChild(newEl, oldEl);
element.cloneNode(deep)	要素のクローンを作成。deepがtrueなら子孫もクローン。	const clone = originalEl.cloneNode(true);

要素の内容操作

プロパティ/メソッド	説明	例
element.textContent	要素内のテキストコンテンツ（HTMLタグは無視される）。	el.textContent = '新しいテキスト'; console.log(el.textContent);
element.innerHTML	要素内のHTMLコンテンツ（HTMLタグも含まれる）。	el.innerHTML = '<strong>太字テキスト</strong>'; console.log(el.innerHTML);
element.outerHTML	要素自身を含むHTMLコンテンツ。	console.log(el.outerHTML); (要素自体も含む)

属性操作

メソッド	説明	例
element.getAttribute('attrName')	指定された属性の値を取得。	const src = imgEl.getAttribute('src');
element.setAttribute('attrName', 'value')	指定された属性の値を設定または更新。	imgEl.setAttribute('src', 'new_image.jpg');
element.removeAttribute('attrName')	指定された属性を削除。	imgEl.removeAttribute('alt');
element.hasAttribute('attrName')	指定された属性が存在するかどうかをチェック。	const hasAlt = imgEl.hasAttribute('alt');
element.id / element.className / etc.	一般的な属性はプロパティとして直接アクセス可能。	el.id = 'newId'; el.className = 'newClass';

スタイル操作

プロパティ	説明	例
element.style.propertyName	インラインスタイルとしてプロパティにアクセス。CSSプロパティはキャメルケースで記述。	el.style.color = 'red'; el.style.backgroundColor = 'blue';
element.classList.add('className')	クラスを追加。	el.classList.add('active');
element.classList.remove('className')	クラスを削除。	el.classList.remove('active');
element.classList.toggle('className')	クラスがあれば削除、なければ追加。	el.classList.toggle('hidden');
element.classList.contains('className')	クラスが含まれているかチェック。	const hasClass = el.classList.contains('active');

イベント処理

メソッド	説明	例
element.addEventListener('event', handler)	指定したイベントが発生したときに実行される関数を登録。	btn.addEventListener('click', () => { /* 処理 */ });
element.removeEventListener('event', handler)	登録されたイベントリスナーを削除。	btn.removeEventListener('click', myHandler);
event.target	イベントが発生した要素。	e.target.tagName;
event.preventDefault()	イベントのデフォルト動作（例: リンクの遷移）をキャンセル。	e.preventDefault();
event.stopPropagation()	イベントのバブリング（親要素への伝播）を停止。	e.stopPropagation();

DOMトラバーサル

プロパティ/メソッド	説明	例
element.parentNode	親要素。	const parent = childEl.parentNode;
element.children	すべての子要素（要素ノードのみ）。HTMLCollectionを返す。	const children = parentEl.children;
element.firstElementChild	最初の子要素。	const first = parentEl.firstElementChild;
element.lastElementChild	最後の子要素。	const last = parentEl.lastElementChild;
element.nextElementSibling	次の兄弟要素。	const next = currentEl.nextElementSibling;
element.previousElementSibling	前の兄弟要素。	const prev = currentEl.previousElementSibling;