Объект Document представляет документ, отображаемый в этом окне. Объект Document имеет различные свойства, которые относятся к другим объектам, которые позволяют получить доступ к содержимому документа и изменить его. В этой статье мы разберемся с HTML DOM.
- Концепция HTML DOM
- Что такое HTML DOM
- Чем НЕ является HTML DOM
- Откуда взялась DOM
- Свойства HTML DOM
- Поиск элементов HTML
Концепция HTML DOM
Способ доступа к документированному контенту и его изменения называется Объектная модель документа , или DOM. Объекты организованы в иерархию. Эта иерархическая структура применяется к организации объектов в веб-документе.
- Окно объекта & минус Верх иерархии. Это высший элемент иерархии объектов.
- Объект документа & минус Каждый документ HTML, загружаемый в окно, становится объектом документа. Документ содержит содержимое страницы.
- Объект формы и минус Все, заключенное в теги…, устанавливает объект формы.
- Элементы управления формой & минус Объект формы содержит все элементы, определенные для этого объекта, такие как текстовые поля, кнопки, переключатели и флажки.
Что такое HTML DOM
Объектная модель документа - это программный API для документов. Сама объектная модель очень напоминает структуру моделируемых документов. Например, рассмотрим эту таблицу, взятую из HTML-документа:
| Shady Grove | Эолийский |
| За рекой, Чарли | Дориан |
Чем НЕ является HTML DOM
Этот раздел разработан, чтобы дать более точное понимание объектной модели документа, отличая ее от других систем, которые могут казаться ей похожими.
Хотя на объектную модель документа сильно повлиял динамический HTML, на уровне 1 он не реализует весь динамический HTML. В частности, события пока не определены. Уровень 1 предназначен для того, чтобы заложить прочную основу для такого рода функциональности, предоставляя надежную и гибкую модель самого документа.
Объектная модель документа не является двоичной спецификацией. Программы объектной модели документа, написанные на одном языке, будут иметь исходный код, совместимый на разных платформах, но объектная модель документа не определяет какую-либо форму взаимодействия двоичных файлов.
Объектная модель документа - это не способ сохранения объектов в XML или HTML. Вместо указания того, как объекты могут быть представлены в XML, объектная модель документа определяет, как документы XML и HTML представляются как объекты, чтобы их можно было использовать в объектно-ориентированных программах.
Объектная модель документа - это не набор структур данных, это объектная модель, определяющая интерфейсы. Хотя этот документ содержит диаграммы, показывающие родительские / дочерние отношения, это логические отношения, определенные интерфейсами программирования, а не представления каких-либо конкретных внутренних структур данных.
Объектная модель документа не определяет «истинную внутреннюю семантику» XML или HTML. Семантика этих языков определяется самими языками.
экземпляр класса java
Объектная модель документа - это модель программирования, разработанная с учетом этой семантики. Объектная модель документа не влияет на способ написания документов XML и HTML. Любой документ, который может быть написан на этих языках, может быть представлен в объектной модели документа.
Объектная модель документа, несмотря на свое название, не является конкурентом компонентной объектной модели (COM). COM, как и CORBA, представляет собой независимый от языка способ определения интерфейсов и объектов. Объектная модель документа - это набор интерфейсов и объектов, предназначенных для управления документами HTML и XML. DOM может бытьреализованный с использованием независимых от языка систем, таких как COM или CORBA, он также может быть реализован с использованием привязок для конкретного языка, таких как привязки Java или ECMAScript, указанные в этом документе.
Откуда появилась объектная модель документа
Объектная модель документа возникла как спецификация, позволяющая переносить сценарии JavaScript и программы Java между веб-браузерами. Динамический HTML был непосредственным предшественником объектной модели документа, и изначально о нем думали в основном в терминах браузеров.
Однако, когда была сформирована рабочая группа по объектной модели документа, к ней также присоединились поставщики из других областей, включая редакторы HTML или XML и репозитории документов. Некоторые из этих поставщиков работали с SGML до того, как был разработан XML, в результате на объектную модель документа повлияли SGML Groves и стандарт HyTime. Некоторые из этих поставщиков также разработали свои собственные объектные модели для документов, чтобы обеспечитьAPI программирования для редакторов SGML / XML или репозиториев документов, и эти объектные модели также повлияли на объектную модель документа.
Свойства HTML DOM
Давайте посмотрим на свойства объектов документа, которые могут быть доступны и изменены объектом документа.
Руководство по Microsoft SQL Server для начинающих
- Объект окна: Window Object всегда находится на вершине иерархии.
- Объект документа: Когда документ HTML загружается в окно, он становится объектом документа.
- Объект формы: Он представлен форма теги.
- Объекты ссылки: Он представлен ссылка на сайт теги.
- Якорные объекты: Он представлен href теги.
- Элементы управления формой: Форма может иметь множество элементов управления, таких как текстовые поля, кнопки, переключатели, флажки и т. Д.
Методы объекта документа :
- write («строка»): записывает данную строку в документ.
- getElementById (): возвращает элемент с заданным значением id.
- getElementsByName (): возвращает все элементы, имеющие заданное значение имени.
- getElementsByTagName (): возвращает все элементы с заданным именем тега.
- getElementsByClassName (): возвращает все элементы с заданным именем класса.
Поиск элементов HTML
Если вы хотите получить доступ к HTML-элементам с помощью JavaScript, вы должны сначала найти эти элементы.
Сделать это можно двумя способами:
- Поиск HTML-элементов по id
- Поиск элементов HTML по имени тега
- Поиск элементов HTML по имени класса
Поиск элемента HTML по идентификатору
Самый простой способ найти HTML-элемент в DOM - использовать идентификатор элемента.
пример
Поиск элементов HTML по имени тега
Этот пример находит элемент с id = 'main', а затем находит все
элементы внутри «main»:
На этом мы подошли к концу статьи о HTML DOM. Надеюсь, вы получили представление о различных аспектах HTML DOM, объектной модели документа.
Ознакомьтесь с нашими который включает в себя живое обучение под руководством инструктора и реальный проектный опыт. Это обучение позволит вам овладеть навыками работы с серверными и интерфейсными веб-технологиями. Он включает обучение веб-разработке, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
Есть вопрос к нам? Пожалуйста, укажите это в разделе комментариев блога «HTML-изображения», и мы свяжемся с вами.