Array.prototype.forEach.callで要素リストのイテレーション

またまた、HTML5 テクニックバイブルで知ったことのメモ。

今まで、document.querySelectorAllや開発者ツールのコンソールの$$($$はdocument.querySelectorAllと同じ動き)で取得した要素リストを巡回するのに、面倒だと思いながらも下記のように書いていました。

for(var i=0,len=$$('a').length; i<len; i++){
    console.log($$('a')[i].href);
}

上記はページ内にあるaタグのhref属性内(つまり、リンク先)を一覧としてコンソールに表示するコードです。いちいち要素の長さを取得してループする回数を指定しなきゃいけなくて正直面倒だと思ってました。jQueryみたいにリストの数を意識せずにループすることができないもんかとずっと思っていたのですが、先日、下記のように書くことで上記と同じ動きをすることが発覚。

Array.prototype.forEach.call($$('a'), function(ele){ console.log(ele.href) })

Array.prototype.forEach.callという長い構文を覚えなければいけませんが、これなら要素の数を意識せずにループすることができるようです。

ちなみに、forEachをmapにし、console.logをreturnとすると、href属性が入った配列が返される。

var hrefArr = Array.prototype.map.call($$('a'), function(ele){ return (ele.href) })
console.log(hrefArr[0]); // "http://～～～"