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Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
9 |
3 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
9 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад демонструє, як можна додавати та видаляти скрипти з документа динамічно. Користувач може включити чи виключити скрипт, використовуючи чекбокс. Статус скрипта відображається у блоку .result, де користувачі можуть бачити, чи активний скрипт на сторінці. Використовуючи цей приклад, ви можете продемонструвати практичне застосування document.scripts для управління скриптами HTML документів.
У цьому прикладі ми демонструємо базове використання властивості document.scripts, що дозволяє отримати доступ до колекції <script> елементів, вбудованих у веб-сторінку. Цей приклад показує, як можна визначити кількість скриптів, які зараз завантажені на сторінці.
// Отримуємо кількість скриптів на сторінці
var scriptsCount = document.scripts.length;
console.log('На цій сторінці завантажено скриптів: ' + scriptsCount);У цьому прикладі ми розглянемо більш складне застосування document.scripts, демонструючи, як можна динамічно замінити один скрипт на інший на веб-сторінці. Це може бути корисним для зміни функціоналу сторінки без необхідності її перезавантаження.
// Припустимо, ми хочемо замінити перший скрипт на новий
var oldScript = document.scripts[0]; // Отримуємо перший скрипт на сторінці
var newScript = document.createElement('script'); // Створюємо новий елемент скрипту
newScript.src = 'https://example.com/new-script.js'; // Вказуємо джерело нового скрипту
document.body.replaceChild(newScript, oldScript); // Замінюємо старий скрипт на новий
console.log('Перший скрипт було замінено на новий.');