【JavaScript】DOM操作メソッド #JavaScript

DOM操作一覧

JavaScriptにおける主なDOM操作メソッド

要素の作成

document.createElement(tagName): 指定したHTML要素を作成

const divElement = document.createElement('div');

要素の取得

document.getElementById(id): 指定したID属性を持つ要素を取得

const elementById = document.getElementById('myElementId');

document.getElementsByClassName(className): 指定したクラス名を持つ要素のリストを取得

const elementsByClass = document.getElementsByClassName('myClassName');

document.getElementsByTagName(tagName): 指定したタグ名を持つ要素のリストを取得

const elementsByTag = document.getElementsByTagName('div');

document.querySelector(selector): 指定したCSSセレクタに一致する最初の要素を取得

const element = document.querySelector('.myClass');

document.querySelectorAll(selector): 指定したCSSセレクタに一致するすべての要素のリストを取得

const elements = document.querySelectorAll('p');

要素の操作

element.appendChild(child): 指定した要素を別の要素の子要素として追加

parentElement.appendChild(childElement);

element.removeChild(child): 指定した要素を別の要素から削除

parentElement.removeChild(childElement);

element.setAttribute(name, value): 指定した属性名と属性値を持つ属性を要素に追加

element.setAttribute('data-id', '123');

element.getAttribute(name): 指定した属性名の属性値を取得

const value = element.getAttribute('data-id');

element.innerHTML: 要素の内部HTMLを取得または設定

const html = element.innerHTML;
element.innerHTML = '<p>Hello, World!</p>';

importNode: 外部ドキュメントからノードを取得し、新しいドキュメントに追加する際に便利

const response = await fetch('https://example.com/external_document.html');
const externalDocument = new DOMParser().parseFromString(await response.text(), 'text/html');

// 外部ドキュメントから要素を取得
const externalElement = externalDocument.querySelector('.external-element');

// 新しいドキュメントに要素を追加
const newElement = document.importNode(externalElement, true);
document.body.appendChild(newElement);

insertAdjacentElement 指定した要素を特定の位置に挿入するためのメソッド

targetElement.insertAdjacentElement(position, element);

targetElement：要素を挿入する対象の要素を指定
position：要素を挿入する位置を指定します。以下の値が利用できる
└ 'beforebegin'：要素の前に挿入
└ 'afterbegin'：要素の最初の子要素として挿入
└ 'beforeend'：要素の最後の子要素として挿入
└ 'afterend'：要素の後に挿入
element：挿入する要素を指定

const targetElement = document.getElementById('target');
const newElement = document.createElement('div');
newElement.textContent = 'New Element';

// targetElementの最後の子要素としてnewElementを挿入する
targetElement.insertAdjacentElement('beforeend', newElement);

イベントリスナーの追加

element.addEventListener(event, listener): 指定したイベントに対してイベントリスナーを追加

element.addEventListener('click', handleClick);

▼ イベント一覧
"click": クリックイベント。要素がクリックされたときに発火します。
"mouseover": マウスが要素上に乗ったときのイベント。
"keydown": キーボードのキーが押されたときのイベント。
"submit": フォームが送信されたときのイベント。
"load": ページや画像などのリソースが完全に読み込まれたときのイベント。

スタイルの変更

element.style.property: 要素のスタイルプロパティを取得または設定

element.style.color = 'red';
const backgroundColor = element.style.backgroundColor;

element.classList.add(className): 要素に指定したクラス名を追加

element.classList.add('active');

element.classList.remove(className): 要素から指定したクラス名を削除

element.classList.remove('active');

element.classList.toggle(className): 要素のクラスリストに指定したクラス名が存在する場合は削除し、存在しない場合は追加

element.classList.toggle('active');