JS властивість Document.body

Загальний опис

Властивість body надає програмну доступність до елемента <body> поточного документа, що дозволяє розробникам читати та змінювати вміст тіла веб-сторінки динамічно. Завдяки body, можна ефективно управляти DOM (Document Object Model) сторінки, здійснюючи операції, такі як додавання, видалення або зміна елементів HTML, а також взаємодія зі стилями та вмістом.

Основна корисність властивості body полягає у її здатності служити точкою доступу до вмісту веб-сторінки, що робить її незамінним інструментом для веб-розробників. Використання цієї властивості охоплює широкий спектр сценаріїв, від простого зміни тексту на сторінці до складних динамічних інтерфейсів користувача, які включають в себе інтерактивність та анімацію.

Для роботи з body не потрібно спеціальних методів або комплексних підходів. Простий доступ до цієї властивості через document.body дає можливість читати та маніпулювати вмістом тіла документа напряму. Наприклад, можна додати новий елемент у тіло сторінки:

var newElement = document.createElement('p');
newElement.textContent = 'Це новий абзац, доданий до тіла документа.';
document.body.appendChild(newElement);

У цьому прикладі спочатку створюється новий елемент <p> з текстовим вмістом, після чого він додається до кінця тіла документа за допомогою методу appendChild. Це демонструє базовий прийом додавання вмісту на веб-сторінку.

Крім додавання елементів, body також може використовуватися для зміни атрибутів або стилів існуючих елементів, що дозволяє розробникам динамічно змінювати зовнішній вигляд та поведінку елементів на сторінці. Наприклад, зміна кольору фону тіла документа:

document.body.style.backgroundColor = 'lightblue';

Цей рядок коду змінює колір фону тіла документа на світло-блакитний, демонструючи просту маніпуляцію стилями через JavaScript.

body також є критично важливим при розробці відгукуючих (responsive) веб-додатків, де зміст і стиль елементів можуть змінюватися залежно від розміру вікна переглядача або інших умов. Використовуючи JavaScript для слухання подій зміни розміру вікна та відповідну зміну стилів елементів body, розробники можуть створювати адаптивні веб-сторінки, які забезпечують оптимальний досвід користувача на будь-якому пристрої.

Узагальнюючи, властивість body є основоположним інструментом для будь-якого веб-розробника, що дозволяє з легкістю маніпулювати вмістом і стилем веб-сторінок. Її універсальність і простота використання роблять її незамінною для реалізації широкого спектру завдань, від базових до надзвичайно складних.

Порада:

Переконайтеся, що документ повністю завантажено перед маніпуляцією з document.body, оскільки спроба доступу або зміни елементів до повного завантаження сторінки може призвести до помилок. Для цього використовуйте події DOMContentLoaded або load, щоб гарантувати, що весь HTML був повністю оброблений браузером.

Порада:

Для оптимізації продуктивності та забезпечення кращої взаємодії з користувачем, використовуйте document.body для додавання або зміни стилів елементів динамічно. Це може включати зміну фону, шрифтів або кольорової схеми сторінки в залежності від дій користувача або інших умов. Приміром, змінити колір фону можна за допомогою document.body.style.backgroundColor = 'lightblue'.

Порада:

Використання document.body для виявлення відповіді користувача, таких як кліки або наведення миші, може значно підвищити інтерактивність вашого веб-сайту. Навішування подій на document.body та делегування їх до відповідних елементів зменшує необхідність вказівки окремих обробників для кожного елементу, спрощуючи ваш код та покращуючи його читабельність.

Наприклад, ви можете виявити кліки по різних кнопках без прямого призначення обробника події кожній кнопці:

document.body.addEventListener('click', function(event) { 
	if (event.target.tagName === 'BUTTON') { 
		console.log('Кнопка натиснута'); 
	} 
});

Синтаксис

Document.body

Значення

Return

Переглядачі

Переглядач
	1	60	1	9.6	12

Переглядач
	4.4	18	60	1

Переглядач
	-	-

Приклади

У цьому прикладі випадаючий список (<select>) дозволяє користувачеві вибрати колір, який буде застосовано до фону тіла документа (document.body).


  See the Pen <a href="https://codepen.io/css_in_ua/pen/RwdeZLR">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми створюємо новий елемент кнопки (button), задаємо йому текст і функцію, що буде виконуватися при натисканні. Після цього ми додаємо цю кнопку до тіла документа за допомогою методу appendChild.

// Створення нового кнопкового елементу
var button = document.createElement('button');
button.innerHTML = 'Натисніть мене';

// Додавання функції, що викликається при кліку на кнопку
button.onclick = function() {
  alert('Вітаємо! Ви натиснули на кнопку.');
};

// Додавання кнопки до тіла документа
document.body.appendChild(button);

У цьому прикладі ми створюємо модальне вікно, яке відкривається при натисканні на кнопку. Модальне вікно складається з фону, що затемнює решту сторінки, та контейнера для вмісту, який може містити текст, форми або інші елементи.

<!-- HTML-структура для кнопки, яка відкриватиме модальне вікно -->
<button id="openModal">Відкрити модальне вікно</button>

/* CSS-стилі для модального вікна та його фону */
<style>
.modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  width: 50%;
}
</style>

// JavaScript для створення та управління модальним вікном
<script>
document.getElementById('openModal').addEventListener('click', function() {
  // Створення фону для модального вікна
  var modalBackground = document.createElement('div');
  modalBackground.className = 'modal-background';

  // Створення контейнера для вмісту модального вікна
  var modalContent = document.createElement('div');
  modalContent.className = 'modal-content';
  modalContent.innerHTML = '<h2>Модальне вікно</h2><p>Це динамічно створене модальне вікно.</p>';

  // Додавання можливості закриття модального вікна
  modalBackground.addEventListener('click', function() {
    document.body.removeChild(modalBackground);
  });

  // Запобігання закриттю модального вікна при кліку всередині контейнера вмісту
  modalContent.addEventListener('click', function(event) {
    event.stopPropagation();
  });

  // Додавання модального вікна до тіла документа і його відображення
  modalBackground.appendChild(modalContent);
  document.body.appendChild(modalBackground);
  modalBackground.style.display = 'flex';
});
</script>

JS довідник

JavaScript

Наповнення JS розділу

JS властивість Document.body

Загальний опис

Синтаксис

Значення

Return

Переглядачі

Приклади