【JS】NodeList内の要素をforEachで操作する

忘れないうちにメモ。

目的

twitterのいいね数を非表示にしたい

思いついた方法

document.querySelectorAllで複数ツイートのいいね数の表示領域を指定し、得たNodeList内の各要素を非表示にする。

詳細

document.querySelectorAllについては過去に触れたことがあるので、その経験を活かして、複数ツイートのいいね数の表示領域を指定するところまではできた。リプライ/リツイート/いいね数の表示領域はrole属性(role="group")のついたdivタグにまとめられていたので、それをquerySelectorAllに与えればよい。
問題はそれで受け取ったNodeListの処理であるが、forEachメソッドを使うことで、各要素に対してstyle.display="none"と変更できた。

コード

document.querySelectorAll('div[role="group"]').forEach(
    function(currentValue) {  // currentValueは現在NodeListで処理されている要素
        currentValue.style.display = "none";
    }
);

結果

現在ブラウザ上で見えている範囲についてはいいね数を非表示にできるが、スクロールしていくと普通に表示されてしまっている。失敗である。

参考資料

developer.mozilla.org

その他

JQueryを使えば簡単にクエリセレクタを扱えるらしい。正直触れたことがないのでわからないが、今後調べてみようと思う。