\r\n\r\n\r\n
\r\n選択した画像を表示
\r\n
\r\n\r\n
\r\n\r\n\r\n```\r\nこれがないと\r\n'FormData': parameter 1 is not of type 'HTMLFormElement'.\r\n at HTMLInputElement.display\r\nというエラーが出るのですが [0] がないとなぜエラーになるのでしょうか。\r\n[0]が何なのかとどういう役割をしてるのか知りたいです。\r\nなんとなくエラーから\"form\"のデータの0番目のデータが\"form\"のHTML要素で、1番目のデータは\"form\"のHTML要素じゃないので [0]を書き加えてデ0番目のデータを指定しないとエラーになるみたいな意味だと思うのですが、よくわかりません。\r\n
要素の0番目のhtml要素がということですか?\r\nわかりずらい質問の仕方でごめんなさい。\r\n回答よろしくお願いします。","answerCount":3,"upvoteCount":0,"datePublished":"2021-10-10T06:43:07.222Z","dateModified":"2021-10-10T06:43:07.222Z","acceptedAnswer":{"@type":"Answer","text":"> document.getElementsByName('formName')[0]\r\n\r\ngetElements の s から分かるように複数のオブジェクトを配列として取得するのが目的なので、たとえ配列の要素数が 1 つしかなくても [0] が必要ということでしょう。","dateModified":"2021-10-10T06:46:30.295Z","datePublished":"2021-10-10T06:46:30.295Z","upvoteCount":1,"url":"https://teratail.com/questions/363727#reply-494841"},"suggestedAnswer":[{"@type":"Answer","text":"formにname属性をつけてアクセスするのは20年前のやりかたですね\r\nidで指定してgetElementByIdでアクセスする方が良いと思います\r\n\r\nどうしてもname要素でアクセスしたい場合はquerySelector/querySelectorAllで\r\n対応できます。querySelectorの場合マッチした先頭要素がつかめます\r\n```javascript\r\n
hoge
\r\n
hoge
\r\n
hoge
\r\n\r\n```","dateModified":"2021-10-11T01:36:41.618Z","datePublished":"2021-10-11T01:36:41.618Z","upvoteCount":1,"url":"https://teratail.com/questions/363727#reply-494937","comment":[{"@type":"Comment","text":"回答ありがとうございます!html 要素をjavascriptに取り込むときは id で指定してとりこむと [0] がいらなくなることに気が付きました。\r\nたしかにid指定のほうがよさそうですね。\r\n```html\r\n\r\n log1
\r\n \r\n
log2
\r\n \r\n \r\n \r\n \r\n```","datePublished":"2021-10-12T11:32:38.489Z","dateModified":"2021-10-12T11:32:38.489Z"}]},{"@type":"Answer","text":"> [0]が何なのかとどういう役割をしてるのか知りたいです。\r\n\r\n配列の先頭要素を取り出すという意味です。添え字と呼ばれます。\r\n\r\n`getElementById`だと、指定したIDを持つHTML要素を返す関数ですが、\r\n`getElementsByName`だと、複数形のsがついていることからもわかりますが、指定したNAMEを持つHTML要素の「配列」を返します。なので、HTML要素を使うには、配列の添え字を指定する必要があります。\r\n\r\n「数値」(`1`とか`3.5`とか)と「数値の配列」(`[1,2,5.5]`とか)の違いがわかるのであれば、「HTML要素」と「HTML要素の配列」の違いもわかると思うのですが。","dateModified":"2021-10-10T07:22:46.128Z","datePublished":"2021-10-10T07:22:46.128Z","upvoteCount":1,"url":"https://teratail.com/questions/363727#reply-494843","comment":[{"@type":"Comment","text":"無事理解できました。回答ありがとうございます!getElementsByNameは複数のhtml要素を返すので添え字の[0]とかの[index]が必要なんですね。","datePublished":"2021-10-12T11:25:07.016Z","dateModified":"2021-10-12T11:25:07.016Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/JavaScript","name":"JavaScriptに関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/363727","name":"下のコードで [0] がなぜ必要なのかわかりません"}}]}}}
質問するログイン新規登録

Q&A

解決済

3回答

1833閲覧

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

9nahito

総合スコア45

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/10/10 06:43

0

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要素で、1番目のデータは"form"のHTML要素じゃないので [0]を書き加えてデ0番目のデータを指定しないとエラーになるみたいな意味だと思うのですが、よくわかりません。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/10/11 06:52

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

2021/10/12 11:10

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

回答3

0

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> ```
guest

0

[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]が必要なんですね。
guest

0

ベストアンサー

document.getElementsByName('formName')[0]

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

投稿2021/10/10 06:46

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

9nahito

2021/10/10 06:56 編集

回答ありがとうございます。getElementsByName()を使うときはいつも[0]が必要なわけではないと思うのですが、画像を取得する場合は複数の画像の可能性もあるのでその複数ある画像の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] は必ず必要です。削除したら質問に書いてあるエラーになるというのはあなたも経験したでしょう? > 画像を取得する場合は複数の画像の可能性もあるのでその複数ある画像の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の例でも試してみたらみなさんのおっしゃるとおりでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問