querySelectorAll

質問

javascript初心者です。
querySelectorAllの書き方に付いて困っています。

document.querySelector('target')
のような書き方を多く見ますが、

たまに以下のように、後ろに　[]　が付いている
書き方があります。

これは例えば以下のような書き方の場合は
どのような意味になっているのでしょうか？

html　の部分
<p>更新日：<time datetime="2015-02-15">2015年2月15日</time></p>

js　の部分
var dtObj = new Date();
var y = dtObj.getFullYear();
var m = dtObj.getMonth()+1;
var d = dtObj.getDate();
document.querySelectorAll("time")[0].innerHTML = y+"/"+m+"/"+d;

また以下の場合のお願い致します。

html　の部分
<aside>
<div><img src="images/banner.png" width="200" height="200" alt="広告"></div>
</aside>

js部分
var bannerImage = new Image();
bannerImage.src = "images/banner3.png";
bannerImage.onload = function(){
var aDiv = document.querySelectorAll("aside div")[0]; // ●●E
aDiv.appendChild(bannerImage);

抜粋にてわかりづらいかもしれませんが何卒よろしくお願い致します。

回答No.1

think49 · ベストアンサー

querySelector はセレクター文字列で一致する最初の要素にマッチしますが、querySelectorAll はセレクター文字列にマッチします。
querySelectorAll はマッチした全ての要素を NodeList として返します。
NodeList は配列のようなオブジェクトとなり、配列のように添え字を付けることで要素ノードを取得できます。

var aDiv = document.querySelectorAll("aside div")[0]; // "aside div" に一致する NodeList の初めの要素を返す。document.querySelector("aside div") と同じ返り値。

http://www.w3.org/TR/selectors-api/#queryselectorall
https://developer.mozilla.org/ja/docs/DOM/Document.querySelector
https://developer.mozilla.org/ja/docs/DOM/Document.querySelectorAll

お礼

配列になるから括弧が必然だったのですね。ありがとうございました。

回答No.2

think49

#1 です。下記の通り、訂正します。

×　querySelector はセレクター文字列で一致する最初の要素にマッチしますが、querySelectorAll はセレクター文字列にマッチします。
○　querySelector はセレクター文字列で一致する最初の要素にマッチしますが、querySelectorAll はセレクター文字列に一致する全ての要素にマッチします。

ついでに補足しておくと、NodeList は document.querySelectorAll("aside div").item(0) のように書くこともでき、一応こちらが正式な書き方となります。
# 配列ライクな書き方のほうが速いし短いので、ほとんどの方はこの書き方を採用しませんが…。

お礼

なるほどよくわかりました。ありがとうございます。