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

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

Властивість anchors об'єкта Document в JavaScript є частиною Документаційного Об'єктового Моделю (ДОМ), яка надає можливість доступу до всіх якорів (<a> елементів з атрибутом name) в документі. Ця властивість відіграє важливу роль у навігації та організації інтерфейсу користувача веб-сторінки, дозволяючи програмістам легко отримувати доступ до якорів та використовувати їх для різноманітних задач, зокрема для створення динамічних посилань, навігації в документі або як частини складніших веб-додатків.

Використання властивості anchors є прямолінійним. Вона повертає живу колекцію об'єктів, які представляють всі <a> елементи в документі, що мають атрибут name. Важливо зауважити, що ця колекція є "живою", тобто автоматично оновлюється при зміні відповідних елементів у ДОМ. Це означає, що програмісти можуть динамічно додавати, видаляти чи змінювати якорі в документі, і зміни будуть відображатися в колекції, поверненій властивістю anchors.

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

var _anchors = document.anchors;

Після цього можна ітерувати по отриманій колекції, використовуючи цикл for або методи масивів (наприклад, forEach, якщо перед цим конвертувати колекцію в масив), для виконання різноманітних операцій, наприклад, зміни властивостей якорів, їх атрибутів, або для створення нових взаємодій на сторінці.

Ось приклад коду, який виводить href атрибути всіх якорів з атрибутом name в документі:

Array.from(document.anchors).forEach(anchor => console.log(anchor.href));

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

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

правити

Порада

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

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

Порада

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

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

Порада

Хоча document.anchors є корисною властивістю для роботи з якорями, важливо пам'ятати про сумісність і доступність. Переконайтеся, що ваша веб-сторінка залишається доступною навіть у випадку, якщо браузер користувача не підтримує цю властивість або вона використовується разом з сучасними методами навігації, такими як використання id для якорів. Розгляньте альтернативні методи для забезпечення доступності, наприклад, використання атрибутів aria або поліпшення семантики веб-сторінки.

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

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

Синтаксис

Document.anchors

Переглядачі

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

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

Переглядач
	1	1	1	12.1	12

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

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

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

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

Приклади

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

// Отримуємо усі елементи, які є якорями на сторінці
var anchors = document.anchors;

// Виводимо кількість якорів у консоль
console.log(anchors.length);

// Перебираємо отриманий список якорів і виводимо їх імена
for (var i = 0; i < anchors.length; i++) {
    console.log(anchors[i].name);
}

// Створюємо новий елемент <ul> для навігаційного меню
var menu = document.createElement('ul');

// Отримуємо усі якорі на сторінці
var anchors = document.anchors;

// Перебираємо якорі та створюємо пункти меню
for (var i = 0; i < anchors.length; i++) {
    var li = document.createElement('li');
    var a = document.createElement('a');
    a.href = '#' + anchors[i].name; // Встановлюємо посилання на якір
    a.textContent = anchors[i].textContent || anchors[i].name; // Встановлюємо текст посилання
    li.appendChild(a);
    menu.appendChild(li);
}

// Додаємо створене меню до документа
document.body.insertBefore(menu, document.body.firstChild);