В этом разделе вы отработаете на практике навыки навигации по DOM-дереву, используя JavaScript. Вы научитесь находить соседние элементы: предыдущий и следующий. Каждое задание представляет собой небольшую интерактивную задачу, где вам нужно будет дописать JavaScript код, чтобы получить желаемый результат. Внимательно читайте описания заданий и используйте подсказки, если возникают трудности. Удачи в обучении!
- Модуль 1: Основы выбора элементов
- Выбор элемента по ID.
- Выбор элементов по классу.
- Выбор элементов по тегу.
- Выбор по селектору CSS.
- Выбор по атрибуту.
- Поиск элементов внутри другого элемента.
- Поиск родительского элемента.
- Поиск соседних элементов (предыдущий, следующий).
- Поиск первого и последнего дочернего элемента.
- Поиск всех дочерних элементов.
- Модуль 2: Манипуляция содержимым
- Модуль 3: Работа с атрибутами
- Модуль 4: Управление классами
- Модуль 5: Управление стилями
- Модуль 6: Создание и удаление элементов
- Создание нового элемента.
- Вставка элемента перед другим элементом.
- Вставка элемента после другого элемента.
- Добавление элемента в определенную позицию внутри списка дочерних элементов.
- Удаление элемента из DOM.
- Замена одного элемента другим.
- Перемещение существующего элемента в другое место DOM..
- Очистка содержимого элемента без его удаления.
- Модуль 7: Обработка событий
- Модуль 8: Работа с формами
- Модуль 9: Продвинутые манипуляции
- Модуль 10: Работа с размерами и прокруткой
- Получение размеров элемента.
- Получение позиции элемента относительно окна браузера.
- Получение позиции элемента относительно родительского элемента.
- Управление прокруткой страницы.
- Определение, виден ли элемент в текущей области просмотра.
- Плавная прокрутка к элементу.
- Создание элемента, который фиксируется при прокрутке.
- Модуль 11: Работа с медиа-элементами
- Модуль 12: Практические задания
Найти следующий элемент
Найдите элемент `span` с идентификатором `current` и получите его следующий элемент-сосед. Измените текст этого элемента на 'Следующий элемент'.
<div id="container"><span>Предыдущий элемент</span><span id="current">Текущий элемент</span><span></span></div>document.input__1('input__2').input__3.textContent = 'Следующий элемент';Найти предыдущий элемент
Найдите элемент `span` с идентификатором `current` и получите его предыдущий элемент-сосед. Измените цвет текста этого элемента на `blue`.
<div id="container"><span></span><span id="current">Текущий элемент</span><span>Следующий элемент</span></div>document.input__1('input__2').input__3.style.color = 'blue';Изменить атрибуты соседних элементов
Найдите элемент `div` с идентификатором `center`. Получите его предыдущий и следующий элементы-соседи. Установите атрибут `data-status` равным 'сосед' для обоих.
<div id="container"><div id="prev">Предыдущий</div><div id="center">Центральный</div><div id="next">Следующий</div></div>const centerElement = document.input__1('input__2');
centerElement.input__3.input__4('data-status', 'сосед');
centerElement.input__5.input__6('data-status', 'сосед');Изменить текст следующего элемента списка
В списке `ul` найдите элемент `li` с текстом 'Пункт 2'. Получите его следующий элемент списка и измените его текст на 'Пункт 3 - изменен'.
<ul><li>Пункт 1</li><li class="target">Пункт 2</li><li>Пункт 3</li></ul>const targetElement = document.input__1('.target');
targetElement.input__2.textContent = 'Пункт 3 - изменен';Подсветить предыдущий элемент
Найдите элемент `div` с классом `highlight`. Получите его предыдущий элемент-сосед и установите цвет фона этого элемента на `lightyellow`.
.item { padding: 10px; border: 1px solid black; margin-bottom: 5px; } .highlight { background-color: lightblue; }<div class="item">Элемент 1</div><div class="item highlight">Элемент 2</div><div class="item">Элемент 3</div>const highlightElement = document.input__1('.highlight');
highlightElement.input__2.style.backgroundColor = 'lightyellow';Найти элемент через два шага вперед
Найдите элемент `div` с идентификатором `start`. Получите его следующего элемента-соседа, а затем следующего элемента-соседа от того, что получили. Измените текст этого элемента на 'Нашли!'.
<div id="container"><div id="start">Старт</div><div>Промежуточный</div><div></div></div>const startElement = document.input__1('input__2');
startElement.input__3.input__4.textContent = 'Нашли!';Изменить изображение предыдущего элемента
Найдите элемент `img` с классом `current-image`. Получите его предыдущий элемент-сосед (который тоже `img`). Измените атрибут `src` этого предыдущего элемента на `https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png`.
<div id="image-container"><img src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Image 1"><img class="current-image" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png" alt="Image 2"></div>const currentImage = document.input__1('.current-image');
currentImage.input__2.input__3('src', 'https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png');Изменить стиль следующего элемента
Найдите элемент `button` с классом `first-button`. Получите его следующий элемент-сосед (который также является `button`). Измените цвет фона этого следующего элемента на `lightgreen`.
.btn { padding: 8px 15px; margin-right: 5px; }<div id="button-container"><button class="btn first-button">Кнопка 1</button><button class="btn">Кнопка 2</button></div>const firstButton = document.input__1('.first-button');
firstButton.input__2.style.backgroundColor = 'lightgreen';
Загрузка...