elementの中のphpに対してjsでgetelementbyは可能か

Question

<やりたいこと>
inputをまとめているdiv属性を非表示にしたい。

現在、main.phpに

<?php echo $this->element('fruit/apple.php'); ?>

とし、その中にinputを用意しています。

https://developer.pi-pe.co.jp/docs/form/2018005/
こちらのサイトを参考にし、inputをまとめているdiv(class="test")ごとnoneにしようと思っています。

document.getElementsByClassName('test').style.display = "none";

しかし、elementから参照しているためjsでgetelementby出来ない状況です。
main.phpに記述しているelement自体をdivで囲み、noneすると消えるんですが、
いずれはそのinputにdisableとかを付与したい為apple.phpの中を見る?ようにしたいです。
専用の書き方がありますか？
教えていただけませんか。

解決したが...

document.getElementsByClassName
とclass指定していたんですが、
document.getElementById
としid指定にしたところ、要素が消えました。
これはなぜでしょうか？

Comments

[FKM]

そのスクリプト、どこに書いてます？レイアウトのheadタグの中ですか？それともビューファイルの中（bodyタグの中）ですか？

[maisumakun]

> elementから参照しているためjsでgetelementby出来ない状況です。

どういう意味でしょうか？

[momolength]

ありがとうございます。
>そのスクリプト、どこに書いてます？レイアウトのheadタグの中ですか？それともビューファイルの中（bodyタグの中）ですか？
これは、elementを記述しているmain.phpファイルのbodyタグ下部です。
main.phpの中に$this->elementでapple.phpを参照/呼び出ししています。

[FKM]

getElementsByClassNameで取得した値をconsole.logで表示したらどうなってますか？

[momolength]

ありがとうございます。
>getElementsByClassNameで取得した値をconsole.logで表示したらどうなってますか？
これなんですが、main:727 Uncaught TypeError: Cannot set property 'display' of undefined
と出て表示されません

Answer 1

出力済みのPHPであればただのHTMLですからidが振ってあればDOMを掴むことは可能です。
idの競合やtypoが無いかよくよく検証してみてください

Comments

[momolength]

classをidにすることで、解決した旨上記に追記したのでご確認お願いできますか？

Answer 2

document.getElementsByClassName('test').style.display = "none";

これだと取得されるのはオブジェクトになるので、一つ一つにdisplay = "none"を適用するには

var tests = document.getElementsByClassName('test');
for(var i = 0; i < tests.length; i++) {
    tests[i].style.display = "none";
}

このようにループ状にしないとだめです。

Comments

[maisumakun]

> これだと取得されるのは配列になるので

配列のように使える面もありますが、HTMLCollectionというオブジェクトであって配列ではありません。

[FKM]

間違い指摘感謝します。修正しました。

[momolength]

https://hacknote.jp/archives/21892/
ここに記述されていましたね。

しかし、色々見てみたんですがこれはいつ使うんですか？
なぜclassとidでこれほど違うんでしょうか。

[FKM]

classはグループに対して適用するもので、idは基本単一のDOM要素に対して適用するものだからです。
jQueryはどちらかというとデザイン寄りの制御用ライブラリなので、クラスも同じように
サクッと取得できるようにしてますが、基本javascriptはidで制御するものですからね。

[maisumakun]

何であろうが1つだけ取りたい、のならquerySelectorもあります。

Answer 3

getElementsByClassNameはElementsと複数形になっているように、当てはまる複数の要素が一気に取れます。そのため、返り値は配列のようなものとなり、直接.styleと続けることはできません。