GetElementsByName javascript, синтаксис, примеры, код!
Что такое getElementsByName? Как использовать "getElementsByName", примеры. Синтаксис "getElementsByName".
Подробно о getElementsByName.
- Что такое getElementsByName
- Пример использования getElementsByName
- Пример 2 использования getElementsByName
Вывод , пример 3 использования getElementsByName
Что такое getElementsByName
Давайте разберемся, "что такое getElementsByName"?
Метод getElementsByName() объекта Document возвращает коллекцию элементов NodeList с заданным атрибутом name в документе.
Синтаксис getElementsByName
Параметры getElementsByName
Пример использования getElementsByName
Для того, чтобы разобрать пример использования "getElementsByName" вам понадобится:
Используем input с "name":
<input type="text" name="up" value="Пример">
Далее используем "getElementsByName", внутрь ставим значение из "name" = "up".
В консоль выведем первую ячейку объекта/массива строка №3.
<script>
var up_names = document.getElementsByName('up');
console.log( up_names[0] );
</script>
Результат использования getElementsByName.
Помещаем input здесь:
Результат см. консоль первая строка. Вы там должны увидеть:
<input type="text" name="up" value="Пример">
При попытке вывести результат здесь, у вас получится:
Пример попытки вывода на экран результат getElementsByName.
Чтобы не оставалось вопросов, код вывода выше идущего примера(пункт 3(красный)):
<div class=kod id=id_div></div>
<script>
var up_names = document.getElementsByName('up');
id_div.innerHTML = up_names [0] ;
</script>
Пример 2 использования getElementsByName
Второй пример "использования getElementsByName" всё тоже самое, только получим все "инпуты", в данном случае, номер ячейки не будем указывать(строка №5).
<input type="text" name="example" value="Пример 1">
<input type="text" name="example" value="Пример 2">
<script>
var names = document.getElementsByName('example');
console.log( names );
</script>
Результат использования getElementsByName.
Помещаем (инпуты) здесь:
Результат см. консоль вторая строка. Вот, что там вы должны увидеть:
NodeList(2) [input, input]
0: input
1: input
length: 2
[[Prototype]]: NodeList
При попытке вывести результат здесь, у вас получится:
Пример попытки вывода на экран результат getElementsByName.
Чтобы не оставалось вопросов, код вывода выше идущего примера(пункт 3(красный)):
<div class=kod id=id_div2></div>
<script>
var names = document.getElementsByName('example');
id_div2.innerHTML = names ;
</script>
Вывод : Пример 3 использования getElementsByName
Если вы что-то поняли из предыдущих пунктов поздравляю!
Если вы ничего не поняли, то тоже ничего страшного! Изучать новое всегда бывает не просто!
Разберем ещё один пример, который покажет, что собственно "getElementsByName" - это очень полезная веСчь!
Повторим все тоже самое, но только получим значение из определенного атрибута внутри input.
Код почти под копирку из пункта 2, только добавим при выводе ".value".
Здесь нам консоль не потребуется, поскольку мы можем получить и вывести этот результат на экран!
Для этого используем дополнительный div:
<div class=kod id=id_div3></div>
Нужно обратиться к тегу по id, значение отправим с помощью innerHTML(строка 5):
Код получения результата с помощью getElementsByName
Соберем весь код "получения результата с помощью getElementsByName" прямо здесь:
<input type="text" name="g_name" value="Пример 2">
<div class=kod id=id_div2></div>
<script>
var get_name = document.getElementsByName('g_name');
id_div3.innerHTML = get_name[0].value;
</script>
Пример получения результата с помощью getElementsByName
Ну и нам осталось посмотреть результат работы getElementsByName, разместим выше приведенный код прямо здесь:
Что можно сделать!?
Поделиться ссылкой! C друзьями или врагами!