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.

Видеоресурсы

Если у вас есть какие-либо вопросы или вам нужна помощь, пишите в комментариях или присоединяйтесь к нашей бесплатной группе Mr Frontend Facebook!

Если вам нравятся мои блоги и видео, и вы хотите продолжать смотреть это? Пожалуйста, поддержите меня на Патреоне! Ваша поддержка поможет мне оплатить мой веб-хостинг и домен 🙏.

Первоначально опубликовано в Mr Frontend Blog.