Задача №1
Необходимо получить доступ к элементу страницы по его ID и изменить его содержимое на "Hello, World!".
Решение:
// Получаем доступ к элементу по ID
let element = document.getElementById("example-id");
// Изменяем содержимое элемента
element.innerHTML = "Hello, World!";
Описание решения:
Используем метод getElementById() для получения ссылки на элемент страницы по его ID. Затем мы изменяем содержимое элемента, используя свойство innerHTML, установив его значение на строку "Hello, World!". Таким образом, после выполнения этого кода содержимое элемента с заданным ID будет изменено на "Hello, World!"
Задача №2
Создайте новый элемент "p" с текстом "Этот текст был создан динамически" и добавьте его на страницу.
Решение:
// Создаем новый элемент "p"
let newElement = document.createElement("p");
// Устанавливаем текст элемента
newElement.innerHTML = "Этот текст был создан динамически";
// Добавляем элемент на страницу
document.body.appendChild(newElement);
Описание решения:
В решении мы создаем новый элемент с помощью метода document.createElement(), затем устанавливаем его содержимое с помощью свойства innerHTML и, наконец, добавляем элемент на страницу с помощью метода appendChild(), указав в качестве аргумента родительский элемент, к которому мы хотим добавить созданный элемент. Таким образом, при выполнении данного кода на странице будет создан новый параграф с текстом "Этот текст был создан динамически".
Задача №3
Необходимо получить все элементы "li" на странице и добавить к каждому из них класс "list-item".
Решение:
// Получаем все элементы "li"
let elements = document.getElementsByTagName("li");
// Добавляем класс "list-item" к каждому элементу
for (let i = 0; i < elements.length; i++) {
elements[i].classList.add("list-item");
}
Описание решения:
В решении сначала получается коллекция элементов "li" при помощи метода getElementsByTagName(). Затем происходит итерация по коллекции при помощи цикла for, в котором каждому элементу добавляется класс "list-item" при помощи метода classList.add().
Метод classList.add() позволяет добавить один или несколько классов элементу. Если класс уже присутствует у элемента, то он не будет добавлен повторно.
Итоговый результат - каждый элемент "li" на странице будет иметь класс "list-item", что позволит использовать его для стилизации и работы с DOM при помощи JavaScript.
Задача №4
Получите все элементы "a" на странице и добавьте к каждому из них атрибут "target=_blank".
Решение:
// Получаем все элементы "a"
let elements = document.getElementsByTagName("a");
// Добавляем атрибут "target=_blank" к каждому элементу
for (let i = 0; i < elements.length; i++) {
elements[i].setAttribute("target", "_blank");
}
Описание решения:
В решении сначала получается коллекция элементов "a" при помощи метода getElementsByTagName(). Затем происходит итерация по коллекции при помощи цикла for, в котором каждому элементу добавляется атрибут "target=_blank" при помощи метода setAttribute().
Метод setAttribute() позволяет добавлять атрибуты к элементам и принимает два аргумента: имя атрибута и его значение. В данном случае, мы добавляем атрибут "target" со значением "_blank" каждому элементу "a".
Итоговый результат - все ссылки на странице будут открываться в новой вкладке браузера благодаря атрибуту "target=_blank".
Задача №5
Необходимо добавить обработчик события "click" на все кнопки "button" на странице, который будет выводить сообщение "Кнопка нажата!" в консоль при клике.
Решение:
// Получаем все элементы "button"
let elements = document.getElementsByTagName("button");
// Добавляем обработчик события "click" к каждому элементу
for (let i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", function() {
console.log("Кнопка нажата!");
});
}
Описание решения:
В решении сначала получается коллекция элементов "button" при помощи метода getElementsByTagName(). Затем происходит итерация по коллекции при помощи цикла for, в котором каждому элементу добавляется обработчик события "click" при помощи метода addEventListener().
Метод addEventListener() позволяет добавлять обработчик событий к элементам. Он принимает два аргумента: имя события и функцию-обработчик. В данном случае, мы добавляем обработчик события "click", который будет выводить сообщение "Кнопка нажата!" в консоль.
Итоговый результат - при клике на любую кнопку на странице будет выводиться сообщение "Кнопка нажата!" в консоль. Это позволяет отслеживать пользовательские действия и выполнять соответствующие действия в JavaScript.
Задача №6
Создайте форму с полями "Имя" и "Email" и кнопкой "Отправить". При отправке формы выведите значения полей в консоль.
Решение:
<form id="my-form">
<label for="name">Имя:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Отправить">
</form>
<script>
// Получаем форму
let form = document.getElementById("my-form");
// Добавляем обработчик события "submit"
form.addEventListener("submit", function(event) {
// Отменяем стандартное поведение формы
event.preventDefault();
// Получаем значения полей
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
// Выводим значения полей в консоль
console.log("Имя: " + name);
console.log("Email: " + email);
});
</script>
Описание решения:
Для решения задачи необходимо создать форму с полями "Имя" и "Email" и кнопкой "Отправить", а затем добавить обработчик события "submit", который будет выводить значения полей в консоль при отправке формы.
В решении сначала создается форма при помощи HTML-разметки. Каждое поле формы имеет уникальный идентификатор и атрибут name, который будет использоваться для получения значения поля в JavaScript.
Затем получаем форму по идентификатору при помощи метода getElementById(). Добавляем обработчик события "submit" при помощи метода addEventListener(), который будет вызывать функцию при отправке формы.
Внутри функции сначала отменяем стандартное поведение формы при помощи метода preventDefault(), чтобы страница не перезагружалась при отправке формы. Затем получаем значения полей "Имя" и "Email" при помощи метода getElementById() и свойства value. Наконец, выводим значения полей в консоль при помощи метода console.log().
Итоговый результат - при отправке формы будет выводиться в консоль значения полей "Имя" и "Email", которые можно использовать для дальнейшей обработки в JavaScript.
Задача №7
Необходимо получить все элементы с классом "example-class" и установить им высоту равную 100 пикселей.
Решение:
// Получаем все элементы с классом "example-class"
let elements = document.getElementsByClassName("example-class");
// Устанавливаем высоту каждого элемента
for (let i = 0; i < elements.length; i++) {
elements[i].style.height = "100px";
}
Описание решения:
Для решения задачи необходимо получить все элементы с классом "example-class" и установить им высоту равную 100 пикселей.
Сначала получаем все элементы с классом "example-class" при помощи метода getElementsByClassName(). Затем проходимся по полученному массиву элементов и устанавливаем каждому из них высоту равную 100 пикселей при помощи свойства style.height.
Итоговый результат - все элементы с классом "example-class" будут иметь высоту равную 100 пикселей.
Задача №8
Необходимо получить первый элемент "div" на странице и установить ему фоновый цвет "#c0c0c0".
Решение:
// Получаем первый элемент "div"
let element = document.getElementsByTagName("div")[0];
// Устанавливаем фоновый цвет элемента
element.style.backgroundColor = "#c0c0c0";
Описание решения:
Для решения задачи необходимо получить первый элемент "div" на странице и установить ему фоновый цвет "#c0c0c0".
Сначала получаем первый элемент "div" при помощи метода getElementsByTagName(). Так как этот метод возвращает массив элементов, мы обращаемся к первому элементу массива при помощи индекса [0].
Затем устанавливаем фоновый цвет элемента при помощи свойства style.backgroundColor.
Итоговый результат - первый элемент "div" на странице будет иметь фоновый цвет "#c0c0c0".
Задача №9
Создайте функцию, которая будет скрывать элемент при клике на него.
Решение:
// Получаем элемент
let element = document.getElementById("example-id");
// Добавляем обработчик события "click"
element.addEventListener("click", function() {
// Скрываем элемент
element.style.display = "none";
});
Описание решения:
Для создания функции, которая будет скрывать элемент при клике на него, необходимо использовать метод addEventListener() для добавления обработчика события "click" к элементу.
Внутри функции-обработчика необходимо установить свойство style.display элемента равным "none", что скроет элемент.
Задача №10
Необходимо получить все элементы на странице и вывести их количество в консоль.
Решение:
// Получаем все элементы на странице
let elements = document.getElementsByTagName("*");
// Выводим количество элементов в консоль
console.log("Количество элементов на странице: " + elements.length);
Описание решения:
Для получения всех элементов на странице мы можем использовать метод getElementsByTagName("*")
, который вернет коллекцию всех элементов на странице. Затем мы можем получить количество элементов в коллекции и вывести эту информацию в консоль.
Заключение
В этом документе были описаны различные примеры работы с DOM в JavaScript, такие как получение элементов, добавление обработчиков событий, установка свойств элементов и другие. Эти примеры могут быть использованы для создания интерактивных веб-страниц и приложений, а также для выполнения других задач в JavaScript.
Надеемся это было полезно для вас и помогло лучше понять, как работать с DOM в JavaScript. Если у вас есть какие-либо вопросы или комментарии, не стесняйтесь обращаться к нам.
