下のコードで [0] がなぜ必要なのかわかりません

下のコードは前の質問で教えてもらったものなのですが、わからない点があったので教えてほしいです。
前の質問
document.getElementsByName('formName')[0]　の [0] はどういう意味ですか？

html
1<html>
2<head>
3<title>JavaScript file</title>
4<script type="text/javascript">
5function displayFile() {
6let body = document.getElementById("bodyId")//body要素をid="bodyId"から取得する
7body.setAttribute("style", "background-image:url('" + URL.createObjectURL(new FormData(document.getElementsByName('formName')[0]).get('upFileName')) + "')")
8}
9</script>
10</head>
11<body id = "bodyId">
12<form name="formName">
13選択した画像を表示<br>
14<input type="file" name="upFileName" value="画像を選択"><br>
15<input type="button" value="画像の表示" onclick="displayFile()">
16</form>
17</body>
18</html>

これがないと
'FormData': parameter 1 is not of type 'HTMLFormElement'.
at HTMLInputElement.display
というエラーが出るのですが [0] がないとなぜエラーになるのでしょうか。
[0]が何なのかとどういう役割をしてるのか知りたいです。
なんとなくエラーから"form"のデータの0番目のデータが"form"のHTML要素で、１番目のデータは"form"のHTML要素じゃないので [0]を書き加えてデ0番目のデータを指定しないとエラーになるみたいな意味だと思うのですが、よくわかりません。

<form>要素の０番目のhtml要素が<input type="file" name="upFileName" value="画像を選択">ということですか？わかりずらい質問の仕方でごめんなさい。回答よろしくお願いします。

退会済みユーザー

2021/10/11 06:52

質問者さん、その後無言ですか、回答が付いているし私もあなたの追加質問に答えたのでそれらに対するフィードバックを書きましょう。役に立った/立たなかったぐらいはすぐにでもフィードバックできるのでは？　役に立たなかっらならどこがダメだったか書くと望む回答により近いものが出てくるかも。とにかく無言で放置は NG です。

9nahito

2021/10/12 11:10

ごめんなさい。放置していたわけではありません。いいわけですが宿題たまっててあまり手が付けれてませんでした。今から書きます。

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

回答3件

formにname属性をつけてアクセスするのは20年前のやりかたですね
idで指定してgetElementByIdでアクセスする方が良いと思います

どうしてもname要素でアクセスしたい場合はquerySelector/querySelectorAllで
対応できます。querySelectorの場合マッチした先頭要素がつかめます

javascript
1<div name="hoge">hoge</div>
2<div name="hoge">hoge</div>
3<div name="hoge">hoge</div>
4<script>
5console.log(document.querySelectorAll('[name=hoge]'));
6console.log(document.querySelector('[name=hoge]'));
7</script>

投稿2021/10/11 01:36

yambejp

総合スコア118164

9nahito

2021/10/12 11:32

回答ありがとうございます！html 要素をjavascriptに取り込むときは id で指定してとりこむと [0] がいらなくなることに気が付きました。たしかにid指定のほうがよさそうですね。 ```html <html> log1<br> <input type="color" name="name" onchange="log1()"> <br>log2<br> <input type="color" id = "id" onchange="log2()"> <script> var colorPicker = document.getElementsByName("name") var colorPicker2 = document.getElementById("id") function log1(){ console.log("log1",colorPicker[0].value) console.log("log1",colorPicker.value) } log1() function log2(){ console.log("log2",colorPicker2.value) } log2() </script> </html> ```

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

[0]が何なのかとどういう役割をしてるのか知りたいです。

配列の先頭要素を取り出すという意味です。添え字と呼ばれます。

getElementByIdだと、指定したIDを持つHTML要素を返す関数ですが、
getElementsByNameだと、複数形のsがついていることからもわかりますが、指定したNAMEを持つHTML要素の「配列」を返します。なので、HTML要素を使うには、配列の添え字を指定する必要があります。

「数値」(1とか3.5とか）と「数値の配列」（[1,2,5.5]とか）の違いがわかるのであれば、「HTML要素」と「HTML要素の配列」の違いもわかると思うのですが。

投稿2021/10/10 07:22

otn

総合スコア86461

9nahito

2021/10/12 11:25

無事理解できました。回答ありがとうございます！getElementsByNameは複数のhtml要素を返すので添え字の[0]とかの[index]が必要なんですね。

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

ベストアンサー

document.getElementsByName('formName')[0]

getElements の s から分かるように複数のオブジェクトを配列として取得するのが目的なので、たとえ配列の要素数が 1 つしかなくても [0] が必要ということでしょう。

投稿2021/10/10 06:46

退会済みユーザー

総合スコア0

9nahito

2021/10/10 06:56 編集

回答ありがとうございます。getElementsByName()を使うときはいつも[0]が必要なわけではないと思うのですが、画像を取得する場合は複数の画像の可能性もあるのでその複数ある画像の０番目の画像ということでしょうか？

hoshi-takanori

2021/10/10 07:17

getElementById や querySelector は一つの要素を返すので [0] をつけて使うことはないと思いますが、getElementsByName や getElementsByClassName や querySelectorAll などは要素のリストを返すので、リストとして (複数あるならループして、一つしかないと分かってるなら [0] を付けて) 扱う必要があるはず…。

退会済みユーザー

2021/10/10 07:25

読んでください。 Document.getElementsByName() https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByName "Document オブジェクトの getElementsByName() メソッドは、文書内で指定した name を持つ要素の NodeList コレクションを返します。" NodeList https://developer.mozilla.org/ja/docs/Web/API/NodeList NodeList.item https://developer.mozilla.org/ja/docs/Web/API/NodeList/item "JavaScript にはノードリスト中のアイテムの取得に以下のような構文を用いる事も可能です。" nodeItem = nodeList[index] "index : 取得するノードのインデックス。最初のノードの index は 0 となる。"

think49

2021/10/10 07:28

@9nahito さん HTML Standardでは「同じname属性値を持つ要素」が複数存在できるので、getElementsByName() の返り値は常に複数形(NodeList)です。「同じname属性値を持つ要素」が1個しか存在しない場合に、getElementsByName() が要素ノード(単数形)を返す機構はありません。 https://momdo.github.io/html/dom.html#dom-document-getelementsbyname

退会済みユーザー

2021/10/10 07:43 編集

質問にダイレクトの答えてなかったので以下に答えておきますね。上に紹介した MDN の記事を見ながら考えてください。 > getElementsByName()を使うときはいつも[0]が必要なわけではないと思うのですが、いえ、いつも [index] は必要です。要素が一つだけしかなくても [0] は必ず必要です。削除したら質問に書いてあるエラーになるというのはあなたも経験したでしょう? > 画像を取得する場合は複数の画像の可能性もあるのでその複数ある画像の０番目の画像ということでしょうか？画像とか要素の中身には関係ないです。getElementsByName() メソッドで取得できるのは NodeList だから、その中の要素を取得するには [index] が必要なのです。

9nahito

2021/10/12 11:21 編集

みなさん回答ありがとうございます！とても詳しくおしえてくださったおかげで私にもわかりました。 getElementsBynameのときは返り値が複数形の(NodeList)なのでいつも[index]が必要なんですね！ <html> <input type="color" name="name" onchange="log1()"> <script> var colorPicker = document.getElementsByName("name") function log1(){ console.log("[0]あり",colorPicker[0].value) console.log("[0]なし",colorPicker.value) } log1() </script> </html> 画像ではなくinputcolorの例でも試してみたらみなさんのおっしゃるとおりでした。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問