HTML
<header class="product__list-header"> <h2>Webshop</h2> </header> <section class="product__list"> <div class="product__item"> <img src="http://lorempixel.com/400/200/food" class="product__image" alt="Food"> <span class="product__price">500</span> </div> <div class="product__item fun__class"> <img src="https://lorempixel.com/400/200/food" class="product__image" alt="Food"> <span class="product__price">500</span> </div> <div class="product__item"> <img src="https://lorempixel.com/400/200/food" class="product__image" alt="Food"> <span class="product__price">500</span> </div> <div class="product__item"> <img src="https://lorempixel.com/400/200/food" class="product__image" alt="Food"> <span class="product__price">500</span> </div> <div class="product__item"> <img src="https://lorempixel.com/400/200/food" class="product__image" alt="Food"> <span class="product__price">500</span> </div> </section>
Как вы заметили, я использовал БЭМ в качестве соглашения об именах для моей страницы примера интернет-магазина.
Элемент #1.дети
Первый способ получить дочерние элементы — это element.children. Если вы хотите проверить, какие свойства имеет объект элемента DOM, проверьте его на W3schools. Кстати, это один из моих любимых сайтов для проверки примеров и документации JavaScript.
JavaScript
var productList = document.querySelector('.product__list').children; console.log('productList: ', productList);
В журнале консоли вы найдете a.HTMLCollection
Проверьте свойство__proto__
, вы обнаружите, что он не является массивом.
Зацикливаться на детях
Свойство Children вернет a.HTMLCollection
Таким образом, вы можете перебрать его с помощью старого простого цикла For.
for (i = 0; i < productList.length; i++) { console.log('productList[i]: ', productList[i]); }
Посмотрите мой пример element.children jsbin.
# 2 документ.querySelectorAll
Если вы знаете, какие элементы находятся в родительском элементе, вы можете настроить селектор на:..product__list .product__item
С помощью этого селектора вы выбираете все элементы продукта в списке продуктов.
Если вы не знаете, какие элементы находятся в родительском элементе, я бы порекомендовал способ element.children. Потому что тогда вы обязательно вернете всех детей.
Возможно, вы напоминаете querySelectorAll
из моего предыдущего поста в блоге, но я не против показать его снова 😉.
JavaScript
var productList = document.querySelectorAll('.product__list .product__item'); console.log('productList: ', productList);
В журнале консоли вы найдете файл NodeList. Если вы проверите __proto__
, вы обнаружите, что он не массив.
Как и в случае с HTMLCollection, вы можете использовать цикл For для перебора каждого элемента в NodeList.
for (i = 0; i < productList.length; i++) { console.log('product: ', productList[i]); }
Проверьте мой пример querySelectorAll jsbin.
Вывод: element.children VS querySelectorAll
Но теперь вопрос, какой из них вы используете?
Вы знаете дочерние элементы
Если вы знаете, какие дочерние элементы есть в родительском элементе, хорошо использовать метод document.querySelectorAll
.
Это гораздо более быстрый способ нацелить их с помощью селектора CSS. И из-за querySelectorAll
не имеет значения, сколько элементов.
Вы не знаете дочерние элементы
Если вы не знаете, какие дочерние элементы вы можете ожидать, вам понадобится файл . element.children
Все элементы внутри родительского элемента вернутся с объектом элемента DOM.
Видеоресурсы
- document.querySelector
- document.querySelectorAll
- Объект элемента HTML DOM
- элемент.дети
- element.className
- элемент.классСписок
- jQuery не поможет вам выучить JavaScript
- Как написать лучший CSS с помощью БЭМ
- Заполнитель изображения LorumPixel
Если у вас есть какие-либо вопросы или вам нужна помощь, пишите в комментариях или присоединяйтесь к нашей бесплатной группе Mr Frontend Facebook!
Если вам нравятся мои блоги и видео, и вы хотите продолжать смотреть это? Пожалуйста, поддержите меня на Патреоне! Ваша поддержка поможет мне оплатить мой веб-хостинг и домен 🙏.
Первоначально опубликовано в Mr Frontend Blog.