rm -r

🚀 Веб-разработка с нуля: Урок 4

Привет, будущие разработчики! 👋
В прошлом уроке мы добавили интерактивности на сайт с помощью 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

6 views06:02