

今のところ[szarouski/lodash.dom-traverse](https://github.com/szarouski/lodash.dom-
traverse)を把握しています。 npmで提供されていると嬉しいです。

# 背景

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

  * DOMの生成 ：[hyperscript](https://github.com/dominictarr/hyperscript) / [virtual-hyperscript](https://github.com/Raynos/virtual-hyperscript) で代替え可能
  * Selector ： `document.querySelectorAll()` で代替え可能

# 問題

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

  * parent()
  * prev()
  * children()

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

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

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


CC BY-SA 3.0
2014-12-16T01:15:35.043
1614
2015-04-08T11:14:57.770
2014-12-19T13:45:20.237
3313
2325
question
javascript browserify
DOMをtraverseする、jQuery以外のライブラリを教えてください


### [DOMtastic](http://webpro.github.io/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](http://zeptojs.com/)

> 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](https://github.com/sudo-js/cash)

> Rethinking the `$`.

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

### [Voyeur.js](https://github.com/adriancooney/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ではありませんが、以下のように使うことができます。

[code]

    Voyeur.div.section.ul.li.eq(3).classList.add("Highlighted!");
    
[/code]


CC BY-SA 3.0
2014-12-16T01:32:27.570
1618
2014-12-16T03:28:04.087
2014-12-16T03:28:04.087
2343
2343
1614
answer


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

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

[code]

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

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


CC BY-SA 3.0
2014-12-16T01:53:22.363
1625
2015-04-08T11:14:57.770
2015-04-08T11:14:57.770
2371
2371
1614
answer


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

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

追記: サーバーサイドでDOMスクレイピングする際、自分は
[cheeriojs/cheerio](https://github.com/cheeriojs/cheerio "cheeriojs/cheerio")
を使っています。


CC BY-SA 3.0
2014-12-16T02:21:44.533
1632
2014-12-16T05:54:01.010
2014-12-16T05:54:01.010
2674
2674
1614
answer


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>


CC BY-SA 3.0
2014-12-16T04:50:50.350
1665
2014-12-16T04:50:50.350
3214
1614
answer