querySelectorAll

Coddyの「JavaScript DOM メソッド」コースのレッスン 9/13。

関数 querySelectorAll() は、querySelector と同様に、CSS形式のセレクターに一致するすべての要素のコレクションを返しますが、一致するすべての要素を一度に取得できる点が異なります。

const elements = document.querySelectorAll(".other");

上記は、クラス名が other であるすべての要素を取得します。

チャレンジ

簡単

2つのspanを含むHTMLコードが与えられています。

JavaScriptのみを使用して、querySelectorAll関数を使ってすべての要素のスタイルを変更してください：

backgroundColorを"pink"に
borderを"1px solid red"に

自分で試してみよう

<!DOCTYPE html>
<html>
    <body>
        <span class="error">Error 1</span>
        <span class="error">Error 2</span>
        <script src="script.js"></script>
    </body>
</html>

JavaScript DOM メソッドのすべてのレッスン

1イントロダクション

イントロダクション Document Object Model

2DOMメソッド I

getElementById 要素のスタイルを変更する getElementsByClassName ループ処理と操作 getElementsByTagName querySelector

3DOMメソッド II

querySelectorAlladdEventListener innerHTML createElement と appendChild classList toggle