4.1 Манипуляция атрибутами
Манипуляция атрибутами и стилями DOM-элементов — важная часть работы с веб-документами. Это позволяет изменять внешний вид элементов и их поведение на основе действий пользователя или других условий.
1. Получение атрибутов
Для получения значений атрибутов элемента используется метод getAttribute().
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink">Visit 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">Visit 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">Visit 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">Visit 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">This is a paragraph.</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">This is a paragraph.</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">Click me!</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">This is a paragraph.</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. Изменение инлайновых стилей
Для изменения инлайновых стилей элемента используется свойство style.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="myParagraph">This is a paragraph.</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">This is a paragraph.</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. Удаление инлайновых стилей
Чтобы удалить инлайновые стили, достаточно установить значение стиля в пустую строку.
Пример:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="myParagraph" style="color: red; font-size: 20px;">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = '';
paragraph.style.fontSize = '';
</script>
</body>
</html>