Урок 6: Работа с событиями в JavaScript и взаимодействие с DOM
Введение
Теперь, когда вы знакомы с основами JavaScript, давайте рассмотрим более сложные темы, такие как работа с событиями и взаимодействие с DOM (Document Object Model). Эти концепции позволят вам создавать динамичные и интерактивные веб-страницы.
События в JavaScript
События позволяют JavaScript реагировать на действия пользователя, такие как нажатия кнопок, перемещения мыши, изменения в текстовых полях и т.д.
Основные типы событий
onclick — событие при клике на элемент.
onmouseover — событие при наведении курсора мыши на элемент.
onmouseout — событие при уходе курсора мыши с элемента.
onchange — событие при изменении значения элемента.
onkeyup — событие при отпускании клавиши.
Пример работы с событиями
Создадим простую страницу с различными событиями:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>События в JavaScript</title>
</head>
<body>
<h1>Работа с событиями в JavaScript</h1>
<button onclick="showMessage()">Нажми меня</button><br><br>
<input type="text" id="textInput" onkeyup="showText()" placeholder="Введи текст"><br><br>
<div onmouseover="changeColor(this)" onmouseout="resetColor(this)" style="width: 100px; height: 100px; background-color: lightblue;"></div>
<p id="message"></p>
<script>
function showMessage() {
document.getElementById('message').innerText = 'Кнопка нажата!';
}
function showText() {
var text = document.getElementById('textInput').value;
document.getElementById('message').innerText = 'Ты ввел: ' + text;
}
function changeColor(element) {
element.style.backgroundColor = 'lightgreen';
}
function resetColor(element) {
element.style.backgroundColor = 'lightblue';
}
</script>
</body>
</html>
Взаимодействие с DOM
DOM представляет структуру HTML-документа в виде дерева. С помощью JavaScript можно изменять содержимое, структуру и стили веб-страницы.
Основные методы работы с DOM
getElementById(id) — получение элемента по его ID.
getElementsByClassName(className) — получение всех элементов с определенным классом.
getElementsByTagName(tagName) — получение всех элементов с определенным тегом.
querySelector(selector) — получение первого элемента, соответствующего CSS-селектору.
querySelectorAll(selector) — получение всех элементов, соответствующих CSS-селектору.
Пример взаимодействия с DOM
Создадим страницу, на которой будем изменять содержимое и стили элементов:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Взаимодействие с DOM</title>
</head>
<body>
<h1>Взаимодействие с DOM</h1>
<div id="content">
<p class="text">Это абзац с классом "text".</p>
<p class="text">Еще один абзац с классом "text".</p>
<p id="unique">Уникальный абзац.</p>
</div>
<button onclick="changeContent()">Изменить содержимое</button>
<button onclick="changeStyle()">Изменить стиль</button>
<script>
function changeContent() {
document.getElementById('unique').innerText = 'Содержимое изменено!';
var texts = document.getElementsByClassName('text');
for (var i = 0; i < texts.length; i++) {
texts[i].innerText = 'Текст изменен!';
}
}
function changeStyle() {
var content = document.querySelector('#content');
content.style.backgroundColor = 'lightyellow';
var paragraphs = content.querySelectorAll('p');
paragraphs.forEach(function(paragraph) {
paragraph.style.color = 'blue';
paragraph.style.fontWeight = 'bold';
});
}
</script>
</body>
</html>
Заключение
В этом уроке мы познакомились с событиями в JavaScript и основными методами взаимодействия с DOM. Эти знания позволят вам создавать более интерактивные и динамичные веб-страницы. В следующем уроке мы будем изучать манипуляции с формами и валидацию данных на стороне клиента с помощью JavaScript.