JavaScript 特定のクラスが設定された複数の行に同じstyleを反映したい

前提・実現したいこと

テーブルの"display"クラスを持った行の表示・非表示の設定をしたい

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot set property 'display' of undefined

該当のソースコード

JavaScript
1  const data_class = document.querySelectorAll("." + select);
2  Array.prototype.forEach.call(data_class, data_tr => {
3    data_tr.parentElement.parentElement.classList.add('display');
4  });
5　document.getElementsByClassName('display').style.display = 'none';

最終行のdisplayにプロパティがセットされていないという原因があるというのはわかっているのですが
調べてもリファレンスや、上記のような記述方法が出てくるばかりでどう対処したらいいのかがわかりません。

分かる方いらっしゃいましたら教えてください。

###2020/02/17 追記
maisumakun様のご回答を頂いてからstyleに似た動きのできるメソッドを模索致しましたがなかなか出てきません。
visibleやhiddenなども考えたのですが、結果表示前の状態の際、テーブルのデータ数の関係で空白部分はつめて表示したいので、
実現目標とは違うものになってしまいます。

'display'Classが設定されている複数のtrに対して配列でstyleを変えられるメソッドは他にあるのでしょうか？

##追記

JavaScript
1  const data = csv_table.getElementsByClassName('display');
2
3  for(let a = 0; a<data.length;a++){
4    data[a].style.display = "none";
5    console.log(data[a])
6  }

m.ts10806

2020/02/14 05:22 編集

後学のために参考にしてもらいたいのですが。。リファレンスは大事です。仕様なので、機能の扱い方が分かれば対応方法も決まります。それに同件の質問は過去に多く出てきています。探しかたの工夫もしてください。あと、質問の書き方ですが、内容やタグとしてもWordPressは関係ないので記載不要と思います。

行動規範の内容に同意します

回答1件

ベストアンサー

getElementsByClassNameは、名前が「Elements」と複数形になっているように、要素の配列のようなものが取得されます。1つ1つに適用するstyleは、この集合体には存在しません。

ちょうど1つある前提でしたら、document.querySelector('.display')とすれば1個だけ取れます。

投稿2020/02/14 05:05

maisumakun

総合スコア145932

Miken_work

2020/02/17 05:28 編集

ありがとうございます！

Miken_work

2020/02/17 06:55

ご回答いただいてから、模索したのですが出てきませんでした。その為改めて追記内容にて質問させていただきます。

maisumakun

2020/02/17 07:47

> 'display'Classが設定されている複数のtrに対して配列でstyleを変えられるメソッドは他にあるのでしょうか？ 1つ1つループなりforEachなりで回してください。

Miken_work

2020/02/17 09:07

前回に引き続きご回答ありがとうございます。表示→非表示(none)の場合には開発ツールでの処理は上記と変わらずでしたが表示の方はしっかりと非表示に切り替わっておりました。しかし、非表示→表示の場合ではうまくできませんでした。開発ツールを見てみるとstyleは1つ目のみではあるもののエラーはなくループは続いています。何故、非表示→表示になるとうまく表示が切り替わらなくなったのでしょうか？本日の追記質問内容にコードを追記いたしますのでご参照ください

行動規範の内容に同意します