4.1 Маніпуляція атрибутами
Маніпуляція атрибутами і стилями DOM-елементів — важлива частина роботи з веб-документами. Це дозволяє змінювати зовнішній вигляд елементів і їх поведінку на основі дій користувача або інших умов.
1. Отримання атрибутів
Для отримання значень атрибутів елемента використовується метод getAttribute().
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink">Відвідати Example.com</a>
<script>
const link = document.getElementById('myLink');
const href = link.getAttribute('href');
console.log(href); // Виведе: https://example.com
</script>
</body>
</html>
2. Встановлення атрибутів
Для встановлення або зміни значення атрибута елемента використовується метод setAttribute().
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink">Відвідати Example.com</a>
<script>
const link = document.getElementById('myLink');
link.setAttribute('href', 'https://newexample.com');
console.log(link.getAttribute('href')); // Виведе: https://newexample.com
</script>
</body>
</html>
3. Видалення атрибутів
Для видалення атрибута елемента використовується метод removeAttribute().
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink" target="_blank">Відвідати Example.com</a>
<script>
const link = document.getElementById('myLink');
link.removeAttribute('target');
console.log(link.getAttribute('target')); // Виведе: null
</script>
</body>
</html>
4. Перевірка наявності атрибутів
Для перевірки наявності атрибута використовується метод hasAttribute().
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink" target="_blank">Відвідати Example.com</a>
<script>
const link = document.getElementById('myLink');
console.log(link.hasAttribute('target')); // Виведе: true
link.removeAttribute('target');
console.log(link.hasAttribute('target')); // Виведе: false
</script>
</body>
</html>
4.2 Маніпуляція класами
1. Додавання класів
Для додавання класу до елемента використовується метод classList.add().
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph">Це параграф.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.classList.add('highlight');
</script>
</body>
</html>
2. Видалення класів
Для видалення класу з елемента використовується метод classList.remove().
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph" class="highlight">Це параграф.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.classList.remove('highlight');
</script>
</body>
</html>
3. Переключення класів
Для переключення класу використовується метод classList.toggle(). Він додає клас, якщо його немає, і видаляє, якщо він є.
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<button type="button" id="myButton">Натисни мене!</button>
<script>
const btn = document.getElementById('myButton');
btn.addEventListener("click", () => {
btn.classList.toggle('highlight'); // Додасть клас. При повторному натисканні видалить клас.
});
</script>
</body>
</html>
4. Перевірка наявності класу
Для перевірки наявності класу використовується метод classList.contains().
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph" class="highlight">Це параграф.</p>
<script>
const paragraph = document.getElementById('myParagraph');
console.log(paragraph.classList.contains('highlight')); // Виведе: true
paragraph.classList.remove('highlight');
console.log(paragraph.classList.contains('highlight')); // Виведе: false
</script>
</body>
</html>
4.3 Маніпуляція стилями
1. Зміна inline-стилів
Для зміни inline-стилів елемента використовується властивість style.
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="myParagraph">Це параграф.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = 'red';
paragraph.style.fontSize = '20px';
</script>
</body>
</html>
2. Отримання обчислених стилів
Для отримання поточних обчислених стилів елемента використовується метод window.getComputedStyle().
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#myParagraph {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p id="myParagraph">Це параграф.</p>
<script>
const paragraph = document.getElementById('myParagraph');
const styles = window.getComputedStyle(paragraph);
console.log(styles.color); // Виведе: rgb(0, 0, 255) або синій колір
console.log(styles.fontSize); // Виведе: 18px
</script>
</body>
</html>
3. Видалення inline-стилів
Щоб видалити inline-стилі, достатньо встановити значення стилю в порожній рядок.
Приклад:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="myParagraph" style="color: red; font-size: 20px;">Це параграф.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = '';
paragraph.style.fontSize = '';
</script>
</body>
</html>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