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

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

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

</head>
<body>
 
<div class="test">test1</div>
<div class="test">test2</div>
<div class="test">test3</div>
<div class="test">test4</div>
<div class="test">test5</div>

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


<script type="text/javascript">

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>

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


test_class1 -> [object HTMLDivElement]

test_class2 -> [object NodeList]

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

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

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

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

コメントを残す