0

appendChildする際、親要素に[0]を付与する条件がよく分かりません


getElementById
・[0]不要?

var p = document.createElement("p");
document.getElementById('target').appendChild(p);

getElementsByClassName
・[0]必要?

var p = document.createElement("p");
document.getElementsByClassName('target')[0].appendChild(p);

document.属性
・[0]不要?
・もしくは属性に因る?

var p = document.createElement("p");
document.body.appendChild(p);

あるいは取得結果数によるのでしょうか?
・getElementsByClassNameでも、取得結果が1件なら、[0]不要?

4
  • 1
    getElementById / createElement など -> Element は単数形ですから、戻り値はあの要素あるいは null です。getElementsByClassName / getElementsByTagName など -> Elements は複数形ですから、戻り値は要素の配列です。
    – neuront
    Commented 2016年9月27日 3:34
  • コメントありがとうございました。戻り値に注目すれば良いんですね。太字していただいているようにメソッド名自体に「Element」「Elements」と明記されていますね。参考になりました
    – re9
    Commented 2016年9月28日 2:08
  • @neuront 正確には配列ではありません。
    – BLUEPIXY
    Commented 2016年9月28日 2:28
  • 2
    @BLUEPIXY ご指摘ありがとうございます。確かに配列ではなく、NodeListという型です。要素や .length でサイズを取得できますが、pushconcat など配列らしい操作は通用しません。
    – neuront
    Commented 2016年9月28日 5:38

1 件の回答 1

4

getElementById

IDはそのページで唯一でなければならないので、(もしあれば)結果は1つのエレメントであり[0]は不要です。

getElementsByClassName

結果はノードリスト(配列の様に扱える)であり、
例え結果が1つのエレメントであっても[0]が必要です(値が1つの配列と同じ意味)。

document.body は、
body要素を意味する(例えばid="foo"をbody要素に付ければdocument.body === document.getElementById("foo")trueになる)ただ一つのエレメントですので不要です。

html 要素 から引用

許可された内容 ひとつの <head> 要素と、それに続くひとつの <body> 要素。

body 要素 から引用

<body> 要素は、HTML 文書のコンテンツを示す要素です。<body> 要素は文書中に一つだけ配置できます。

要するに、ノード検索・指定する場合にノードリスト(ノード集合)が返るような場合にインデクスによるアクセスが必要で、ノードリストにならない一つのノードの場合必要無いということですね。

1
  • メソッドの戻り値が「1つの要素」or「ノードリスト」、の違いですね。リンク提示&引用ありがとうございました。これまで何となくコピペしていたのですが、ようやく理解できました
    – re9
    Commented 2016年9月28日 2:05

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。