Поиск всех дочерних элементов: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом разделе вы познакомитесь с различными способами поиска дочерних элементов в DOM. Вы узнаете, как получить прямых потомков элемента, как найти всех потомков, а также как фильтровать дочерние элементы по различным критериям. Каждое задание представляет собой практическую задачу, где вам нужно будет применить полученные знания для манипуляции с HTML структурой. Внимательно читайте описание задания и подсказки, если они необходимы, чтобы успешно выполнить каждое упражнение. Удачи!

Список тем

Получение прямых дочерних элементов

Найдите все прямые дочерние элементы элемента с id "parent-element" и выведите их количество в консоль.

HTML

Восстановить HTML

                      <div id="parent-element">
  <p>Первый прямой потомок</p>
  <span>Второй прямой потомок</span>
  <div>
    <p>Это не прямой потомок</p>
  </div>
</div>

<div id="parent-element">
  <p>Первый прямой потомок</p>
  <span>Второй прямой потомок</span>
  <div>
    <p>Это не прямой потомок</p>
  </div>
</div>

JavaScript

const parentElement = document.input__1("parent-element");
const directChildren = parentElement.input__2;
console.log(directChildren.input__3);

                     const parentElement = document.input__1("parent-element");
const directChildren = parentElement.input__2;
console.log(directChildren.input__3);

Для получения прямых дочерних элементов элемента используйте свойство `children`. Это свойство возвращает HTMLCollection, содержащую только элементы-узлы, являющиеся прямыми потомками указанного элемента. Для подсчета количества элементов в коллекции используйте свойство `length`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Получение всех потомков элемента

Найдите все потомки элемента с id "container" (включая прямых и не прямых) и выведите общее количество найденных элементов в консоль.

HTML

Восстановить HTML

                      <div id="container">
  <section>
    <article>
      <p>Потомок 1</p>
    </article>
  </section>
  <div>
    <span>Потомок 2</span>
  </div>
</div>

<div id="container">
  <section>
    <article>
      <p>Потомок 1</p>
    </article>
  </section>
  <div>
    <span>Потомок 2</span>
  </div>
</div>

JavaScript

const container = document.input__1("container");
const allDescendants = container.input__2('*');
console.log(allDescendants.input__3);

                     const container = document.input__1("container");
const allDescendants = container.input__2('*');
console.log(allDescendants.input__3);

Для получения всех потомков элемента можно использовать метод `querySelectorAll('*')` внутри контекста родительского элемента. `querySelectorAll` вернет NodeList со всеми элементами-потомками, соответствующими селектору '*'. Свойство `length` NodeList также можно использовать для подсчета количества элементов.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Фильтрация дочерних элементов по тегу

Найдите все дочерние элементы `<p>` внутри элемента с id "content" и выведите их количество.

HTML

Восстановить HTML

                      <div id="content">
  <p>Первый параграф</p>
  <div>
    <p>Вложенный параграф</p>
    <span>Текст</span>
  </div>
  <p>Второй параграф</p>
</div>

<div id="content">
  <p>Первый параграф</p>
  <div>
    <p>Вложенный параграф</p>
    <span>Текст</span>
  </div>
  <p>Второй параграф</p>
</div>

JavaScript

const contentElement = document.input__1("content");
const paragraphChildren = contentElement.input__2('p');
console.log(paragraphChildren.input__3);

                     const contentElement = document.input__1("content");
const paragraphChildren = contentElement.input__2('p');
console.log(paragraphChildren.input__3);

Используйте метод `querySelectorAll('p')` на родительском элементе, чтобы найти все элементы `<p>`, являющиеся потомками. Затем, как и в предыдущих заданиях, используйте свойство `length` для подсчета.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Доступ к определенному дочернему элементу

Получите второй прямой дочерний элемент списка `<ul>` с id "list" и измените текст этого элемента на "Второй элемент изменен".

HTML

Восстановить HTML

                      <ul id="list">
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

<ul id="list">
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

JavaScript

const listElement = document.input__1("list");
const secondChild = listElement.input__2[1];
secondChild.input__3 = "Второй элемент изменен";

                     const listElement = document.input__1("list");
const secondChild = listElement.input__2[1];
secondChild.input__3 = "Второй элемент изменен";

