ドットで属性をセットすることは可能でしょうか？

Question

以下のコードにつきまして、お聞きしたいことがあります。

// ul要素を作成し、parentというクラスを付ける
var parentDiv = document.createElement("ul");
parentDiv.id = "prime_minister_list";
 
// 対象の要素.appendChild(追加するノード)
document.body.appendChild(parentDiv);
 
// 追加したulを取得・確認
var prime_minister_list = document.getElementById("prime_minister_list");
console.log(prime_minister_list);

上記コードから、読み取るに、parentDiv.id = "prime_minister_list";はid属性を設定しているといった部分かと思うのですが、そのような解釈で正しいでしょうか？
調べていましたら、idをセットする際は、setattribute()を使用し、セットするものだとの記事が多数あったのですが、ドットでつなぐ記法の説明は見当たらなかった為、このような記法について、ご助言頂ければ幸いです。

Comments

[m.ts10806]

過去質問にありますよ。まず探しましょう。で動かせば分かること。質問するのが無駄な時間です。

[maisumakun]

これは「動かしてわかる」には煩雑すぎると思います。

[m.ts10806]

んーなるほど
maisumakunさんが過去に同種の質問に答えてたのを何度か見たことがあるので、それを読んだ上で色々試すことで理解につながるかなと思いまして。
この質問者の、どこから持ってきたかわからないコードを説明させるやり口には疑問しかないですし(まともな回答しても低評価が複数つく、質問への低評価は打消しがつくとか、ほぼ同じシステムのユーザーを彷彿とさせる)

質問のコードに細かいところ言うとsetattribute()だと動かないとかありますけどね。

[退会済みユーザー]

mtsさん
（このサイトでは珍しくない）何を言っても無駄なユーザの一人かと思います。

[morumaru]

tollなんとかと同じ匂いがする(低評価打消しとか)
https://teratail.com/users/toll_tree

Answer 1

parentDiv.id = "prime_minister_list";はid属性を設定しているといった部分かと思うのですが、そのような解釈で正しいでしょうか？

いえ、これはidプロパティを設定しています。idの場合はsetAttributeで設定しても.idで設定しても特に変わりませんが、他のものの場合は違ってくることがあります。

• <input type="text">のような入力フォームの場合、.value=での設定が必要となります。setAttribute('value')で設定できるのは、初期値（後から変更してもほぼ無意味）です。
• requiredやdisabledのようなあるかないかだけ見られる属性の場合、Attributeから変更するにはsetAttribute/removeAttributeで存在自体を変える必要があります。プロパティは.required = falseのようにそのまま設定できます。
• readOnlyやclassName、htmlForのように、プロパティとしての名前が違うものもあります。

Comments

[aae_11]

ご回答ありがとうございます。
基礎の部分が抜けていて、HTMLの属性とjavascriptオブジェクトのプロパティに関連性があることが分からなかったのですが、ご丁寧にご説明頂きましたおかげで大分理解ができるようになってきました。
公式？ドキュメント「https://ja.javascript.info/dom-attributes-and-properties」のページに詳しく記載がありましたので、しっかりと読み込んでおこうと思います。

Answer 2

idをセットする際は、setattribute()を使用し、セットするものだとの記事が多数

その通りですが若干綴りがちがいます

parentDiv.setAttribute("id","prime_minister_list");

としてください。

ドットで指定するのはプロパティで、setAttributeするのは属性です。
idは属性とプロパティが連動するので基本的にはどちらでも反映されますが
idはあくまでも属性なのでsetAttributeを使用すべきです
（id以外の属性では必ずしも連動しない場合があるので注意）

Comments

[aae_11]

ご回答ありがとうございます。
基本的には、属性とプロパティどちらでも設定可能だが、混乱がないよう属性はsetattributeで設定するといった認識で正しいでしょうか...?

[yambejp]

回答にもかきましたがidは属性なのでsetAttributeで設定するのが
ルールです、たまたまプロパティでもできる（レガシーなjsの互換性？）
だけで安易にプロパティに頼るべきではありません

[aae_11]

分かりました。ありがとうございます。
属性は、出来る限りsetAttributeで設定するようにしていこうと思います。

[x_x]

レガシーでも js でもなく、DOM の Element に定義されています。
https://dom.spec.whatwg.org/#dom-element-id
https://triple-underscore.github.io/DOM4-ja.html#dom-element-id