Javascript｜DOMの操作

Question

JavascriptのDOMで、以下を操作しているんですがスタイルが反映されません。
具体的には、DOMでTABLE内のspan要素をdisplay:noneにしたいです。

ページが表示されるときにnoneにしておきたいのですが、noneになってくれません。

<script> window.onload = function(){ document.getElementByClassName('indispensable').style.display="none"; } </script> <table> <thead></thead> <tbody> <tr> <td><label for="○○○">○○○<span class="indispensable">【必須】</span></label></td> <td><input type="text" name="" id="○○○"></td> </tr> <tr> <td><label for="○○○">○○○<span class="indispensable">【必須】</span></label></td> <td><input type="text" name="" id="○○○"></td> </tr> <tr> <td><label for="○○○">○○○<span class="indispensable">【必須】</span></label></td> <td><input type="text" name="" id="○○○"></td> </tr> </tbody> <tfoot></tfoot> </table>

Answer 1

getElementByClassNameという関数はありません。
近いものでgetElementsByClassNameで返るのは、エレメントの配列なので、個々の配列要素のエレメントについて設定する必要があります。

Answer 2

<script type="text/javascript">
function a(){ 
Array.prototype.forEach.call(
  document.getElementsByClassName('indispensable'), function(e){e.style.display="none"});
}   
</script>

class をもっている要素は複数あるので，繰り返し処理をしましょう．

Comments

[退会済みユーザー]

丁寧な解説ありがとうございました。

ご指摘頂いた内容でスクリプトを修正しましたが、上手くいきませんでした・・。
最終的には、J-Queryを使用してdisplay:noneにしました。

今後の参考に伺いたいのですがclass名をDOMで指定する場合、
classはBody内に複数存在すると考えて、それぞれを配列で指定する必要があるという認識でよろしいですか？
頂いた内容で考えると、全てのクラスを配列で指定している感じがしました・・。

[katzC4ISR]

すみません，そのままですとonloadに関数がセットされないので，次のコードではどうですか？関数の名前aを削除して，onloadに関数をセットしてみてください．
<script>
window.onload = function(){
Array.prototype.forEach.call(
document.getElementsByClassName('indispensable'), function(e){e.style.display="none"}
);
}
</script>

[katzC4ISR]

> classはBody内に複数存在すると考えて、それぞれを配列で指定する必要があるという認識でよろしいですか？

はい，実際，classをセットしているタグは複数あるのでそのように考えておいて
大筋間違いないです．
ただ，細かいことを言うと，getElementsByClassName()は，配列を戻り値にとるわけではありません．そのため，配列を対象とした繰り返し構文が使用できません．
その代りに，callというメソッドを使用しているのです．

ご参考に．

[退会済みユーザー]

色々伺ってすみません、ありがとうございます。
ご指摘頂いたコードで実行したらnoneになりました。

getElementsByClassName()は配列を戻り値に取らないんですね・・。

callを使用し、配列形式で取るようにして、function(e)でその値ののstyleを変えている様子ですね、ありがとうございました。