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

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

Document.head є властивістю, яка надає доступ до елемента <head> поточного документа. Основна суть цієї властивості полягає в тому, що вона дозволяє програмістам JavaScript звертатися до елемента <head> безпосередньо, що є надзвичайно корисним для динамічного додавання або модифікації метаданих сторінки, таких як стилі, скрипти, метатеги тощо. Це зокрема важливо для розробки веб-додатків, де необхідно змінювати чи доповнювати інформацію в заголовку сторінки на льоту, наприклад, для зміни теми оформлення або додавання нових стилів чи скриптів в залежності від дій користувача або змін у контенті.

Використання властивості Document.head є доволі простим і не вимагає складних маніпуляцій. Для доступу до елемента <head> достатньо використати вираз document.head. Цей вираз повертає об'єкт елемента <head>, до якого можна застосувати різні методи і властивості для внесення змін.

Наприклад, якщо необхідно додати новий стилевий лист до документа, можна використати наступний код:

let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';
document.head.appendChild(link);

У цьому випадку спочатку створюється новий елемент <link>, до якого присвоюються атрибути rel і href, що вказують на зв'язок елемента зі стилевим листом та його розташування відповідно. Потім цей елемент додається до елемента <head> за допомогою методу appendChild.

Так само, якщо потрібно динамічно додати скрипт до сторінки, можна використати подібний підхід:

let script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'script.js';
document.head.appendChild(script);

Тут створюється елемент <script>, якому присвоюються атрибути type і src, що визначають тип скрипта та його джерело. Після цього скрипт додається до <head>, дозволяючи йому бути завантаженим та виконаним.

Важливо зазначити, що динамічне додавання елементів до <head> може мати вплив на продуктивність веб-сторінки, оскільки браузеру потрібно переаналізувати та перерендерити сторінку. Тому слід уважно підходити до рішення про додавання елементів на льоту, особливо при роботі зі скриптами та стилевими файлами, які можуть значно змінити зовнішній вигляд або поведінку сторінки.

Крім додавання нових елементів, властивість Document.head може використовуватися для доступу та модифікації існуючих елементів у <head>. Наприклад, можна змінити метатег description або динамічно змінити заголовок документа через властивість document.title.

Загалом, Document.head є потужним інструментом у руках розробника, який дозволяє ефективно управляти метаданими веб-сторінки, адаптуючи її до потреб користувачів і контексту використання. Його застосування сприяє підвищенню гнучкості та динамічності веб-додатків, що є ключовими аспектами сучасної веб-розробки.

Порада:	Якщо вам необхідно перевірити наявність певних мета-тегів чи посилань на зовнішні ресурси у розділі `<head>` для забезпечення правильної SEO-оптимізації або відповідності стандартам доступності, використовуйте `document.head` як вихідну точку для пошуку цих елементів з використанням методів, таких як `querySelector()` або `getElementsByTagName()`.
Порада:	При роботі з JavaScript-фреймворками або при створенні скриптів, що міняють тему оформлення сайту, можна використовувати `document.head` для ефективного управління стилевими листами. Додавайте або видаляйте класи з елемента `<head>`, або безпосередньо змінюйте стилі, вбудовані у `<style>` теги, щоб динамічно адаптувати візуальне представлення сторінки.
Порада:	Для оптимізації завантаження сторінки та зменшення часу її рендеринга, використовуйте `document.head` для контролю над тим, коли та як зовнішні ресурси (наприклад, скрипти або стилі) додаються до документа. Це дозволяє вам вибірково завантажувати ресурси, що є критично важливими для початкового відображення сторінки, а решту додавати асинхронно або за необхідності.

Синтаксис

Document.head

Значення

Return

Переглядачі

Переглядач
	4	4	5	11	12

Переглядач
	37	18	4	4

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

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/WNmqpry">
  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>.

У цьому прикладі ми демонструємо, як за допомогою властивості document.head можна додати новий стильовий елемент до секції <head> веб-сторінки. Цей приклад показує базове використання document.head для зміни зовнішнього вигляду елементів сторінки через CSS. Використання цієї властивості ефективне для динамічного контролю над стилем веб-сторінки без необхідності безпосередньо змінювати HTML-файл.

// Створення нового стильового елементу
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'body { background-color: lightblue; }';
// Додавання стильового елементу до <head>
document.head.appendChild(style);

У цьому прикладі ми показуємо, як за допомогою document.head можна динамічно змінити мета-тег theme-color на веб-сторінці. Це особливо корисно для адаптації кольору теми в адресному рядку мобільного браузера або статус-бару до темної чи світлої теми сайту, що підвищує користувацький досвід і дає сайту більш професійний вигляд.

// Перевірка поточної теми користувача
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // Якщо користувач використовує темну тему, змінюємо мета-тег 'theme-color'
    var metaThemeColor = document.querySelector('meta[name=theme-color]');
    if (metaThemeColor) {
        metaThemeColor.setAttribute('content', '#000000'); // Темна тема
    } else {
        metaThemeColor = document.createElement('meta');
        metaThemeColor.name = 'theme-color';
        metaThemeColor.content = '#000000';
        document.head.appendChild(metaThemeColor);
    }
} else {
    // Аналогічно для світлої теми
    var metaThemeColor = document.querySelector('meta[name=theme-color]');
    if (metaThemeColor) {
        metaThemeColor.setAttribute('content', '#FFFFFF'); // Світла тема
    } else {
        metaThemeColor = document.createElement('meta');
        metaThemeColor.name = 'theme-color';
        metaThemeColor.content = '#FFFFFF';
        document.head.appendChild(metaThemeColor);
    }
}

JS довідник

JavaScript

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