Петли с использованием JavaScript

Question

Я только что начал класс веб-программирования, и мы начали работать с JavaScript. В настоящее время я должен взять веб-страницу, которую я уже написал, и добавить к ней JavaScript. Сначала меня забивают, добавляя класс к каждому уменьшенному изображению на странице (я уже это сделал).

Тогда в файле .js мы предположим написать цикл, который ищет все теги img с новым классом (с подсказкой использовать querySelectorAll()). Я был над лекциями, книгой и несколькими учебниками, но по какой-то причине просто не нажимал. Я даже не знаю, как начать писать. Если бы кто-то мог дать некоторые рекомендации, я бы очень признателен.

Answer 1

document.querySelectorAll возвращает NodeList всех элементов, соответствующих вашему селектору.

Селектор класса является точка, так что если у вас есть список изображений, как (.):

<img src="image1.jpg" class="thumbnail" /> 
<img src="image2.jpg" class="thumbnail" /> 
<img src="image3.jpg" class="thumbnail" /> 

Что-то вроде:

document.querySelectorAll('.thumbnail');

возвратит NodeList, со всеми элементы, которые соответствуют вашему селектору.

, то вы можете просто перебрать NodeList, и доступ к каждому элементу в отдельности, как:

var images = document.querySelectorAll('.thumbnail'); 
for(var i = 0; i < images.length; ++i) { 
    var image = images[i]; 
    console.log(image.src); // output: image1.jpg, image2.jpg, image3.jpg 
} 

Answer 2

Первый, выберите все изображения, которые вы имеете, как:

var images = document.querySelectorAll(".className"); 

Второй, сделайте все, что захотите, с выбранными изображениями как:

for (var i = 0; i < images.length; i++){ 
    //Do you code here 
}