GetElementsByName javascript, синтаксис, примеры, код!

Что такое getElementsByName? Как использовать "getElementsByName", примеры. Синтаксис "getElementsByName".

Подробно о getElementsByName.

1. Что такое getElementsByName
2. Пример использования getElementsByName
3. Пример 2 использования getElementsByName
4. Вывод, пример 3 использования getElementsByName

1. Что такое getElementsByName

Давайте разберемся, "что такое getElementsByName"?

Метод getElementsByName() объекта Document возвращает коллекцию элементов NodeList с заданным атрибутом name в документе.

Синтаксис getElementsByName

document.getElementsByName( String )

Параметры getElementsByName

String - строка js, значение атрибут name элемента(ов), который(которые) мы найдем.

2. Пример использования 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="Пример">

При попытке вывести результат(с помощью document.write или innerHTML) здесь, у вас получится:

Пример попытки вывода на экран результат getElementsByName.

Чтобы не оставалось вопросов, код вывода выше идущего примера(пункт 2 подпункт 3):

<div class=kod id=id_div></div>

<script>

var up_names = document.getElementsByName('up');

id_div.innerHTML = up_names [0] ;

</script>

3. Пример 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 подпункт 3):

<div class=kod id=id_div2></div>

<script>

var names = document.getElementsByName('example');

id_div2.innerHTML = names ;

</script>

4. Вывод : Пример 3 использования getElementsByName

Если вы что-то поняли из предыдущих пунктов поздравляю!

Если вы ничего не поняли, то тоже ничего страшного! Изучать новое всегда бывает не просто!

Итак...

Разберем ещё один пример, который покажет, что собственно "getElementsByName" - это очень полезная веСчь!

Повторим все тоже самое, но только получим значение из определенного атрибута внутри input.

Код почти под копирку из пункта 2, только добавим при выводе ".value".

Здесь нам консоль не потребуется, поскольку мы можем получить и вывести этот результат на экран с помощью innerHTML!

Для этого используем дополнительный div:

<div class=kod id=id_div3></div>

Нужно обратиться по id, значение отправим с помощью innerHTML :

Код получения результата с помощью 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, разместим выше приведенный код прямо здесь:

Всего комментариев : Comments+ 2.0

+ =