documentオブジェクトの挙動を変える

Web js

　あー、getElementByIdの動作変えたいなーとか、createElementの動作変えたいなー、という要求は多いかと思います。あ、javascriptの話ですよ。
　そんな変テコなことを考えるあなたにはこれ。インスタントdocument wrapping、もしくはdocumentのプロパティの上書き。そのまんま。


　どうするかっていうと、documentのオリジナルのプロパティをそのまま上書きするだけ。ただ、既存の動作も残したい場合はちょっと面倒。


　所望のプロパティのオリジナルを一時的に保存し、上書きする。意図としてはthisがdocumentなので、callでdocumentを指定。


　こうすることで、わりと直感的なdocumentのオーバーライドモドキができます。
以下はdocument.createElementでdivを作ろうとするとspanができて、spanを作ろうとするとdivができるという、ヘンチクリンなコード。オーバーライドでやっちゃいけないことの代表例ｗ

var temp = {}
temp.createElement = document.createElement;
document.createElement = function( arg ){
	switch( arg ){
		case 'div':
			return temp.createElement.call( document, 'span' );
			break;
		case 'span':
			return temp.createElement.call( document, 'div' );
			break;
	}
	return temp.createElement.call( document, arg );
}
</html>


window.documentでも同様なことができる（はず）


HTMLのサンプルはこちら。

<html>
	<head>
	</head>
	<body>
		<div id="foo"></div>
		<script type="text/javascript">
			var temp = {}
			temp.createElement = document.createElement;
			document.createElement = function( arg ){
				switch( arg ){
					case 'div':
						return temp.createElement.call( document, 'span' );
						break;
					case 'span':
						return temp.createElement.call( document, 'div' );
						break;
				}
				return temp.createElement.call( document, arg );
			}

			document.getElementById( 'foo' ).appendChild( document.createElement( 'div' ) );
		</script>
	</body>
</html>


見た目には変化ないですが、先述した動作をしとります。domインスペクタで見ると良いかと。
使い道は全く不明ですが。


こんなヘンテコな遊びに付き合ってくれた友人に感謝。