Свойство `children` возвращает HTMLCollection, которую можно индексировать как массив. Индексы начинаются с 0. Таким образом, второй элемент будет иметь индекс 1. Для изменения текста элемента используйте свойство `textContent`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Перебор дочерних элементов

Для каждого прямого дочернего элемента контейнера с id "items-container" добавьте класс "item-child".

HTML

Восстановить HTML

                      <div id="items-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div id="items-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

JavaScript

const containerElement = document.input__1("items-container");
const childrenItems = containerElement.input__2;
for (const child of childrenItems) {
  child.classList.input__3("item-child");
}

                     const containerElement = document.input__1("items-container");
const childrenItems = containerElement.input__2;
for (const child of childrenItems) {
  child.classList.input__3("item-child");
}

Используйте свойство `children` для получения коллекции дочерних элементов. Затем используйте цикл `for...of` для итерации по этой коллекции. Внутри цикла для каждого элемента добавьте класс "item-child" используя свойство `classList.add()`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Проверка наличия дочерних элементов

Проверьте, есть ли дочерние элементы у элемента с id "check-element". Если есть, выведите в консоль "Есть дочерние элементы", иначе - "Нет дочерних элементов".

HTML

Восстановить HTML

                      <div id="check-element">
  <!-- Дочерних элементов нет -->
</div>

<div id="check-element">
  <!-- Дочерних элементов нет -->
</div>

JavaScript

const elementToCheck = document.input__1("check-element");
const hasChildren = elementToCheck.input__2.input__3 > 0;
if (hasChildren) {
  console.log("Есть дочерние элементы");
} else {
  console.log("Нет дочерних элементов");
}

                     const elementToCheck = document.input__1("check-element");
const hasChildren = elementToCheck.input__2.input__3 > 0;
if (hasChildren) {
  console.log("Есть дочерние элементы");
} else {
  console.log("Нет дочерних элементов");
}

Свойство `children` возвращает HTMLCollection. Проверьте свойство `length` этой коллекции. Если `length` больше 0, значит, дочерние элементы есть.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Поиск дочерних элементов по классу

Найдите все дочерние элементы с классом "special-item" внутри элемента с id "parent-container" и добавьте к их тексту в конце восклицательный знак '!'.

HTML

Восстановить HTML

                      <div id="parent-container">
  <div class="item">Обычный элемент</div>
  <div class="special-item">Специальный элемент 1</div>
  <div class="item">Обычный элемент</div>
  <div class="special-item">Специальный элемент 2</div>
</div>

<div id="parent-container">
  <div class="item">Обычный элемент</div>
  <div class="special-item">Специальный элемент 1</div>
  <div class="item">Обычный элемент</div>
  <div class="special-item">Специальный элемент 2</div>
</div>

JavaScript

const parentContainer = document.input__1("parent-container");
const specialChildren = parentContainer.input__2('.special-item');
for (const child of specialChildren) {
  child.input__3 = child.textContent + "!";
}

                     const parentContainer = document.input__1("parent-container");
const specialChildren = parentContainer.input__2('.special-item');
for (const child of specialChildren) {
  child.input__3 = child.textContent + "!";
}

Для поиска дочерних элементов по классу используйте метод `querySelectorAll('.special-item')` на родительском элементе. Затем переберите найденные элементы и измените их `textContent`, добавив восклицательный знак.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку

Использование `childNodes` для получения всех узлов-детей

Найдите все узлы-дети (включая текстовые узлы и комментарии) элемента с id "node-container" и выведите общее количество узлов в консоль.

HTML

Восстановить HTML

                      <div id="node-container">
  <!-- Это комментарий -->
  Текст внутри div
  <p>Параграф</p>
</div>

<div id="node-container">
  <!-- Это комментарий -->
  Текст внутри div
  <p>Параграф</p>
</div>

JavaScript

const nodeContainer = document.input__1("node-container");
const allNodes = nodeContainer.input__2;
console.log(allNodes.input__3);

                     const nodeContainer = document.input__1("node-container");
const allNodes = nodeContainer.input__2;
console.log(allNodes.input__3);

Свойство `childNodes` возвращает NodeList, содержащий все узлы-дети, включая текстовые узлы (например, пробелы и переносы строк) и комментарии. Используйте `childNodes` и свойство `length` для подсчета.

Заполнить ответами все поля

Результат

Лог

Выполнить

Отметить решенным

Показать подсказку