Главная Новости

Обращение к элементам DOM

Опубликовано: 27.12.2017

видео Обращение к элементам DOM

Логика. 1. Понятие

Основное назначение JavaScript - это работа с элементами страницы. Используя объектную модель документа, можно обратиться к любому элементу страницы.



Встроенные свойства и методы объекта document позволяют найти любой элемент на странице и произвести с ним необходимые действия. Например, у каждого элемента есть свойство style , которое позволяет изменять CSS-стили элемента.

Для обращения к любому элементу страницы в DOM интерфейсе введены специальные поисковые методы. Поиск может осуществляется по разным параметрам элементов, поэтому с помощью них можно найти любой элемент.


Полное руководство по пришельцам. Чего ожидать? Виды разумных цивилизаций. С точки зрения науки

getElementById()

Объект document имеет встроенный метод getElementById(). Он выполняет поиск элемента по его уникальному идентификатору id .

document.getElementById(идентификатор) идентификатор Строка, содержащая уникальный идентификатор. <html> <head> <title>DOM интерфейс</title> </head> <body> <p>Lorem ipsum dolor...</p> <p id="last_paragraph">Deleniti sit veniam...</p> </body> </html> <script> var elem = document.getElementById('last_paragraph'); elem.style.background = '#599'; </script>

Lorem ipsum dolor...


Предопределенные элементы в 1С

Deleniti sit veniam...

При отображении страницы браузер автоматически создаёт глобальные свойства со ссылками на элементы, для которых указан уникальный идентификатор. Именами свойств являются сами идентификаторы. Таким образом, в JavaScript есть возможность быстрого обращения к элементу по его id.

<html> <head> <title>DOM интерфейс</title> </head> <body> <p id="first_paragraph">Lorem ipsum dolor...</p> <p id="last_paragraph">Deleniti sit veniam...</p> </body> </html> <script> window['first_paragraph'].style.background = 'gray'; /* или */ last_paragraph.style.background = '#599'; </script>

Lorem ipsum dolor...

Deleniti sit veniam...

Оперирование глобальными переменными может привести к ошибкам в программе. Более правильным является использование document.getElementById().

rss