JavaScript и DOM манипулация: Практически примери
DOM (Document Object Model) представлява структурата на
вашата уеб страница в браузъра, която JavaScript може да манипулира и променя
динамично. Манипулацията на DOM е ключова за създаването на интерактивни уеб
страници, които се променят без презареждане. В тази статия ще разгледаме
основите на DOM манипулацията с JavaScript и ще представим няколко практически
примера.
Какво е DOM?
DOM е обектно ориентиран модел на HTML документа, който
браузърът създава, когато зарежда уеб страница. Това е дървовидна структура, в
която всеки HTML елемент представлява възел (node), а JavaScript може да
добавя, премахва или променя тези възли.
Основни методи за манипулиране на DOM
Преди да се потопим в практическите примери, ето някои от
най-често използваните методи за манипулиране на DOM с JavaScript:
- document.getElementById():
Намира елемент по неговото id.
- document.querySelector():
Намира първия елемент, който съответства на даден CSS селектор.
- document.querySelectorAll():
Намира всички елементи, които съответстват на даден CSS селектор.
- element.innerHTML:
Променя или извлича HTML съдържанието на даден елемент.
- element.textContent:
Променя или извлича текстовото съдържание на даден елемент.
- element.style:
Променя стила на даден елемент.
- element.setAttribute()
и element.getAttribute(): Задава или получава стойността на атрибут
на даден елемент.
Примери за практическа манипулация на DOM
Пример 1: Промяна на съдържание на елемент
Нека разгледаме прост пример, при който искаме да променим
текста на определен елемент, когато потребителят натисне бутон.
HTML:
html
<div id="message">Първоначално съобщение</div>
<button onclick="changeText()">Смени текста</button>
JavaScript:
javascript
function changeText() {
const
messageElement = document.getElementById("message");
messageElement.textContent
= "Новото съобщение";
}
При натискане на бутона, текстът на елемента с id="message"
ще се промени на "Новото съобщение".
Пример 2: Добавяне на нов елемент към списък
Да добавим нов елемент към съществуващ списък всеки път,
когато потребителят кликне върху бутон.
HTML:
html
<ul id="itemList">
<li>Елемент
1</li>
<li>Елемент
2</li>
</ul>
<button onclick="addItem()">Добави елемент</button>
JavaScript:
javascript
function addItem() {
const ul = document.getElementById("itemList");
const li = document.createElement("li");
li.textContent = `Елемент
${ul.children.length + 1}`;
ul.appendChild(li);
}
Тази функция създава нов <li> елемент и го добавя към
края на списъка всеки път, когато бутонът се натисне.
Пример 3: Промяна на стила на елемент
Да променим фона на елемент при кликване върху бутон.
HTML:
html
<div id="box" style="width: 100px; height:
100px; background-color: lightblue;"></div>
<button onclick="changeColor()">Смени цвета</button>
JavaScript:
Javascript
function changeColor() {
const box = document.getElementById("box");
box.style.backgroundColor
= box.style.backgroundColor === "lightblue" ? "lightgreen"
: "lightblue";
}
Тази функция променя цвета на фона на елемента всеки път,
когато бутонът се натисне.
Пример 4: Скриване и показване на елемент
Можем лесно да скриваме и показваме елемент с помощта на
JavaScript.
HTML:
html
<p id="text">Този текст може да бъде скрит
или показан.</p>
<button onclick="toggleVisibility()">Скрий/Покажи
текста</button>
JavaScript:
javascript
function toggleVisibility() {
const text = document.getElementById("text");
text.style.display
= text.style.display === "none" ? "block" : "none";
}
Функцията проверява текущото състояние на стила display на
елемента и го променя между "none" и "block", за да скрие
или покаже текста.
Заключение
Манипулацията на DOM е мощен инструмент в JavaScript, който
позволява динамично взаимодействие с потребителите на вашия уебсайт. С помощта
на горепосочените методи и примери можете да създавате интерактивни, динамични
уеб страници, които предоставят по-добро потребителско изживяване. Продължете
да експериментирате и да учите нови техники за манипулация на DOM, за да
подобрите своите умения в уеб разработката.
