JS метод Collection.namedItem()

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

namedItem() є методом об'єкта HTMLCollection, який дозволяє отримати елемент колекції за його name або id атрибутом. Цей метод є особливо корисним при роботі з формами, оскільки він забезпечує зручний спосіб отримання доступу до елементів форми, таких як поля введення, випадаючі списки та кнопки, без необхідності використовувати їхні індекси або ітерувати по всій колекції.

Синтаксис методу namedItem() виглядає наступним чином:

htmlCollection.namedItem(name)

Тут htmlCollection є об'єктом HTMLCollection, а name - рядок, який містить name або id атрибут елемента, який потрібно отримати.

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

const form = document.getElementById('registration-form');
const usernameInput = form.elements.namedItem('username');

У цьому прикладі ми спочатку отримуємо форму за її id, а потім використовуємо namedItem('username') для отримання поля введення імені користувача за його name атрибутом.

Метод namedItem() також можна використовувати з іншими колекціями елементів DOM, такими як document.images або document.links. Наприклад, щоб отримати посилання на головну сторінку сайту, можна виконати:

const homeLink = document.links.namedItem('home');

Якщо елемент з вказаним name або id не знайдено, метод namedItem() поверне null. Тому важливо завжди перевіряти результат на null перед використанням отриманого елемента.

У складніших випадках, коли потрібно отримати кілька елементів з однаковими name або id атрибутами, метод namedItem() не буде корисним, оскільки він повертає лише перший знайдений елемент. У такій ситуації варто використовувати інші методи, такі як document.querySelectorAll() або document.getElementsByName().

Загалом, метод namedItem() є зручним інструментом для роботи з формами та іншими колекціями елементів DOM, оскільки він дозволяє отримувати доступ до елементів за їхніми name або id атрибутами, що робить код більш читабельним і легшим для підтримки. Однак важливо розуміти його обмеження та використовувати інші методи, коли це необхідно.

правити

Порада

Пам'ятайте, що метод namedItem() повертає null, якщо елемент з вказаним name або id не знайдено. Тому завжди перевіряйте результат на null перед використанням отриманого елемента. Наприклад: const usernameInput = form.elements.namedItem('username'); if (usernameInput) { /* робота з usernameInput */ }.

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

Порада

Метод namedItem() можна використовувати не лише з формами, але й з іншими колекціями елементів DOM, такими як document.images або document.links. Це дозволяє легко отримувати доступ до зображень, посилань та інших елементів за їхніми name або id атрибутами.

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

Порада

Якщо у вашому коді є кілька елементів з однаковими name або id атрибутами, метод namedItem() поверне лише перший знайдений елемент. У такому випадку, для отримання всіх відповідних елементів, використовуйте інші методи, такі як document.querySelectorAll() або document.getElementsByName().

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

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

Синтаксис

HTMLCollection.namedItem(key)

Повернення

element

Повертає елемент DOM або null. Якщо в колекції HTMLCollection є елемент, який відповідає вказаному name або id, метод поверне перший знайдений елемент. Якщо жоден елемент не відповідає вказаному name або id, метод поверне null.

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<form id="contact-form" name="contact-form">
    <input name="name" value="Лесь">
</form>

// Отримуємо форму за її іменем
const form = document.forms.namedItem('contact-form');

// Отримуємо поле введення імені за його name
const nameInput = form.elements.namedItem('name');

console.log(nameInput.value); // 'Лесь'

<form id="registration-form">
  <label>
    Ім'я:
    <input type="text" name="name">
  </label>
  <label>
    Роль:
    <select name="role"></select>
  </label>
  <button type="submit">Зареєструватися</button>
</form>
```

<script>
// Отримуємо форму за її id
const form = document.forms.namedItem('registration-form');

// Отримуємо випадаючий список ролей за його name
const roleSelect = form.elements.namedItem('role');

// Масив доступних ролей
const roles = ['Користувач', 'Модератор', 'Адміністратор'];

// Додаємо опції до випадаючого списку
roles.forEach(role => {
  const option = document.createElement('option');
  option.value = role.toLowerCase();
  option.textContent = role;
  roleSelect.add(option);
});
</script>