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

Что такое GetElementById, как использовать GetElementById , примеры, перевод. Обращение к тегу по его id

Все о методе GetElementById

1. Что такое GetElementById, как переводится
2. Пример использования GetElementById
3. Получение value с помощью GetElementById
4. Как отправить данные с помощью GetElementById
5. Получить название класса через GetElementById
6. Получить содержание style через GetElementById

Что такое GetElementById, как переводится

GetElementById это замечательный метод и из самого названия вы уже сможете понять о чем примерно будет идти речь.

Давайте в самом начале определим, "Что такое GetElementById".

GetElementById - это метод, с помощью которого можно обратиться к элементу страницы по его идентификатору "id"

Как переводится GetElementById

«Get» - получить,

«Element» - элемент,

«By» - из(в контексте), «id» - идентификатор селектора .

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

Я как-то рассматривал тему, как обратиться к тегу все известные способы, и GetElementById - это как раз один из тех методов!

Синтаксис getElementById:

document.getElementById("id");

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

Пример использования GetElementById

Для того, чтобы показать работу метода GetElementById сделаем дивdiv с id example и текстом внутри

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

Далее нам нужна кнопка при нажатии на которую должно срабатывать событие onclick

<button onclick="foo();">Получи данные с помощью GetElementById</button>

Сооружаем такую конструкцию, пишем document.getElementById, во внутрь кавычек помещаем наше название id-> example. И нам например нужно получить все содержание между тегами данного ид добавляем с точкой innerHTML. Полученную конструкцию оборачиваем скобками и выведем на экран результат получения данных с помощью getElementById

alert ( document.getElementById('example').innerHTML );

Соберем весь код вместе:

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

<button onclick="foo();">Получи данные с помощью GetElementById</button>

<script> function  foo() {

alert ( document.getElementById('example').innerHTML );

</script>  

Живой пример получения данных с помощью GetElementById:

Чтобы увидеть в реальности пример работы получения данных GetElementById, нажмите на кнопку Получи данные с помощью GetElementById
Привет мир
Получи данные с помощью GetElementById

Получение value с помощью GetElementById

Тему получения value с помощью GetElementById мы рассматривали -> здесь


Как отправить данные с помощью GetElementById

Для того, чтобы отправить данные в тег, как мы уже неоднократно говорили нужно обратиться к тегу, мы на данной странице используем для этого GetElementById

Нам в очередной раз понадобится тестовый блок/элемент с id:

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

Для того, чтобы увидеть передачу данных в тег с помощью GetElementById нам нужна кнопка:

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

Скрипт:

<script> function foo_2() { document.getElementById('example_2').innerHTML = 'Отправить новый текст'; }</script>

Соберем весь код вместе:

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

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

<script>

function foo_2() { document.getElementById('example_2').innerHTML = 'Отправить новый текст'; }

</script>

Живой пример передачи данных в тег с помощью getElementById

Привет мир
Нажми на меня 3

Получить название класса через GetElementById

Мы хотим получить название класса внутри тега!

У нас есть элемент/блок с id

<div id="id_div" class="example_class">class="example_class"</div>

Нам нужна кнопка, чтобы увидеть получения названия класса вживую:

<button id="id_example">Нажми на меня 3</button>

onclick сделаем немного по другому:

id_example . onclick = function(){
здесь действие }


Действие будет выглядеть так:

alert(document.getElementById("id_div").className );

Соберем весь код вместе:

<div id="id_div" class="example_class">class="Здесь блок с классом = example_class"</div>

<button id="id_example">Получи название класса через GetElementById</button>

<script>

id_example . onclick = function(){

alert(document.getElementById("id_div").className );

}

</script>

Живой пример получения названия класса с помощью GetElementById

Здесь блок с классом = example_class
Получи название класса через GetElementById

---

См. еще: добавить класс в javascript + удалить


Многие темы перекликаются между собой.

Получить содержание style через GetElementById

Для того, чтобы получить значение атрибута style, нам понадобится очередной блок/элемент с id:

<div id="id_div1" style="display:block">Здесь блок с style="display:block"</div>

Нам опять понадобится кнопка для получения теперь уже данных из атрибута attribute style

<button id="id_example1">Получи название класса через GetElementById</button>

Скрипт абсолютно аналогичный, см.выше.

Внутри скрипта, чуть изменим содержание добавим после скобок style.cssText:

alert(document.getElementById("id_div1").style.cssText );

Соберем весь код вместе

<div id="id_div1" style="display:block">Здесь блок с style="display:block"</div>

<button id="id_example1">Получи содержание атрибута style через GetElementById</button>

<script>

id_example1 . onclick = function(){

alert(document.getElementById("id_div1").style.cssText );

}

</script>

Живой пример получения данных из атрибута style

Здесь блок с style="display:block"
Получи содержание атрибута style через GetElementById

---

См. еще: display:block + display:none