2009-10-02

Javascript: DOM操作でテキストだけ抜き取る

連投。

以前かいたWebサイトで、「ページ内にあるサムネイル画像の検索を行いたい」なんて要望がでて、テキストの検索だからできるだろうと思って作ってみた。
ちなみに、各サムネイルはこんな感じ。
<span class="product">
<img id="hoge" src="hogehoge" />
<div>Produce Name</div>
<div>€ 50</div>
</span>
先頭要素が「span」なのはIE6対策。
っで、prototype.jsを使ってるので、document.getElementsByClassNameでサムネイルの各要素を取り出して、以下のスクリプトでテキストノードだけ抜き取る。
var tags = $A(element.getElementsByTagName("*"));
var text = "";
tags.each(function(tag, index) {
    var children = $A(tag.childNodes);
    children.each(function(node, index) {
        if (node.nodeType == 3) {
            text += node.nodeValue + " ";
        }
    });
});
elementは取得した要素配列の一つ。
元々はここにあったソースだけど、これはFirefox限定だったので、prototype.js使ってクロスブラウザにした。
ただ、それだけ。

どうでもいい話だが、上記のスクリプトの「var text="";」の部分、初期化せずに「var text;」って書くと、for文の中の宣言にもかかわらず、あたかもC/C++のstatic宣言みたいな動作してた。Firefoxでしか確認してないけど。バグか?

No comments:

Post a Comment