phpjsJqueryhtmlcssblog

Element javascript синтаксис пример получение использование

"Element", что такое "element в js". Где и как используется, как получить доступ к "element"-у. Пример получения и использование элемента.

Подробно о том. что такое "element в javascript"

1. Что такое "element в javascript".
2. Пример получения "element-а в javascript"
3. Почему "element в javascript" объект?
4. Как использовать "element в javascript"

Скопировать ссылку



Что такое "element в javascript".

Для "element-а в javascript" можно дать несколько определений:

"Element в javascript" - это "Объект" - с помощью которого вы можете управлять всеми свойствами этого "Element"-а(как бы странно это не звучало!)

Одновременно "Element в javascript" это: участок HTML-кода в DOM-дереве.

Синтаксис "element-а в javascript".

var element = способ обратиться к тегу.

Пояснение к синтаксису "element-а в javascript".

var - один из способов объявления переменной.

element - объект/код html.

Способ - когда вы обращаетесь к тегу, то одним из способов обратиться к тегу вы получаете объект/код html "element-а".

О чем это вообще здесь говорится?

Когда-то я пытался понять, что пишут в учебниках и, естественно не мог понять ничего, а сейчас сам пишу как учебник - смайлы.

Это всего лишь вопрос знаний, а знания можно приобрести - если захотеть!

Поэтому, дальше, надеюсь, вы поймете, что такое "element".

Скопировать ссылку



Пример получения "element-а в javascript"

Для того, чтобы понять теорию "Что такое element в javascript" - нужен пример! Для этого вам понадобится:

Любой тег Html - пусть это будет div.

Для того, чтобы мы "просто" могли обратиться к тегу(определенному тегу, поскольку тегов div на странице миллион) добавим в первый тег id? с произвольным значением "example_id"

<div id="example_id">Текст внутри тега</div>

javascript

Далее нам потребуется javascript + тег script в него помещаем получение элемента с помощью getElementById.

Отправим елемент в консоль с помощью Console.log();

<script>

var example = document.getElementById('example_id');

console.log(example);

</script>

Разместим код прямо здесь:

Кроме текста, который внутри тега, вы здесь ничего не увидите... смотри ниже...

Текст внутри тега

Как увидеть element в консоли?

Если вы откроете консоль, то увидите наш "element"


Скопировать ссылку



Почему "element в javascript" объект?

- Но подождите! Где же объект? Кроме нашего тега, я не вижу никакого объекта! Где он?


- Как было описано выше, елемент - это кусок "html кода" - который и есть тот тег, который мы написали выше! Но и одновременно - это объект! Это доказывается очень просто... Для этого вам понадобится:

Html и javascript - выше вам показал... этот код писать заново не буду, а лишь повторю:

Html

<div id="example_id">Текст внутри тега</div>

javascript

<script>

var example = document.getElementById('example_id');

console.log(example);

</script>

Далее нам потребуется любой тег - логично использовать кнопку(button).

В тег помещаем onclick + alert и в круглые скобки помещаем нашу переменную с элементом внутри:

<button onclick="alert(example)">button</button>

Пример получения объекта "element-а в javascript"

Чтобы получить объект "element-а" нажмите кнопку "получить element"

получить element

Если вы нажали на кнопку, то увидели, что alert вам не покажет html код, а вернет вам сообщение, что это объект.

Скопировать ссылку



Как использовать "element в javascript"

Если вы смогли прочитать и что-то понять из первых пунктов, то поздравляю! Вы молодец!

Перейдем к самому интересному! - Но как использовать этот самый "element"?


Чтобы разобраться(примерно), для чего нужен данный элемент, давайте разберем это на примере, для этого вам понадобится:

Опять div + id

<div id="example_id_1">Текст внутри тега</div>

Опять button + onclick.

В onclick получаем елемент :

document.getElementById('example_id_1')

И далее... идет магия! После элемента пишем "точку" + добавляем какое-то свойство или метод, пусть это будет innerHTML равно(=) и какой-то другой текст...

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

Пример кода использования "element-а в javascript"

<div id="example_id_1">Текст внутри тега</div>

<button onclick="document.getElementById('example_id_1') . innerHTML ='Другой текст'">получить element</button>

Вывод примера использования "element-а в javascript"

Разместим выше приведенный код прямо здесь!

Для того, чтобы увидеть как использовать "element" - нажмите по кнопке "Использовать element"

Текст внутри тега
Использовать element

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---