IE8で採用されたconstructorプロパティ

2008-09-22

■[JavaScript]IE8で採用されたconstructorプロパティ

constructorが実装されている件

alert('constructor' in window); // true
alert(window.constructor); // [object Window]

div = document.createElement('div');
alert('constructor' in div); // true
alert(div.constructor); // [object HTMLDivElement]
alert('prototype' in div.constructor); // true

alert(div.constructor.prototype.constructor); // [object Element]

ということは

俺俺メソッドをHTCを利用しなくてもDOMに付与できるということ。HTMLElement Prototypingができるようになったてことでいいかな...。

HTMLDivElement.prototype

<html>
<head>
    <script type="text/javascript">
    HTMLDivElement = document.createElement('div').constructor;
    HTMLDivElement.prototype.showInnerHTML =
        function(){ alert(this.innerHTML); };

    window.onload = function()
    {
        var hoge = document.getElementById('hoge');
        hoge.showInnerHTML(); // Hello World!!
    };
    </script>
</head>
<body>
    <div id="hoge">Hello World!!</div>
</body>
</html>

HTMLElement.prototype

<html>
<head>
    <script type="text/javascript">
    HTMLDivElement = document.createElement('div').constructor;

    // HTMLDivElementをまた遡るとElementオブジェクトが取得可能
    HTMLElement = HTMLDivElement.prototype.constructor;
    HTMLElement.prototype.showInnerHTML =
        function(){ alert(this.innerHTML); };


    window.onload = function()
    {
        var foo = document.getElementById('foo');
        foo.showInnerHTML(); // SPAN::Hello World!!

        var bar = document.getElementById('bar');
        bar.showInnerHTML(); // PRE::Hello World!!
    };
    </script>
</head>
<body>
    <span id="foo">SPAN::Hello World!!</span>
    <pre  id="bar">PRE:Hello World!!</pre>
</body>
</html>