Q&A
質問者さん、その後無言ですか、回答が付いているし私もあなたの追加質問に答えたのでそれらに対するフィードバックを書きましょう。役に立った/立たなかったぐらいはすぐにでもフィードバックできるのでは？ 役に立たなかっらならどこがダメだったか書くと望む回答により近いものが出てくるかも。とにかく無言で放置は NG です。
下のコードは前の質問で教えてもらったものなのですが、わからない点があったので教えてほしいです。
前の質問
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番目のデータを指定しないとエラーになるみたいな意味だと思うのですが、よくわかりません。
回答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
総合スコア115012
回答ありがとうございます！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
[0]が何なのかとどういう役割をしてるのか知りたいです。
配列の先頭要素を取り出すという意味です。添え字と呼ばれます。
getElementByIdだと、指定したIDを持つHTML要素を返す関数ですが、
getElementsByNameだと、複数形のsがついていることからもわかりますが、指定したNAMEを持つHTML要素の「配列」を返します。なので、HTML要素を使うには、配列の添え字を指定する必要があります。
「数値」(1とか3.5とか）と「数値の配列」（[1,2,5.5]とか）の違いがわかるのであれば、「HTML要素」と「HTML要素の配列」の違いもわかると思うのですが。
投稿2021/10/10 07:22
総合スコア84804
無事理解できました。回答ありがとうございます！getElementsByNameは複数のhtml要素を返すので添え字の[0]とかの[index]が必要なんですね。
0
ベストアンサー
document.getElementsByName('formName')[0]
getElements の s から分かるように複数のオブジェクトを配列として取得するのが目的なので、たとえ配列の要素数が 1 つしかなくても [0] が必要ということでしょう。
投稿2021/10/10 06:46
退会済みユーザー
総合スコア0
回答ありがとうございます。getElementsByName()を使うときはいつも[0]が必要なわけではないと思うのですが、画像を取得する場合は複数の画像の可能性もあるのでその複数ある画像の０番目の画像ということでしょうか？
getElementById や querySelector は一つの要素を返すので [0] をつけて使うことはないと思いますが、getElementsByName や getElementsByClassName や querySelectorAll などは要素のリストを返すので、リストとして (複数あるならループして、一つしかないと分かってるなら [0] を付けて) 扱う必要があるはず…。
読んでください。
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 となる。"
@9nahito さん
HTML Standardでは「同じname属性値を持つ要素」が複数存在できるので、getElementsByName() の返り値は常に複数形(NodeList)です。
「同じname属性値を持つ要素」が1個しか存在しない場合に、getElementsByName() が要素ノード(単数形)を返す機構はありません。
https://momdo.github.io/html/dom.html#dom-document-getelementsbyname
質問にダイレクトの答えてなかったので以下に答えておきますね。上に紹介した MDN の記事を見ながら考えてください。
> getElementsByName()を使うときはいつも[0]が必要なわけではないと思うのですが、
いえ、いつも [index] は必要です。要素が一つだけしかなくても [0] は必ず必要です。削除したら質問に書いてあるエラーになるというのはあなたも経験したでしょう?
> 画像を取得する場合は複数の画像の可能性もあるのでその複数ある画像の０番目の画像ということでしょうか？
画像とか要素の中身には関係ないです。getElementsByName() メソッドで取得できるのは NodeList だから、その中の要素を取得するには [index] が必要なのです。
みなさん回答ありがとうございます！
とても詳しくおしえてくださったおかげで私にもわかりました。
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
プレビュー
