2

今のところszarouski/lodash.dom-traverseを把握しています。 npmで提供されていると嬉しいです。

背景

jQueryの以下の機能に関しては代替えが見つかりました。

問題

querySelectorAll一発で取得できないDOM要素を、jQueryの以下のメソッド

  • parent()
  • prev()
  • children()

を使って取得しています。

このような操作の代替えライブラリを探しています。

またbrowserifyを使っているため、npmで提供されていると一貫したパッケージ管理が行えて嬉しいです。

4 件の回答 4

3

「jQueryが大きい」と言う問題ならばVoyeur.js (http://adriancooney.github.io/voyeur.js/) か Dojo http://dojotoolkit.org/ (DOMモジュールのみ).

jQuery以外のlibraryではなくて (新しいlibraryはだいたい新しい言語より学習が難しい…)、生のjsでやりたいことは:

var myDiv = document.getElementById('myDiv');
as = myDiv.querySelectorAll('ul li a');
for(var i = 0; i < as.length; i++)
    as[i].style.display = 'none';

最近のbrowserでは簡単です (foo.querySelectorAll: https://developer.mozilla.org/ja/docs/Web/API/document.querySelectorAll)。

2

自分で使ったことはありませんが1.3kと小さく、高速だそうです https://github.com/KoryNunn/doc

とはいえこの程度の用途なら document.querySelectorAll() で済むかもしれませんね。昔のJSはクエリエンジンを自前で持っておらずjQueryが内包していたsizzleを経由していましたが、今のJSは標準でクエリエンジンを使うことができます。

追記: サーバーサイドでDOMスクレイピングする際、自分は cheeriojs/cheerio を使っています。

1

DOMtastic

Small, fast, and modular DOM & Event library for modern browsers. Same familiar API as jQuery (but without the extra "weight" of modules like $.ajax, $.animate, and $.Deferred). Weighs in at only 3 to 14KB (minified), depending on included modules. Full bundle is under 5KB gzipped.

npmにもありますし、jQueryから重たいAPIを除いたものといったかんじです。

Zepto

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.

jQuery互換です。スマホ向けと紹介されることが多いですね。

cash

Rethinking the $.

ちょっと変わり種ですが、jQuery風なものです。Traversal Moduleは少なめ。

Voyeur.js

Voyeur is a tiny (1.2kb) Javascript library that lets you traverse and manipulate the DOM the way it should have been. http://adriancooney.github.io/voyeur.js

これは、jQueryのようなAPIではありませんが、以下のように使うことができます。

Voyeur.div.section.ul.li.eq(3).classList.add("Highlighted!");
1
  • リンク先を見ればわかると思ったので...
    – GeckoTang
    Commented 2014年12月16日 3:20
0

jsdom https://github.com/tmpvar/jsdom

質問を読むと、サーバーサイドでjQueryライクにDOM操作を
行うための手段を模索されている気がします。

jsdomはNode.js(or io.js)で利用できるDOM実装であり、
jQuery etcのDOM上で動くDOM操作ライブラリと組み合わ
せて使えます。

Charlie Robbins「jsdom.jsとjqueryを使ったスクレピング」
http://vwxyz.hateblo.jp/entry/20101014/1287047490

1
  • 質問が分かりづらくてすみません。 この質問ではブラウザでのDOM操作、より具体的にはGoogleChrome拡張でのDOM操作を想定しています。 Commented 2014年12月16日 6:05

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。