Выбор элементов по тегу [Модуль 1: Основы выбора элементов]: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

Задание 1. Изменение текста абзацев

id: 36994_tag-selection-1

Измените текст всех абзацев на странице на "Текст изменен!". Используйте Javascript для выбора всех элементов `<p>` и изменения их содержимого.

HTML

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

                      <div id="content">
  <p>Это первый абзац.</p>
  <p>Это второй абзац.</p>
  <p>Это третий абзац.</p>
</div>

<div id="content">
  <p>Это первый абзац.</p>
  <p>Это второй абзац.</p>
  <p>Это третий абзац.</p>
</div>

JavaScript

let paragraphs = document.input__1("input__2");
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].input__3 = "Текст изменен!";
}

                     let paragraphs = document.input__1("input__2");
for (let i = 0; i < paragraphs.length; i++) {
  paragraphs[i].input__3 = "Текст изменен!";
}

Для выбора всех элементов по тегу используйте метод `getElementsByTagName()`. Затем, чтобы изменить текст элемента, используйте свойство `textContent` или `innerHTML`.

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

Результат

Лог

Выполнить

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

Задание 2. Изменение цвета заголовков

id: 36994_tag-selection-2

Сделайте цвет текста всех заголовков второго уровня (тег `<h2>`) синим. Используйте Javascript и свойство `style.color`.

HTML

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

                      <div>
  <h2>Заголовок 1</h2>
  <p>Какой-то текст.</p>
  <h2>Заголовок 2</h2>
  <p>Еще текст.</p>
</div>

<div>
  <h2>Заголовок 1</h2>
  <p>Какой-то текст.</p>
  <h2>Заголовок 2</h2>
  <p>Еще текст.</p>
</div>

JavaScript

let headers = document.input__1("input__2");
for (let i = 0; i < headers.length; i++) {
  headers[i].style.input__3 = "blue";
}

                     let headers = document.input__1("input__2");
for (let i = 0; i < headers.length; i++) {
  headers[i].style.input__3 = "blue";
}

Аналогично предыдущему заданию, используйте `getElementsByTagName()` для выбора элементов. Для изменения стиля элемента используйте свойство `style`, а затем нужное CSS свойство, например `color`.

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

Результат

Лог

Выполнить

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

Задание 3. Скрытие элементов списка

id: 36994_tag-selection-3

Скройте все элементы списка `<li>` на странице. Используйте Javascript и свойство `style.display`.

HTML

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

                      <ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>
<ol>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
</ol>

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>
<ol>
  <li>Элемент 1</li>
  <li>Элемент 2</li>
</ol>

JavaScript

let listItems = document.input__1("input__2");
for (let i = 0; i < listItems.length; i++) {
  listItems[i].style.input__3 = "none";
}

                     let listItems = document.input__1("input__2");
for (let i = 0; i < listItems.length; i++) {
  listItems[i].style.input__3 = "none";
}

Для скрытия элемента в CSS используется свойство `display` со значением `none`. Примените это свойство к стилю элементов списка через Javascript.

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

Результат

Лог

Выполнить

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

Задание 4. Изменение размера шрифта ссылок

id: 36994_tag-selection-4

Увеличьте размер шрифта всех ссылок `<a>` на странице до 20px. Используйте Javascript и свойство `style.fontSize`.

HTML

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

                      <p>
  <a href="#">Ссылка 1</a>
  <span>Текст</span>
  <a href="#">Ссылка 2</a>
</p>

<p>
  <a href="#">Ссылка 1</a>
  <span>Текст</span>
  <a href="#">Ссылка 2</a>
</p>

JavaScript

let links = document.input__1("input__2");
for (let i = 0; i < links.length; i++) {
  links[i].style.input__3 = "20px";
}

                     let links = document.input__1("input__2");
for (let i = 0; i < links.length; i++) {
  links[i].style.input__3 = "20px";
}

Размер шрифта в CSS задается свойством `fontSize`. Установите это свойство для всех выбранных элементов ссылок.

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

Результат

Лог

Выполнить

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

Задание 5. Замена изображений

id: 36994_tag-selection-5

Замените все изображения `<img>` на странице на изображение с URL: https://naytikurs.ru/assets/uploads/2025/01/java-1-700x525.png. Используйте Javascript и свойство `src`.

HTML

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

                      <div>
  <img src="https://naytikurs.ru/assets/uploads/2025/02/mashinnoe-obuchenie-dlya-nachinayushhih-700x700.png" alt="Изображение 1">
  <p>Текст с картинкой.</p>
  <img src="https://naytikurs.ru/assets/uploads/2025/02/dengi-slava-i-kod-gid-po-samym-goryachim-it-professiyam-2025-dlya-teh-kto-hochet-byt-na-volne-700x525.png" alt="Изображение 2">
