GANCHIKU.com

DOM操作は自分で書いた方が良さそう。

未だ、prototype.js。しかし、DOM周りはやっぱり重くて使い物にならん。。。nextとかあかんね。引数無しで使っても重すぎ。というわけで、自作でnextElementとかのメソッドを追加するのが良さそうだ。まぁ、とりあえず調べてみた。そしたら、はてなの匿名ダイアリーに結構コッテリしたソースが載っているじゃない?つーか、このレベルのJavaScriptが書けたら、いいよなー。

というわけで、一応リンク。つーか、読みがいもあるし、いいかもしんね。つーか、Tenって何?
http://anond.hatelabo.jp/20070719173038

えーと、特に使えそうだと思ったのは、Ten.DOM周り。このままじゃ使えんけど、まさにやりたかったことが書いてある。

Ten.DOM = new Ten.Class({
    getElementsByTagAndClassName: function(tagName, className, parent) {
        if (typeof(parent) == 'undefined') {
            parent = document;
        }
        var children = parent.getElementsByTagName(tagName);
        if (className) {
            var elements = [];
            for (var i = 0; i < children.length; i++) {
                var child = children[i];
                var cls = child.className;
                if (!cls) {
                    continue;
                }
                var classNames = cls.split(' ');
                for (var j = 0; j < classNames.length; j++) {
                    if (classNames[j] == className) {
                        elements.push(child);
                        break;
                    }
                }
            }
            return elements;
        } else {
            return children;
        }
    },
    removeEmptyTextNodes: function(element) {
        var nodes = element.childNodes;
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) {
                node.parentNode.removeChild(node);
            }
        }
    },
    nextElement: function(elem) {
        do {
            elem = elem.nextSibling;
        } while (elem && elem.nodeType != 1);
        return elem;
    },
    prevElement: function(elem) {
        do {
            elem = elem.previousSibling;
        } while (elem && elem.nodeType != 1);
        return elem;
    },
    scrapeText: function(node) {
        var rval = [];
        (function (node) {
            var cn = node.childNodes;
            if (cn) {
                for (var i = 0; i < cn.length; i++) {
                    arguments.callee.call(this, cn[i]);
                }
            }
            var nodeValue = node.nodeValue;
            if (typeof(nodeValue) == 'string') {
                rval.push(nodeValue);
            }
        })(node);
        return rval.join('');
    },
    onLoadFunctions: [],
    loaded: false,
    timer: null,
    addEventListener: function(event,func) {
        if (event != 'load') return;
        Ten.DOM.onLoadFunctions.push(func);
        Ten.DOM.checkLoaded();
    },
    checkLoaded: function() {
        var c = Ten.DOM;
        if (c.loaded) return true;
        if (document && document.getElementsByTagName &&
            document.getElementById && document.body) {
            if (c.timer) {
                clearInterval(c.timer);
                c.timer = null;
            }
            for (var i = 0; i < c.onLoadFunctions.length; i++) {
                    c.onLoadFunctions[i]();
            }
            c.onLoadFunctions = [];
            c.loaded = true;
        } else {
            c.timer = setInterval(c.checkLoaded, 13);
        }
    }
});

でも、私はElementとか思いっきり拡張しちゃうタイプなので、nextElementやpreviousElementは、addMethodしちゃう。ついでに、childElementsなども作っちゃおうかなー。そして、引数に数字を当てて、とっちゃうような感じで作ろうかしらん。他にも、prototype.jsのcleanWhitespace()辺りをrecursiveにする奴とか。

しかし、今は、うちのキーボードが壊れて、「カッコ閉じる」が入らないので、新しいキーボードが来てからにしよう。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Shin Ohno 2003-2012