DWWEB.RU
СКРИПТЫ

GetElementById как работает Пример

GetElementById - это замечательный метод и из самого названия вы уже сможете понять о чем примерно будет идти речь «Get» - получить, «Element» - элемент, «By» - из(в контексте), «Id» - идентификатор селектора.

Итого получилось перевод – «GetElementById» - получить элемент из идентификатора

1.

Иллюстрация работы getElementById :

Нам нужен див с идентификатором example и текстом внутри

<div id="example">Привет мир</div> Далее нам нужна кнопка при нажатии на которую должно срабатывать событие onclick
<button onclick="foo();">Нажми на меня</button> И скрипт с функцией + "document.getElementById" получим из "id=example" и выведем результат с помощью "alert" и innerHTML - получение содержания между тегами
<script> function  foo() {

peremennaya_0 = document.getElementById('example').innerHTML;  

alert(peremennaya_0);  }</script>  

Результат:

Привет мир
2.

Как получить данные из value с помощью getElementById

Пример №2 и это - всего лишь пример!

И для приближения понимания - нам понадобится новый пример

У нас есть вот такой блок div , и в ней есть value и из value хотим получить данные

<div id="example_1" value="сам такой" class= "syper">Привет мир</div>

Опять функция и отправим в скрипт...

<button onclick="foo_1();">Нажми на меня</button>

Обращаю ваше внимание на окончание "attributes.value.nodeValue" - откуда они вообще берутся!? Мы подробно поговорим в следующий раз, а для иллюстрации нажмите кнопку "Нажми на меня 2" и откройте код ctrl = U и найдите вкладку console - и вы увидите HTMLCollection - здесь есть все данные о нашем диве... и это все связано с переменной = peremennaya_2 из ниже идущего кода...

<script>

function  foo_1() {

peremennaya_1 = document.getElementById('example_1').attributes.value.nodeValue;

alert(peremennaya_1);

peremennaya_2 = document.getElementsByClassName('syper');

console.log(peremennaya_2);}

</script>  

Результат:

Привет мир

3.

Но мало того, что getElementById может получить, он может и отправлять!

Возьмем выше идущий код и все элементы, которые имеют нижнее подчеркивание "_" прибавим к каждому единицу.

К getElementById прибавим innerHTML и напишем новый текст, который и должен измениться вместо привет мир.

Код:

<div id="example_2">Привет мир</div>

<button onclick="foo_2();">Нажми на меня 3</button>

<script> function  foo_2() 

{

 document.getElementById('example_2').innerHTML = 'Показать новый текст';  

}

</script>

Результат:

Привет мир
Что-то похожее мы уже писали.

И вот несколько примеров, где много использовался getElementById

1. калькулятор
2. крестики нолики
Еще посмотри : javascript
Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Подписаться
Теги:
GetElementById как работает GetElementById как работает

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019