js HTML内の全要素を取得する方法

HTML文からjsでIDやClass名を使って要素の内容を取得する。

// 全要素中の要素（セレクタ指定）
var elements = document.querySelectorAll('.sample-selector');

// 特定の要素中の要素（セレクタ指定）
var baseElem = document.getElementById('sample-base'),
    elements = baseElem.querySelectorAll('.sample-selector');

実際の使い方の例。

JSでHTML内のクラス要素を全部取得します。この状態だと配列になっているので、for文で配列の内容を取り出していきます。for文で取り出した内容をinnerHTMLで表示しています。


// 全要素中の要素（セレクタ指定）
var elements = document.querySelectorAll('.ytp-cued-thumbnail-overlay-image');


var = imgtext;
for (var i=0; i<elements.length; i++){
  imgtext += elements[i] + ', ';　//足す(+=) 
}

document.getElementById('youtube-img').innerHTML = imgtext;