document.querySelectorAll(selectors) を Array.prototype.slice.call() ([].slice.call()) の中に入れると、配列で使える map や filter といったメソッドが使えるようになるようです。
サンプル
例として、Qiitaの人気の投稿Beta にある記事のタイトルをコンマ区切りでアラート表示するブックマークレットを作ってみました。
以下のコードをQiitaの人気の投稿Betaを開いている状態でブラウザ上のアドレスバーに貼り付け(貼り付け時に先頭の javascript: が消える場合は javascript: を追記してください)してからEnterキーを押すと実行できます。
ES2015の記法(アロー関数等)は用いていないので、Internet Explorer 11でも動作します。
[].slice.call() を利用
map メソッドで記事名の配列を生成し、join メソッドでコンマ区切りの文字列を生成します
javascript:alert([].slice.call(document.querySelectorAll('.popularItem_articleTitle_text')).map(function(el,i){return el.innerText}).join());
[].map.call() を利用
今回の例では [].slice.call() と map メソッドの代わりに、 [].map.call() でも記事名の配列を生成することができます
javascript:alert([].map.call(document.querySelectorAll('.popularItem_articleTitle_text'),function(el,i){return el.innerText}).join());
サンプル(jQueryが使える場合)
jQueryがあっても、すっきり書けない感じでした。
get メソッドでjQueryオブジェクトが持つエレメント全てを配列の形で得ることができるようです。
QiitaではjQueryが使われており、以下のサンプルは上のものと同様にして実行ができます。
先に get する
get メソッド以降は [].slice.call() を利用する場合と同様になります
javascript:alert($('.popularItem_articleTitle_text').get().map(function(el,i){return el.innerText}).join());
後で get する
ここでのmap メソッドはjQueryのもので、map メソッドの中に入れる関数で2番目の引数を用いたり、 $(el).text() のようにして要素が持つテキストを取得したりする必要があります
javascript:alert($('.popularItem_articleTitle_text').map(function(i,el){return $(el).text()}).get().join());
this を使って以下のようにも書けます(function式をアロー関数式にすることができない例にもなっています)
javascript:alert($('.popularItem_articleTitle_text').map(function(){return $(this).text()}).get().join());