Javascript name指定のオブジェクト参照について

以下のhtmlファイルをChrome(最新バージョン)で開き、開発者ツールのコンソールウィンドウでidとnameを指定してオブジェクトの中身を確認してみました。
idのほうは直接ID名「txtid」を指定すると参照できるようなのですが、
nameのほうはボタンクリックイベントのデバッグ中のみ参照することができました。

開発中のプログラムでnameを直接指定してオブジェクトを参照している個所を見かけ、
そもそもnameを直接指定してオブジェクトを参照できないと思っていたので気になりました。
また、なぜデバッグ中のみ直接nameを指定してオブジェクトの参照ができるのかも気になります。

idを直接指定してオブジェクト参照できるという内容が記載されたサイトは見つけることが出来たのですが、
nameを直接指定した際のオブジェクト参照については見つけることができなかったため教えていただけますでしょうか。
(本来はgetElementsByNameを使用するべきだと思うのですが)

<html lang="ja">
 <head>
 <meta charset="utf-8">
 <title>test</title>
 </head>
<body>
<form>
<input type="button"  onclick="">
<input type="text" id="txtid" name="txtname" value="TEST">
</form>
</body>
</html>

以下、開発者ツールのコンソールウィンドウで確認した結果です。
上から順に
txtid⇒id指定(参照できる)
txtname⇒name指定(definedエラー)
txtname⇒デバッグ中にname指定(参照できる)

m.ts10806

2022/10/12 05:55

querySelector()などJavaScriptの要素参照の機能は使われませんか？

SUPER_SLiNKY

2022/10/12 07:45

querySelectorというのを初めて知りました。本来はJavaScriptの要素参照の機能を使ったほうがいいと思うのですが、なぜか直接指定で記述されていて参照できていたので気になり質問させていただきました。

m.ts10806

2022/10/12 07:47

同じコンソールでずっと打ってるなら先の回答にあるようにスコープの問題ですね。

SUPER_SLiNKY

2022/10/12 07:49

ありがとうございましたm(__)m

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

回答2件

nameについてはユニークが保証されないため一つしか無いときはHTMLElementをつかみますが
複数おなじnameがあるとRadioNodeListを参照するため、使い勝手が非常にわるくなります。
最初にヒットする特定のnameをHTMLElementとして掴みたいならquerySelectorしてください

javascript
1<script>
2<script>
3window.addEventListener('DOMContentLoaded', ()=>{
4  btn.addEventListener('click',()=>{
5    console.log(document.forms["f1"]["txtname"]);//複数だとRadioNodeList
6    console.log(document.forms["f1"]["txtname2"]);//一つだとHTMLElement
7    console.log(document.getElementsByName("txtname"));//NodeList
8    console.log(document.querySelector("[name=txtname]"));//HTMLElement
9    console.log(document.querySelectorAll("[name=txtname]"));//NodeList
10  });
11});
12</script>
13<form name="f1">
14<input type="button" value="btn" id="btn">
15<input type="text" id="txtid" name="txtname" value="TEST1">
16<input type="text" id="txtid" name="txtname" value="TEST2">
17<input type="text" id="txtid" name="txtname2" value="TEST3">
18</form>

投稿2022/10/12 06:02

yambejp

総合スコア114843

SUPER_SLiNKY

2022/10/12 07:45

直接nameやidを指定する記述はよくないみたいなので、querySelectorなどを使用することにします。ありがとうございましたm(__)m

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

ベストアンサー

ある時点でのスコープで指定の名前の変数・プロパティが見えるかどうか、ということです。

id属性を持った要素は、その属性値のグローバル変数で参照できるようにHTML規格で決まっているため、いつでも参照できます。
name 属性は <embed> <form> <img> <object> の場合だけグローバル変数として参照できます。それ以外の要素ではグローバル変数としての参照はできません。
ただし、イベント処理中はイベントターゲットの要素自身とそれを所有するform要素がスコープとして設定されるので、this.form.txtname を txtname だけでアクセスすることができます。