JavaScript с нуля

Знакомьтесь с семейством querySelector

Чтобы лучше понять всю прелесть возможностей, предоставляемых querySelector и querySelectorAll, взгляните на следующий HTML-код:

<div id="main">

<div class="pictureContainer">

<img class="theImage" src="smiley.png" height="300" width="150" />

</div>

<div class="pictureContainer">

<img class="theImage" src="tongue.png" height="300" width="150" />

</div>

<div class="pictureContainer">

<img class="theImage" src="meh.png" height="300" width="150" />

</div>

<div class="pictureContainer">

<img class="theImage" src="sad.png" height="300" width="150" />

</div>

</div>

В этом примере у вас есть один div с id main, а также четыре элемента div и img, каждый из которых имеет значение класса pictureContainer и theImage соответственно. В нескольких следующих разделах мы задействуем функции querySelector и querySelectorAll в этом HTML-документе и посмотрим, что это даст.