</div>

<div>
  <img src="https://naytikurs.ru/assets/uploads/2025/02/mashinnoe-obuchenie-dlya-nachinayushhih-700x700.png" alt="Изображение 1">
  <p>Текст с картинкой.</p>
  <img src="https://naytikurs.ru/assets/uploads/2025/02/dengi-slava-i-kod-gid-po-samym-goryachim-it-professiyam-2025-dlya-teh-kto-hochet-byt-na-volne-700x525.png" alt="Изображение 2">
</div>

JavaScript

let images = document.input__1("input__2");
let newImageUrl = "https://naytikurs.ru/assets/uploads/2025/01/java-1-700x525.png";
for (let i = 0; i < images.length; i++) {
  images[i].input__3 = newImageUrl;
}

                     let images = document.input__1("input__2");
let newImageUrl = "https://naytikurs.ru/assets/uploads/2025/01/java-1-700x525.png";
for (let i = 0; i < images.length; i++) {
  images[i].input__3 = newImageUrl;
}

Свойство `src` элемента `<img>` определяет URL изображения. Измените это свойство, чтобы заменить изображение.

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

Результат

Лог

Выполнить

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

Задание 6. Изменение фона блоков div

id: 36994_tag-selection-6

Установите фоновый цвет всех элементов `<div>` на светло-серый (`#f0f0f0`). Используйте Javascript и свойство `style.backgroundColor`.

HTML

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

                      <div>
  <p>Первый div</p>
</div>
<section>
  <div>
    <p>Вложенный div</p>
  </div>
</div>

<div>
  <p>Первый div</p>
</div>
<section>
  <div>
    <p>Вложенный div</p>
  </div>
</div>

JavaScript

let divs = document.input__1("input__2");
for (let i = 0; i < divs.length; i++) {
  divs[i].style.input__3 = "#f0f0f0";
}

                     let divs = document.input__1("input__2");
for (let i = 0; i < divs.length; i++) {
  divs[i].style.input__3 = "#f0f0f0";
}

Фоновый цвет элемента задается CSS свойством `backgroundColor`. Примените это свойство к стилю всех выбранных элементов `<div>`.

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

Результат

Лог

Выполнить

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

Задание 7. Добавление класса к элементам span

id: 36994_tag-selection-7

Добавьте класс "highlight" ко всем элементам `<span>` на странице. Класс "highlight" уже определен в CSS (делает текст жирным и желтым). Используйте Javascript и свойство `classList.add()`.

CSS

.highlight {
  font-weight: bold;
  background-color: yellow;
}

HTML

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

                      <p>
  <span>Текст 1</span> и <span>Текст 2</span>
</p>
<div>
  <span>Еще текст</span>
</div>

<p>
  <span>Текст 1</span> и <span>Текст 2</span>
</p>
<div>
  <span>Еще текст</span>
</div>

JavaScript

let spans = document.input__1("input__2");
for (let i = 0; i < spans.length; i++) {
  spans[i].classList.input__3("highlight");
}

                     let spans = document.input__1("input__2");
for (let i = 0; i < spans.length; i++) {
  spans[i].classList.input__3("highlight");
}

Для добавления класса к элементу используйте свойство `classList` и метод `add()`. Класс "highlight" уже задан в CSS, вам нужно только добавить его к элементам `<span>`.

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

Результат

Лог

Выполнить

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

Задание 8. Изменение стиля элементов code

id: 36994_tag-selection-8

Измените стиль всех элементов `<code>` на странице: установите цвет текста на зеленый (`green`) и добавьте рамку в 1px черного цвета (`solid black`). Используйте Javascript и свойства `style.color` и `style.border`.

HTML

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

                      <p>Пример кода: <code>let x = 10;</code></p>
<div>
  <code>function myFunction() {}</code>
</div>

<p>Пример кода: <code>let x = 10;</code></p>
<div>
  <code>function myFunction() {}</code>
</div>

JavaScript

let codeElements = document.input__1("input__2");
for (let i = 0; i < codeElements.length; i++) {
  codeElements[i].style.input__3 = "green";
  codeElements[i].style.input__4 = "solid black";
}

                     let codeElements = document.input__1("input__2");
for (let i = 0; i < codeElements.length; i++) {
  codeElements[i].style.input__3 = "green";
  codeElements[i].style.input__4 = "solid black";
}

Для изменения стиля используйте свойство `style`. Вам нужно изменить два CSS свойства: `color` для цвета текста и `border` для рамки.

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

Результат

Лог

Выполнить

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