Выбор элементов по тегу: Тренажер JavaScript: Покоряем HTML DOM

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

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

Список тем

Задание 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. Изменение цвета заголовков

Сделайте цвет текста всех заголовков второго уровня (тег `<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. Скрытие элементов списка

Скройте все элементы списка `<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. Изменение размера шрифта ссылок

Увеличьте размер шрифта всех ссылок `<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. Замена изображений

Замените все изображения `<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

Установите фоновый цвет всех элементов `<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

Добавьте класс "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

Измените стиль всех элементов `<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` для рамки.

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

Результат

Лог

Выполнить

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

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