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

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

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

Щоб використовувати властивість scripts, необхідно звернутися до об'єкта document та його властивості scripts, яка повертає HTMLCollection усіх елементів <script>, присутніх у документі. Ця колекція є "живою", тобто відображає актуальний стан документа і автоматично оновлюється при додаванні або видаленні скриптів.

Приклад базового використання:

Для отримання кількості скриптів на веб-сторінці, можна використати наступний код:

console.log(document.scripts.length);

Цей код виведе в консоль кількість елементів <script>, що знаходяться у документі в момент виконання коду.

Розширене використання:

Щоб динамічно модифікувати атрибути скрипта, наприклад, змінити тип або додати асинхронну загрузку, можна використати такий підхід:

Array.from(document.scripts).forEach((script) => {
  if (script.type === "module") {
    script.async = true;
  }
});

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

Складніший сценарій:

Для додавання нового скрипта в документ через JavaScript можна використати наступний метод:

function addScript(src) {
  const script = document.createElement('script');
  script.src = src;
  script.async = true; // Завантажити асинхронно
  document.body.appendChild(script);
}

addScript('https://example.com/new-script.js');

Цей приклад демонструє, як створити новий елемент <script>

з вказаним src і додати його до документа, встановивши асинхронну загрузку для покращення продуктивності.

Використання властивості scripts у JavaScript надає потужні можливості для керування скриптами на веб-сторінці, що відкриває широкі горизонти для розробників, спрямовані на оптимізацію продуктивності, безпеки та інтерактивності веб-додатків.

правити

Порада

Враховуйте, що властивість Document: scripts повертає колекцію елементів типу HTMLCollection, яка жива. Це означає, що колекція автоматично оновлюється, коли скрипти додаються або видаляються з документа. Така поведінка може бути корисною при динамічному маніпулюванні скриптами на сторінці.

автор: Bond правити

Порада

Якщо потрібно отримати доступ до конкретного скрипту за індексом, можна звернутися до нього через колекцію, отриману з Document: scripts. Наприклад, document.scripts[0] поверне перший скрипт у документі. Це може бути корисно для читання атрибутів скрипта, таких як src або type.

автор: Bond правити

Порада

Пам'ятайте, що маніпулювання скриптами через Document: scripts має бути виконане обережно, особливо при додаванні або видаленні скриптів динамічно. Зміни можуть вплинути на поведінку веб-сторінки та її взаємодію з користувачем. Для додавання скриптів рекомендується використовувати метод document.createElement('script'), а для видалення — видалити елемент скрипта з DOM.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Document.scripts

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	36	61	10.1	≤12.1	12	4

Підтримка: мобільні переглядачі

Переглядач
	37	36	61	10.3

Приклади

+ запропонувати свій приклад у пісочниці

// Перший скрипт сторінки
var oldScript = document.scripts[0];
console.log('Перший скрипт:', oldScript.src || 'вбудований');

var newScript = document.createElement('script');
newScript.textContent = "console.log('Новий скрипт виконано');";

// замінюємо через батька самого скрипта — він не завжди в body
oldScript.parentNode.replaceChild(newScript, oldScript);
console.log('Перший скрипт замінено.');

// Отримуємо кількість скриптів на сторінці
var scriptsCount = document.scripts.length;

console.log('На цій сторінці завантажено скриптів: ' + scriptsCount);