Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Riot.jsでjQueryライクにDOM操作する

More than 3 years have passed since last update.

Riot.jsでも、jQueryライクに$()とかで、簡単にDOM操作できないのかなと思って調べてみました。

環境は Riot.js 2.5.0

Riot.js本体のコードはどうやら短いらしいので、直接読んでみると、\$()と\$\$()の定義を発見。

lib/browser/tag/util.js のL.376行目くらいに以下のような記述があります。

util.js
/**
 * Shorter and fast way to select multiple nodes in the DOM
 * @param   { String } selector - DOM selector
 * @param   { Object } ctx - DOM node where the targets of our search will is located
 * @returns { Object } dom nodes found
 */
function $$(selector, ctx) {
  return (ctx || document).querySelectorAll(selector)
}

/**
 * Shorter and fast way to select a single node in the DOM
 * @param   { String } selector - unique dom selector
 * @param   { Object } ctx - DOM node where the target of our search will is located
 * @returns { Object } dom node found
 */
function $(selector, ctx) {
  return (ctx || document).querySelector(selector)
}

第二引数は通常のブラウザであれば、何も入れなくて平気かと思います。

ちなみに以下のファイルでimportされているので、すぐに使えるはずです。

lib/riot.js
import 'browser/wrap/prefix'
import 'browser/global-variables'
/* istanbul ignore next */
import '../node_modules/riot-observable/dist/riot.observable.js'
/* istanbul ignore next */
import '../node_modules/riot-route/dist/riot.route.js'
/* istanbul ignore next */
import '../node_modules/riot-tmpl/dist/riot.tmpl.js'
import 'browser/tag/mkdom'
import 'browser/tag/each'
import 'browser/tag/styleManager'
import 'browser/tag/parse'
import 'browser/tag/tag'
import 'browser/tag/update'
import 'browser/tag/util'
import 'browser/index'
import 'browser/wrap/suffix'

ソースコードを読まないと気づけなかったのですが、
\$()はdocument.querySelector()
\$$()はdocumet.querySelectorAll()
なので注意が必要でした。

uzabase
企業活動の意思決定を支える情報インフラの提供
https://www.uzabase.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away