これめちゃめちゃ見ます。参考になります。
jQueryでHTMLのクラス取得するなら、普段なら
const $tabItem = $('.tabItem')
みたいにやりますよね。
で、例えばこのクラス全体に同じ挙動を実行させたい。例えばクリックイベントを起こしたいなら、
$tabItem.on('click', ()=> { });
って書きますよね。
とりあえずずっとこれで書いていたんですよね。
だけど、なんかずっとjQueryに頼っているのもなあ、そもそも外部ライブラリ使えないときもあるしなあ、という気持ちになり、PureなJavaScriptで書くことに。
で、じゃあ上記のYou Don't need jQueryを見て、JavaScriptでクラスを取得すると
const tabItem = document.querySelectorAll('.tabItem');
こうなりますよね。簡単ですね。
ではこのクラス全部にクリックイベントを起こせるようにしてあげたいなら、jQueryと同じ感じで最初はこう書くでしょう。
tabItem.addEventListener('click', ()=> { });
こう書きたいですよね。
と思っていたのですが、これは書けません。
調べたら出てきますけど、tabItemは今NodeListなんですよね。試しにconsole.logで出力してみるとわかります。
こんな感じになります。とあるサイトでコンソールに打ち込んで試してみました。
jQueryで言ったら、このtabItemにはdiv.highlight.hightlight-source-jsが入っていると思うんですけど、なぜかPure JSだと配列になっていますよね。
NodeListというもので、
正直NodeListがなんだかわかっていない。Arrayとは似てるけど違うらしい。という理解。
で、まあじゃあどうすれば全部のクラスに同じ挙動を設定できるか。
なんか結局配列みたいなものらしいので、一番簡単にやるのは
tebItem.forEach( () => { });
のようforeachでやってあげる。
これで基本的には問題ない。
が、これはIE11で動かない。
なんでだよって思いますけど動かないものは動かない。
じゃあどうすればよいのか？違う方法でfor文てきな繰り返しをするしかありません。
for ofで書くと、Edgeなら大丈夫だそうですがIE11ではだめだそうです。
で、回避する方法。
NodeListでforEachが出来ないだけで、配列ではforEachが出来るわけです。
なので、NodeListを配列にして、forEachする。
const tabItemArray = Array.prototype.slice.call(tabItem, 0); tabItemArray.forEach( () => { });
これで配列として取り出した上で、forEachとしてループ処理出来ます。
参考
もっと簡単に書けそう
