DOM関連のスニペット集。

dom.js

// 要素の追加
elm.insertAdjacentHTML('afterend', htmlString);
elm.insertAdjacentHTML('beforebegin', htmlString);
parent.appendChild(elm);
parent.insertBefore(el, parent.firstChild);

// トラヴァース
document.querySelectorAll('.my #awesome selector'); // セレクタで指定した要素を、ドキュメント全体から取得
elm.querySelectorAll(selector); // セレクタで指定した要素を、子孫から取得
elm.children; // 子要素
Array.prototype.filter.call(document.querySelectorAll(selector), filterFn); // フィルター
elm.nextElementSibling;
elm.previousElementSibling;
elm.offsetParent || el; // ポジションが設定されている直近の先祖要素を取得
elm.parentNode;
Array.prototype.filter.call(elm.parentNode.children, function (child) {
	return child !== elm;
});

// 要素操作
elm.cloneNode(true); // 要素のクローン
elm.getAttribute('tabindex'); // 指定した属性値を取得
elm.setAttribute('tabindex', 3);
elm.parentNode.removeChild(elm);
elm.innerHTML;
elm.outerHTML;
elm.textContent;
elm.offsetHeight; // パディングとボーダーを含む高さ
getComputedStyle(elm)[ruleName]; // スタイルルールを取得

// 調べる
elm !== child && elm.contains(child); // 子に指定した要素を含んでいるか
elm.querySelector(selector) !== null; // 子孫にセレクタで指定した要素があるか