В этом руководстве вы узнаете, как использовать метод JavaScript getElementsByName() для получения элементов с заданным именем в документе.
Каждый элемент HTML-документа может иметь name :
<input type="radio" name="language" value="JavaScript">
В отличие от id, несколько элементов HTML могут использовать один и тот же value атрибута name следующим образом:
<input type="radio" name="language" value="JavaScript"> <input type="radio" name="language" value="TypeScript">
Чтобы получить все элементы с указанным именем, используйте метод getElementsByName() объекта document :
let elements = document.getElementsByName(name);
getElementsByName() принимает name, который является значением атрибута name элементов, и возвращает NodeList элементов.
Возвращаемая коллекция элементов активна. Это означает, что возвращаемые элементы автоматически обновляются, когда элементы с одинаковыми именами вставляются и/или удаляются из документа.
Пример
В следующем примере показана группа переключателей, состоящая из переключателей с одинаковыми именами( rate ).
Когда вы выбираете переключатель и нажимаете кнопку отправки, на странице отображается выбранное значение, такое как Very Poor, Poor, OK, Good или Very Good :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript getElementsByName Demo</title>
</head>
<body>
<p>Please rate the service:</p>
<p>
<label for="very-poor">
<input type="radio" name="rate" value="Very poor" id="very-poor"> Very poor
</label>
<label for="poor">
<input type="radio" name="rate" value="Poor" id="poor"> Poor
</label>
<label for="ok">
<input type="radio" name="rate" value="OK" id="ok"> OK
</label>
<label for="good">
<input type="radio" name="rate" value="Good"> Good
</label>
<label for="very-good">
<input type="radio" name="rate" value="Very Good" id="very-good"> Very Good
</label>
</p>
<p>
<button id="btnRate">Submit</button>
</p>
<p id="output"></p>
<script>
let btn = document.getElementById('btnRate');
let output = document.getElementById('output');
btn.addEventListener('click',() => {
let rates = document.getElementsByName('rate');
rates.forEach((rate) => {
if(rate.checked) {
output.innerText = `You selected: ${rate.value}`;
}
});
});
</script>
</body>
</html>Как это работает:
- Сначала выберите кнопку отправки по ее идентификатору btnRate, используя метод getElementById().
- Во-вторых, прослушайте событие нажатия кнопки отправки.
- В-третьих, получите все переключатели с помощью
getElementsByName()и покажите выбранное значение в выходном элементе.
Обратите внимание, что о таких событиях, как click, вы узнаете позже. А пока вам просто нужно сосредоточиться на getElementsByName().
Заключение
getElementsByName()возвращаетNodeListэлементов с указанным именем.NodeList— это объект, подобный массиву, но не объект массива.