DOM 操作を jQuery をつかわずにおこなう方法のメモ

gistfile1.md

なぜ?

jQuery は便利だけど、ナマで DOM を操作することも最近やっと楽になりつつある。IE9 以後だけをサポートすれば DOM 操作もわりと楽だ。

というわけで、原点回帰して、DOM 操作を DOM API からおこなうことを復習しようとおもう。

対応ブラウザ

IE9 以後と、各ブラウザの最新版。

本稿と ES5

ES5 のメソッドをガンガンつかっているので、古いブラウザでがんばるためには es5shim をロードするとよい。

$(function() { })

ブラウザのロード処理がおわったタイミングでのコードの実行。

document.addEventListener(“DOMContentLoaded”, function () {
	document.removeEventListener(“DOMContentLoaded”, arguments.callee, false);

	// 実際の処理
}, false);

古いブラウザへの対応

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

に古いブラウザでエミュレートするためのコードがある。

EventShim というライブラリもあるようだ。

$(elem).attr(‘foo’);

element.getElement(‘foo’); でいい。

https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttribute

$(elem).attr(‘foo’, ‘bar’);

https://developer.mozilla.org/en-US/docs/Web/API/element.setAttribute

element.setAttribute(‘foo’, ‘bar’) でよい。

$(elem).append(child)

https://developer.mozilla.org/fr/docs/DOM/element.appendChild

elem.appendChild(child) でよい。