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 */ }`.
Порада:	Метод `namedItem()` можна використовувати не лише з формами, але й з іншими колекціями елементів DOM, такими як `document.images` або `document.links`. Це дозволяє легко отримувати доступ до зображень, посилань та інших елементів за їхніми `name` або `id` атрибутами.
Порада:	Якщо у вашому коді є кілька елементів з однаковими `name` або `id` атрибутами, метод `namedItem()` поверне лише перший знайдений елемент. У такому випадку, для отримання всіх відповідних елементів, використовуйте інші методи, такі як `document.querySelectorAll()` або `document.getElementsByName()`.

Синтаксис

HTMLCollection.namedItem(key)

Параметри

Return

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

Переглядачі

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

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

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

Приклади

У цьому прикладі ми створюємо форму для додавання нового продукту. Користувач може ввести назву продукту, ціну та вибрати категорію з випадаючого списку. Ми використовуємо метод namedItem() для отримання доступу до елементів форми за їхніми name атрибутами.

Спочатку ми отримуємо форму та випадаючий список категорій за допомогою document.getElementById() та form.elements.namedItem('product-category') відповідно. Потім ми динамічно додаємо початкові категорії до випадаючого списку, використовуючи масив categories.

Також ми додаємо кнопку "Додати категорію", яка дозволяє користувачеві додавати нові категорії до випадаючого списку. При натисканні на кнопку ми показуємо діалогове вікно для введення назви нової категорії, створюємо новий елемент option і додаємо його до випадаючого списку за допомогою методу add().

Коли користувач заповнює форму і натискає кнопку "Додати продукт", ми перехоплюємо подію submit і запобігаємо стандартній поведінці форми за допомогою e.preventDefault(). Потім ми отримуємо значення полів форми за їхніми name атрибутами, використовуючи form.elements.namedItem('product-name'), form.elements.namedItem('product-price') та categorySelect.options[categorySelect.selectedIndex].textContent. Нарешті, ми виводимо інформацію про новий продукт у блок product-info.


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

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

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

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

// Виводимо значення поля введення імені у консоль
console.log(nameInput.value);

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

<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>

JS довідник

JavaScript

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