2007/09/14

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

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

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

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

  1. Ten.DOM = new Ten.Class({
  2.     getElementsByTagAndClassName: function(tagName, className, parent) {
  3.         if (typeof(parent) == 'undefined') {
  4.             parent = document;
  5.         }
  6.         var children = parent.getElementsByTagName(tagName);
  7.         if (className) {
  8.             var elements = [];
  9.             for (var i = 0; i <children.length; i++) {
  10.                 var child = children[i];
  11.                 var cls = child.className;
  12.                 if (!cls) {
  13.                     continue;
  14.                 }
  15.                 var classNames = cls.split(' ');
  16.                 for (var j = 0; j <classNames.length; j++) {
  17.                     if (classNames[j] == className) {
  18.                         elements.push(child);
  19.                         break;
  20.                     }
  21.                 }
  22.             }
  23.             return elements;
  24.         } else {
  25.             return children;
  26.         }
  27.     },
  28.     removeEmptyTextNodes: function(element) {
  29.         var nodes = element.childNodes;
  30.         for (var i = 0; i <nodes.length; i++) {
  31.             var node = nodes[i];
  32.             if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) {
  33.                 node.parentNode.removeChild(node);
  34.             }
  35.         }
  36.     },
  37.     nextElement: function(elem) {
  38.         do {
  39.             elem = elem.nextSibling;
  40.         } while (elem && elem.nodeType != 1);
  41.         return elem;
  42.     },
  43.     prevElement: function(elem) {
  44.         do {
  45.             elem = elem.previousSibling;
  46.         } while (elem && elem.nodeType != 1);
  47.         return elem;
  48.     },
  49.     scrapeText: function(node) {
  50.         var rval = [];
  51.         (function (node) {
  52.             var cn = node.childNodes;
  53.             if (cn) {
  54.                 for (var i = 0; i <cn.length; i++) {
  55.                     arguments.callee.call(this, cn[i]);
  56.                 }
  57.             }
  58.             var nodeValue = node.nodeValue;
  59.             if (typeof(nodeValue) == 'string') {
  60.                 rval.push(nodeValue);
  61.             }
  62.         })(node);
  63.         return rval.join('');
  64.     },
  65.     onLoadFunctions: [],
  66.     loaded: false,
  67.     timer: null,
  68.     addEventListener: function(event,func) {
  69.         if (event != 'load') return;
  70.         Ten.DOM.onLoadFunctions.push(func);
  71.         Ten.DOM.checkLoaded();
  72.     },
  73.     checkLoaded: function() {
  74.         var c = Ten.DOM;
  75.         if (c.loaded) return true;
  76.         if (document && document.getElementsByTagName &&
  77.             document.getElementById && document.body) {
  78.             if (c.timer) {
  79.                 clearInterval(c.timer);
  80.                 c.timer = null;
  81.             }
  82.             for (var i = 0; i <c.onLoadFunctions.length; i++) {
  83.                     c.onLoadFunctions[i]();
  84.             }
  85.             c.onLoadFunctions = [];
  86.             c.loaded = true;
  87.         } else {
  88.             c.timer = setInterval(c.checkLoaded, 13);
  89.         }
  90.     }
  91. });

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

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

Leave a comment

Bloglines feedburner