JS метод Document.getElementsByName()

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

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

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

Щодо практичного застосування, getElementsByName() часто використовується для роботи з формами. Наприклад, при зборі або валідації даних введених користувачем, цей метод дозволяє легко звернутися до елементів форми, таких як текстові поля, радіокнопки чи прапорці, що мають однакове ім'я. Таким чином, розробники можуть ефективно обробляти групи елементів як єдине ціле.

Розглянемо простий приклад використання getElementsByName():

// HTML документ містить кілька радіокнопок з іменем 'colorChoice'
// <input type="radio" name="colorChoice" value="red">
// <input type="radio" name="colorChoice" value="green">
// <input type="radio" name="colorChoice" value="blue">

// JavaScript код для отримання доступу до цих радіокнопок
var colors = document.getElementsByName('colorChoice');

// Ітерація по колекції для визначення, яка кнопка вибрана
for (var i = 0; i < colors.length; i++) {
    if (colors[i].checked) {
        console.log('Вибраний колір: ' + colors[i].value);
    }
}

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

Варто також згадати про розширені сценарії використання, де getElementsByName() може слугувати для динамічного оновлення контенту на сторінці. Наприклад, при зміні стану одного з елементів форми, можна автоматично оновити інші елементи, що мають те саме ім'я, для забезпечення консистентності даних або відображення пов'язаної інформації.

Підсумовуючи, метод getElementsByName() є потужним інструментом в арсеналі веб-розробника, що працює з JavaScript. Його здатність працювати з "живими" колекціями робить його особливо корисним для динамічних веб-додатків, де взаємодія з елементами сторінки є ключовою. Використання цього методу дозволяє розробникам легко маніпулювати групами елементів, спрощуючи реалізацію складних функціональних можливостей та підвищуючи загальну ефективність коду.

Синтаксис

Параметри

*name

Значення атрибуту name шуканих елементів.

Return

NodeList

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

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// HTML: Чекбокси для вибору категорій інформації
// <input type="checkbox" name="info" value="contacts"> Контакти
// <input type="checkbox" name="info" value="about"> Про нас
// <input type="checkbox" name="info" value="services"> Послуги

// JavaScript: Функція для відображення або приховування інформації
function toggleInfo() {
  var infoElements = document.getElementsByName("info");
  for (var i = 0; i < infoElements.length; i++) {
    var element = document.getElementById(infoElements[i].value);
    if (infoElements[i].checked) {
      element.style.display = "block";
    } else {
      element.style.display = "none";
    }
  }
}

// Викликати цю функцію при зміні стану чекбоксів

// Припустимо, у нас є форма з інпутами, які мають ім'я "userInput"

// Функція для зміни значення усіх інпутів з іменем "userInput"
function updateInputs(newValue) {
    // Отримуємо усі елементи за іменем
    var inputs = document.getElementsByName("userInput");
    
    // Перебираємо отриману колекцію та оновлюємо значення кожного інпута
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].value = newValue;
    }
}

// Викликаємо функцію `updateInputs` з новим значенням, наприклад, при події на сторінці
// Це може бути відповідь на клік кнопки або інша дія користувача
updateInputs("Нове значення");