DOM操作をする際にクロスブラウザ対応を便利にしてくれるJavaScript「flow.js」

ブラウザの互換性を気にせずDOM操作やアニメーション、クッキーを操作したい際に使えるJavaScript「flow.js」をご紹介。

最近ではjQueryオンリーのような気もしますが、いろいろと機能を追加しようとして複数のプラグインを導入すると、だんだん動作が重くなってきます。

なるべく軽量のものが使いたい際の選択肢の一つとして覚えておくために自分用メモです。
まだ試してはいないのですがIE6やSafari2などのモダンブラウザでも動くようなので、なかなか良さそうです。

以下のような機能があるとの事。

• DOM Level 3の API操作
• アニメーション処理
• クッキー管理
• フォーム管理の簡素化
• XMLHttpRequestのクロスブラウザ対応

ブラウザにはそれぞれ癖があるので、こういったライブラリを使用して間違いや非サポートの処理をしないようにしたいですね。

サンプル

class属性にcheckedがあるulにliを追加する方法

var uls = document.getElementsByClassName("checked").filter(function(e) {
    return e.nodeName.toLowerCase() == "ul";
});

var lis = [];
uls.forEach(function(ul) {
    ul.getElementsByTagName("li").forEach(function(li) {
        lis.push(li);
    });
});

class属性にcheckedがあるulのliを取得する方法

var lis = document.getByClass("checked").filter(function(e) {
    return e.elementName() == "ul";
}).getByTag("li");

同上。class属性にcheckedがあるulのliを取得する方法

var lis = document.querySelectorAll("ul.checked li");

ライセンスはCCライセンスのようです。
詳細&ダウンロードは下のリンクからどうぞ。