MutationObserver()を利用したJavaScriptコードの動作確認ツール

DOMの変更（要素の追加・削除、属性変化など）を監視するMutationObserver()の動作をリアルタイムで確認できます。

プレビュー

HTML

<div class="dom-controls">
	<button type="button" id="btn-add">追加</button>
	<button type="button" id="btn-remove">削除</button>
	<button type="button" id="btn-attr">属性変更</button>
	<button type="button" id="btn-text">テキスト変更</button>
</div>

<div id="elements">
	<span class="child-node">0</span>
</div>

<div id="mutation-log"></div>

CSS

/* DOM要素 */
	#elements {
	padding: 20px;
	margin-top: 15px;
	min-height: 60px;
}

.child-node {
	display: inline-block;
	background: #2a9271;
	color: #fff;
	padding: 4px 8px;
	margin: 5px;
	border-radius: 4px;
}

.child-node.set-attribute {
	display: inline-block;
	background: #000;
	color: #fff;
	padding: 4px 8px;
	margin: 5px;
	border-radius: 4px;
}

/* ログ */
#mutation-log {
	width: 80%;
	margin-top: 20px;
	background: #222;
	color: #0f0;
	font-family: monospace;
	padding: 10px;
	height: 150px;
	overflow-y: auto;
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.4;
}

.log-entry {
	border-bottom: 1px solid #333;
	padding: 2px 0;
}

.log-time {
	color: #888;
	margin-right: 8px;
}

.log-type {
	color: #ffd700;
	font-weight: bold;
	margin-right: 8px;
}

JavaScript

const target = document.querySelector('#elements');
const logArea = document.querySelector('#mutation-log');

// --- ボタン操作処理 ---

// 子要素を追加
document.querySelector('#btn-add').addEventListener('click', () => {
	if (!target) return;
	
	// 新しい子要素を作成
	const span = document.createElement('span');
	span.className = 'child-node';
	span.textContent = '' + (target.querySelectorAll('.child-node').length + 1);
	target.appendChild(span);
});

// 子要素を削除
document.querySelector('#btn-remove').addEventListener('click', () => {
	if (!target) return;

	// 最後の子要素を削除
	const last = target.querySelector('.child-node:last-child');
	if (!last) return;
	last.remove();
});

// 属性を変更
document.querySelector('#btn-attr').addEventListener('click', () => {
	if (!target) return;
	const children = target.querySelectorAll('.child-node');
	if (children.length === 0) return;

	// すべての子要素のclass属性を変更
	children.forEach(child => {
		const current = child.getAttribute('class');
		child.setAttribute('class', current === 'child-node set-attribute' ? 'child-node' : 'child-node set-attribute');
	});
});

// テキストを変更
document.querySelector('#btn-text').addEventListener('click', () => {
	if (!target) return;
	const children = target.querySelectorAll('.child-node');
	if (children.length === 0) return;

	// すべての子要素のテキストをランダムな英字に変更
	const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
	children.forEach(child => {
		child.textContent = chars.charAt(Math.floor(Math.random() * chars.length));
	});
});


// --- MutationObserver()での監視処理 ---
const observer = new MutationObserver((mutations) => {
	mutations.forEach((mutation) => {
		const div = document.createElement('div');
		div.className = 'log-entry';

		const time = `<span class="log-time">[${new Date().toLocaleTimeString()}]</span>`;
		const type = `<span class="log-type">${mutation.type}</span>`;
		let details = '';

		if (mutation.type === 'childList') {
			const changes = [];
			if (mutation.addedNodes.length > 0) changes.push(`要素を追加: ${mutation.addedNodes.length}`);
			if (mutation.removedNodes.length > 0) changes.push(`要素を削除: ${mutation.removedNodes.length}`);
			details = changes.join(', ');
		} else if (mutation.type === 'attributes') {
			details = `属性を変更: ${mutation.attributeName}`;
		} else if (mutation.type === 'characterData') {
			details = `テキストを変更`;
		}

		// ログを出力
		div.innerHTML = `${time}${type}${details}`;
		logArea.insertBefore(div, logArea.firstChild);
	});
});

// 監視を開始（デフォルト：すべてのオプションを有効）
observer.observe(target, {
	childList: true,      // 子要素の追加・削除
	attributes: true,     // 属性の変更
	subtree: true,        // 孫要素以降も監視
	characterData: true   // テキストノードの変更
});