JAVA SCRIPT (DOM)
DOM
DOM (Document Object Model) – это объектная модель документа,
которая не зависит от платформы и языка программного интерфейса, и
позволяет программам и скриптам получить доступ к содержимому HTML-,
XHTML- и XML-документов, а также изменять из содержимое, структуру и
оформление таких документов.
DOM требуется для скриптов JavaScript, которые изменяю веб-страницу
динамически. Другими словами DOM – это инструмент, с помощью которого
JavaScript видит содержимое HTML-страницы и состояние браузера
window – глобальный объект JavaScript, который также является окном
браузера. При обращении к переменным или функциям, которые не
найдены локально, они ищутся в объекте window, поэтому при обращении к
переменным и функциям window это слово не указывается.
document – точка входа для получения содержимого веб-страницы (всего
DOM-дерева), а также обеспечивает функциональность, которая является
глобальной для документа, например, для получения элементов страницы,
URL-адреса страницы, или создания новых элементов в документе.
document является переменной (объектом) объекта window, поэтому при
обращении к document нам не нужно указывать window
2
ОБЪЕКТНАЯ МОДЕЛЬ БРАУЗЕРА
3
ПОЛУЧЕНИЕ DOM ЭЛЕМЕНТА
getElementById(‘id’),
getElementByClassName(‘className’),
getElementByTagName(‘tagName’) – это функции объекта document,
которые позволяют получить ссылку на DOM элемент, используя
определенный селектор – а именно класс, тэг, либо id. На данный момент
считаются устаревшими.
querySelector(‘css-selector’) – функция объекта document, которая
позволяет получить ссылку на DOM элемент, используя css-selector. Если
элемент не будет найдет, но функция вернет null. Если на странице будет
несколько элементов, которые соответствуют селектору, то вернется
только самый первый в иерархии.
querySelectorAll(‘css-selector’) – функция объекта document, которая
позволяет получить список (группу) элементов, которые соответствуют
указанному css-selector. Если ни один элемент не будет найдет, то функция
вернет null
4
ВЗАИМОДЕЙСТВИЕ С DOM ЭЛЕМЕНТОМ
Основное назначение JS – взаимодействовать со страницей и изменять свойства
элементов. DOM элемент, который мы получаем с помощью querySelector или
querySelectorAll являются объектами со свойствами, которые мы можем
динамически изменять
[Link] – объект, который содержит все CSS-свойства, и мы можем изменять
эти свойства динамически, как будто делаем это в CSS. При написании свойства
все “-” необхоимо менять на camelCase, например background-color здесь будет
выглядеть как backgroundColor
elem-innerHTML – переменная, в которой находится все содержимое элемента в
строковом формате
elem-className – переменная, в которой находится содержимое атрибута class
в строковом формате
[Link] – объект, который содержит список всех классов элемента, а
также предоставляющий удобный интерфейс для изменения атрибута class
• [Link](‘className’) – функция, которая позволяет добавить
класс (классы)
• [Link](‘className’) – функция, которая позволяет удалить
класс (классы)
• [Link](‘className’) – функция, которая позволяет добавить
класс (классы), если его нет, или удалить класс (классы), если они есть
5
ВЗАИМОДЕЙСТВИЕ С DOM ЭЛЕМЕНТОМ
6
7
DOM
8
9