【javascript】クラスのクラスの...を指定する方法

Question

javascript 初心者です。
壁にぶちあってしまったので、質問させていただきます。
phpで生成された下記htmlのinputタグだけにdisabled = trueを与えたいのですが、うまく指定できません。

前提・実現したいこと

CSS的に書くと下記のようにjavascriptで指定したいです。
→　#wpmem_profile_form fieldset .div_text #first_name

発生している問題

他ページでも同様のphpでhtmlが生成され、inputタグだけ指定しまうと他ページにもjavascriptが適用されてしまう。

該当のソースコード

＜PHPで生成されるhtml＞

<form id="wpmem_profile_form" class="form"> <fieldset> <div class="div_text"> <input name="first_name" type="text" id="first_name"> </div> </fieldset> </form>

＜自作javascript＞
let a = document.getElementById('profile_form');
let b = document.getElementsByTagName('fieldset');
let c = document.getElementsByClassName('div_text');

let inputElement1 = document.querySelector('input[name="first_name"]');

let d = a.className;
let e = b.className;
let f = c.className;

d.e.f.inputElement1.disabled = true;

以上、何卒宜しくお願い致します。

Answer 1

PHPでHTMLをつくっているならPHPでdisabledを予め付加するのが妥当です

Comments

[yambejp]

あえてやるならこう？

window.addEventListener('DOMContentLoaded', ()=>{
const target=document.querySelector('#wpmem_profile_form fieldset .div_text input[name="first_name"]');
if(target!==null) target.disabled=true;
});

[ruis]

phpの知識はゼロなものでして……
ありがとうございます！試してみます。

[ruiss]

解決することができました。そのような方法があったとは、、まだまだ知識不足でした。
yambejpさん、ありがとうございました！