🚀 Веб-разработка с нуля: Урок 4
Привет, будущие разработчики! 👋
В прошлом уроке мы добавили интерактивности на сайт с помощью JavaScript. Сегодня мы углубимся в работу с DOM (Document Object Model) и научимся динамически изменять содержимое страницы.
📌 Что такое DOM?
DOM — это программный интерфейс, который позволяет JavaScript взаимодействовать с HTML-документом. С его помощью можно изменять структуру, стили и содержимое страницы "на лету".
🛠 Основные методы работы с DOM:
1. Выбор элементов:
-
-
2. Изменение содержимого:
-
-
3. Добавление и удаление элементов:
-
-
📝 Практика:
Давайте создадим кнопку, которая будет добавлять новый элемент на страницу.
1. Обновите ваш HTML-файл:
2. Добавьте стили в
3. Напишите скрипт в
Сохраните файлы и откройте HTML-страницу в браузере. Теперь при нажатии на кнопку "Добавить элемент" на странице будут появляться новые блоки! 🎉
👉 В следующем уроке:
Мы начнем изучать основы адаптивной верстки и сделаем наш сайт удобным для мобильных устройств.
Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬
#вебразработка #javascript #DOM #html #css #программирование #rm_programmer
Привет, будущие разработчики! 👋
В прошлом уроке мы добавили интерактивности на сайт с помощью JavaScript. Сегодня мы углубимся в работу с DOM (Document Object Model) и научимся динамически изменять содержимое страницы.
📌 Что такое DOM?
DOM — это программный интерфейс, который позволяет JavaScript взаимодействовать с HTML-документом. С его помощью можно изменять структуру, стили и содержимое страницы "на лету".
🛠 Основные методы работы с DOM:
1. Выбор элементов:
-
document.getElementById("id") — выбор элемента по id. -
document.querySelector(".class") — выбор элемента по классу или тегу. 2. Изменение содержимого:
-
element.textContent — изменение текста внутри элемента. -
element.innerHTML — изменение HTML-содержимого. 3. Добавление и удаление элементов:
-
document.createElement("div") — создание нового элемента. -
element.appendChild(newElement) — добавление элемента в DOM. 📝 Практика:
Давайте создадим кнопку, которая будет добавлять новый элемент на страницу.
1. Обновите ваш HTML-файл:
<!DOCTYPE html>
<html>
<head>
<title>Мой первый сайт</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это мой первый шаг в веб-разработке.</p>
<button id="addButton">Добавить элемент</button>
<div id="container"></div>
<script src="script.js"></script>
</body>
</html>
2. Добавьте стили в
styles.css (по желанию): #container {
margin-top: 20px;
}
.new-element {
background-color: #e0e0e0;
padding: 10px;
margin: 5px 0;
border-radius: 5px;
}3. Напишите скрипт в
script.js: document.getElementById("addButton").addEventListener("click", function() {
// Создаем новый элемент
const newElement = document.createElement("div");
newElement.textContent = "Новый элемент добавлен!";
newElement.classList.add("new-element");
// Добавляем его в контейнер
document.getElementById("container").appendChild(newElement);
});Сохраните файлы и откройте HTML-страницу в браузере. Теперь при нажатии на кнопку "Добавить элемент" на странице будут появляться новые блоки! 🎉
👉 В следующем уроке:
Мы начнем изучать основы адаптивной верстки и сделаем наш сайт удобным для мобильных устройств.
Подписывайтесь на канал, чтобы не пропустить новые уроки: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими результатами в комментариях! 💬
#вебразработка #javascript #DOM #html #css #программирование #rm_programmer