getElementsByName() в JavaScript — елементи за name

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

Метод 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. Його здатність працювати з "живими" колекціями робить його особливо корисним для динамічних веб-додатків, де взаємодія з елементами сторінки є ключовою. Використання цього методу дозволяє розробникам легко маніпулювати групами елементів, спрощуючи реалізацію складних функціональних можливостей та підвищуючи загальну ефективність коду.

правити

Порада

Перш за все, зверніть увагу, що метод getElementsByName() повертає колекцію елементів, які мають заданий атрибут name. Це означає, що результатом виклику буде об'єкт NodeList, навіть якщо знайдено лише один елемент. Отже, для доступу до конкретного елемента вам потрібно буде використовувати індексацію, наприклад: document.getElementsByName("username")[0].

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

Порада

Використання методу getElementsByName() може бути особливо корисним при роботі з формами, де елементи часто мають унікальні імена. Це дозволяє легко отримати доступ до даних, введених користувачем, або ж до елементів форми для їхньої маніпуляції. Наприклад, якщо вам потрібно перевірити значення поля введення з ім'ям email, ви можете зробити це, використовуючи document.getElementsByName("email")[0].value.

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

Порада

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

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

Порада

Не забувайте, що метод getElementsByName() є чутливим до випадків, коли елементи з відповідним ім'ям відсутні на сторінці. У таких випадках метод поверне пусту колекцію. Тому перед використанням результатів важливо перевірити, чи колекція не є пустою, щоб уникнути помилок виконання. Це можна зробити за допомогою перевірки властивості length отриманого об'єкта NodeList, наприклад: if(document.getElementsByName("userInput").length > 0) { /* Операції з елементами */ }.

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

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

Параметри

name

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

автор: Bond

правити

Повернення

NodeList

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

автор: Bond

правити

Переглядачі

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

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

Переглядач
	1	58	4	5	12	5

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

Переглядач
	4.4	18	58	3.2

Приклади

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

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

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

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

// 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";
    }
  }
}

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

<header>
  <h2 class="title">Document.getElementsByName()</h2>
  <p class="description">Повертає NodeList, який містить усі елементи з вказаним атрибутом name.</p>
</header>
<main>
  <div>
    <label><input type="checkbox" name="interest" value="Програмування"> Програмування</label>
    <label><input type="checkbox" name="interest" value="Дизайн"> Дизайн</label>
    <label><input type="checkbox" name="interest" value="Маркетинг"> Маркетинг</label>
  </div>
  <button onclick="showSelectedInterests()">Показати вибрані інтереси</button>
  <div class="result" id="selectedInterests"></div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  margin-top: 15px;
}

function showSelectedInterests() {
  var interests = document.getElementsByName("interest");
  var selectedInterests = [];

  for (var i = 0; i < interests.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (interests[i].checked) {
      selectedInterests.push(interests[i].value);
    }
  }window.CP.exitedLoop(0);

  var displayArea = document.getElementById("selectedInterests");
  displayArea.innerHTML = "<ul>" + selectedInterests.map(function (interest) {
    return "<li>" + interest + "</li>";
  }).join("") + "</ul>";
}
//# sourceURL=pen.js