HTML(DOM)のcssセレクタによる要素の選択

HTMLソース内にあるcssセレクタによる要素の選択を試してみます。
以下のソースがある場合、HTML本文内にあるdivタグの選択をします。

[js]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>

</head>
<body>

<div id="testid">testid</div>

let test_class1 = document.querySelector(‘.test’);
console.log("test_class1 -> " + test_class1);

let test_class2 = document.querySelectorAll(‘test’);
console.log("test_class2 -> " + test_class2);

</script>

</body>
</html>
[/js]

コンソールの出力は以下のようになります。

[js]

test_class1 -> [object HTMLDivElement]

test_class2 -> [object NodeList]

[/js]

要素の取得方法としては「querySelector」を使う場合と、「querySelectorAll」を使う場合があります。

前者は画面内のドキュメント全体から、最初に見つかった要素を1つだけ取得し、
後者は画面内のドキュメント全体から、該当する要素を全て取得していることがわかります。

また、後者は [object NodeList] という出力なので、NodeListが返されていることもわかります。