IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

Prototype.js 1.5.0_pre1

JavaScript

最新が 1.5.0_pre1 になってたので調査

Prototype.js 1.5.0_pre0 からの変更点

CHANGELOG より

  • Selector 及び $$ が属性セレクタに対応。
  • Ajax 通信時の HTTP ヘッダを追加。
  • $$ を IE でも動くようにした。
  • Element.extend を追加。
  • Element.replace を追加
  • Enumerable.zip のバグフィックス

Selector

Selector に属性セレクタが追加された。属性セレクタとは CSS 2.0 から導入される属性を選択条件とするセレクタである。

例
Event.observe(window, 'load', function() {
    var selector;
    var elements;

    // style 属性を持つ要素を取得。結果「い」「う」
    selector = new Selector('input[style]');
    elements = selector.findElements(document);
    elements.each(function(elem) { alert(elem.value) });

    // type="button" 属性を持つ要素を取得。結果「い」
    selector = new Selector('input[type="button"]');
    elements = selector.findElements(document);
    elements.each(function(elem) { alert(elem.value) });

    // type="button" 属性を持たない要素を取得。結果「あ」「う」
    selector = new Selector('input[type!="button"]');
    elements = selector.findElements(document);
    elements.each(function(elem) { alert(elem.value) });

    // class 属性を半角スペース区切りにして className01 を含む要素を取得。結果「あ」
    selector = new Selector('input[class~="className01"]');
    elements = selector.findElements(document);
    elements.each(function(elem) { alert(elem.value) });

    // class 属性を半角ハイフン区切りにして class を含む要素を取得。結果「う」
    selector = new Selector('input[class|="class"]');
    elements = selector.findElements(document);
    elements.each(function(elem) { alert(elem.value) });

    // 複数の属性セレクタを指定することもできる。
    // style 属性 class 属性を持つ要素を取得。結果「う」
    selector = new Selector('input[style][class]');
    elements = selector.findElements(document);
    elements.each(function(elem) { alert(elem.value) });
});
<body>
    <div>
        <input value="あ" type="text" class="className01 className02"/>
        <input value="い" type="button" style="background-color:white;" />
        <input value="う" type="submit" class="class-name-03" style="background-color:white;" />
    </div>
</body>

上の例を 1.5.0_pre0 で実行→ http://Sample.ECMAScript.jp/20060327-00.html
上の例を 1.5.0_pre1 で実行→ http://Sample.ECMAScript.jp/20060327-01.html

$$

Selector と同様に属性セレクタが追加された。属性セレクタとは CSS 2.0 から導入される属性を選択条件とするセレクタである。
詳しくは上を参照。

例
Event.observe(window, 'load', function() {
    var elements = $$('div div[class="a"] div[class="a"]');
    elements.each(function(elem) { alert(elem.innerHTML); });
});
<body>
    <div>
        <div>
            <div>あ</div><div>い</div><div>う</div>
        </div>
        <div class="a">
            <div>え</div><div class="a">お</div><div>か</div>
        </div>
        <div>
            <div>き</div><div>く</div><div>け</div>
        </div>
    </div>
</body>

上の例を 1.5.0_pre0 で実行→ http://Sample.ECMAScript.jp/20060327-10.html
上の例を 1.5.0_pre1 で実行→ http://Sample.ECMAScript.jp/20060327-11.html

Ajax.Request

Ajax 系の通信時のリクエストヘッダの Accept を text/javascript, text/html, application/xml, text/xml, */* にする。

例
new Ajax.Request(
    '/xml/20060327.xml',
    {
        method : 'get',
        onSuccess : function(req){
            var doc = req.responseXML;
            alert(doc.documentElement.firstChild.nodeValue);
        }
    }
);
<?xml version="1.0" encoding="utf-8"?>
<content>こんにちわ！</content>

上の例を 1.5.0_pre0 で実行→ http://Sample.ECMAScript.jp/20060327-20.html
上の例を 1.5.0_pre1 で実行→ http://Sample.ECMAScript.jp/20060327-21.html
ヘッダ監視ツールで確認してください。

Element.extend

Element.setStyle や Element.update などの様々な関数が使えるようになる。かなり便利！
$ 関数や document.getElementsByClassName 関数や $$ 関数の結果は Element.extend によって Element の関数が織り込まれた状態で復帰される。
（アニメーションとかやる場合やループ中にある場合は $ 関数が重くなるので影響に注意）

例
Event.observe(window, 'load', function() {
    var element = document.body;

    Element.extend(element);

    element.update('こんにちわ！');
    element.setStyle({
        'color': 'red'
    });
});

上の例を 1.5.0_pre0 で実行→ http://Sample.ECMAScript.jp/20060327-30.html
上の例を 1.5.0_pre1 で実行→ http://Sample.ECMAScript.jp/20060327-31.html

Element.replace

要素を文字列で置換する。
ソースの話しだが outerHTML がない環境での createRange を使った置換が興味深い。

例
Event.observe(window, 'load', function() {
    $$('span')[0].replace('ばんわ');
});
<body>
    <div>こん<span>にちわ</span></div>
</body>

上の例を 1.5.0_pre0 で実行→ http://Sample.ECMAScript.jp/20060327-40.html
上の例を 1.5.0_pre1 で実行→ http://Sample.ECMAScript.jp/20060327-41.html