JavaScriptにてhtmlの要素を取得し、配列にする

Question

前提・実現したいこと

JavaScriptにて、htmlから特定要素を取得し、配列に代入したい

発生している問題・エラーメッセージ

下記の内容で配列を取得したいが、うまくデータを取得できていない

やりたいこと

array[AAAA,BBBB]

以下元ファイル

HTML

<div>
    <span class="item">
        <span>AAAA</span>
        <span>BBBB</span>
    </span>
</div>

JavaScript

function(){
    var div = document.getElementByClassName("item");
    var spans = div.getElementsByTagName("span");

    var array = [];
    for(i=0; i<spans.length; i++){
    array.push(spans[i].innerHTML);
}
      return array;
}

試したこと

うまくタグネームを指定できていないのかと思い、いろいろ試したが上手くいかなかったです。お力お貸しいただけると幸いです！

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

getElementByClassName() というメソッドはありません。
getElementsByClassName() ならあります。複数形になっていることからわかるとおり、配列ライクなNodeListで帰ってきますので、 document.getElementsByClassName("item")[0].getElementsByTagName("span"); で取得することになります。

---

ところで、[...document.querySelectorAll('.item > span')] でも取得できます。

• スプレッド構文 - JavaScript | MDN
• Document.querySelectorAll() - Web API | MDN

Comments

[Zawap]

以下の構文は知らなかったのですが、試したところうまく値を取得できました！助かりました、ありがとうございます！

'''
var xxx = document.querySelectorAll('.item > span')
'''