HTML DOM: Как да използвам обектния модел на документ



Тази статия ще ви предостави подробни и всеобхватни познания за HTML DOM, обектен модел на документ с примери.

Обектът Document представлява документ, който се показва в този прозорец. Обектът Document има различни свойства, които се отнасят до други обекти, които позволяват достъп и модификация на съдържанието на документа. В тази статия ще разберем HTML DOM.

HTML DOM концепция

Начинът на достъп и модифициране на документирано съдържание се нарича Модел на обект на документ или DOM. Обектите са организирани в йерархия. Тази йерархична структура се прилага за организацията на обекти в уеб документ.





  • Обект на прозореца и минус в горната част на йерархията. Това е най-големият елемент от йерархията на обекта.
  • Обект на документ & минус Всеки HTML документ, който се зарежда в прозорец, се превръща в обект на документ. Документът съдържа съдържанието на страницата.
  • Обект на формуляр и минус Всичко, затворено в етикетите ..., задава обекта на формуляр.
  • Елементи за управление на формуляра & минус Обектът на формуляр съдържа всички елементи, дефинирани за този обект, като текстови полета, бутони, радио бутони и квадратчета за отметка.

Какво представлява HTML DOM

Обектният модел на документ е API за програмиране на документи. Самият обектен модел наподобява структурата на документите, които моделира. Например, помислете за тази таблица, взета от HTML документ:

 
Сянката горичка Еолова
Над реката, Чарли Дориан

Какво е HTML DOM НЕ

Този раздел е предназначен да даде по-точно разбиране на обектния модел на документ, като го разграничава от други системи, които може да изглеждат като него.



Въпреки че обектният модел на документ е силно повлиян от динамичен HTML, в ниво 1 той не прилага всички динамични HTML. По-специално, събитията все още не са дефинирани. Ниво 1 е създадено, за да постави стабилна основа за този вид функционалност, като осигури здрав, гъвкав модел на самия документ.

Обектният модел на документ не е двоична спецификация. Програмите на обектния модел на документ, написани на един и същ език, ще бъдат съвместими с изходния код на различни платформи, но обектният модел на документ не дефинира никаква форма на двоична оперативна съвместимост.

прилагане на анализ на големи данни

Обектният модел на документ не е начин за запазване на обекти в XML или HTML. Вместо да указва как обектите могат да бъдат представени в XML, обектният модел на документа указва как XML и HTML документите се представят като обекти, така че да могат да се използват в обектно-ориентирани програми.



HTML DOM НЕ Е

Обектният модел на документ не е набор от структури от данни, той е обектен модел, който определя интерфейси. Въпреки че този документ съдържа диаграми, показващи връзки родител / дете, това са логически връзки, дефинирани от интерфейсите за програмиране, а не представяния на някакви конкретни вътрешни структури от данни.

Обектният модел на документ не дефинира „истинската вътрешна семантика“ на XML или HTML. Семантиката на тези езици се определя от самите езици.

Обектният модел на документ е програмен модел, предназначен да зачита тази семантика. Обектният модел на документ няма последствия за начина, по който пишете XML и HTML документи, всеки документ, който може да бъде написан на тези езици, може да бъде представен в обектния модел на документ.

Обектният модел на документа, въпреки името си, не е конкурент на компонентния обектен модел (COM). COM, подобно на CORBA, е независим от езика начин за определяне на интерфейси и обекти. Обектният модел на документ е набор от интерфейси и обекти, предназначени за управление на HTML и XML документи. DOM може да бъдевнедрен с помощта на езиково независими системи като COM или CORBA, той може да бъде реализиран и с помощта на специфични за езика обвързвания като обвързванията Java или ECMAScript, посочени в този документ.

Откъде идва обектният модел на документа

Обектният модел на документ възниква като спецификация, за да позволи на JavaScript скриптовете и Java програмите да бъдат преносими сред уеб браузърите. Динамичният HTML беше непосредственият предшественик на обектния модел на документ и първоначално се смяташе за браузъри.

анализ на настроенията в Twitter чрез използване на искра

Когато обаче беше сформирана Работната група за обектни модели на документи, към нея се присъединиха и доставчици в други домейни, включително редактори на HTML или XML и хранилища на документи. Няколко от тези доставчици са работили с SGML, преди XML да бъде разработен в резултат на това, обектният модел на документ е повлиян от SGML Groves и стандарта HyTime. Някои от тези доставчици също бяха разработили свои собствени обектни модели за документи, за да предоставятAPI за програмиране за SGML / XML редактори или хранилища на документи и тези обектни модели също са повлияли на обектния модел на документ.

Свойства на HTML DOM

Нека да видим свойствата на обектите на документа, които могат да бъдат достъпни и модифицирани от обекта на документа.

DOM-Graph
  1. Обект на прозореца: Window Object винаги е в горната част на йерархията.
  2. Обект на документ: Когато HTML документ се зареди в прозорец, той се превръща в обект на документ.
  3. Обект на формуляр: Той е представен от форма етикети.
  4. Обекти на връзки: Той е представен от връзка етикети.
  5. Котвени обекти: Той е представен от href етикети.
  6. Елементи за контрол на формуляра: Формулярът може да има много контролни елементи като текстови полета, бутони, радиобутони и квадратчета за отметка и т.н.

Методи на обект на документ :

  1. запис („низ“): записва дадения низ в документа.
  2. getElementById (): връща елемента с дадената стойност на id.
  3. getElementsByName (): връща всички елементи с дадената стойност на името.
  4. getElementsByTagName (): връща всички елементи с дадено име на етикет.
  5. getElementsByClassName (): връща всички елементи с дадено име на клас.

Намиране на HTML елементи

Когато искате да получите достъп до HTML елементи с JavaScript, първо трябва да намерите елементите.

Има няколко начина да направите това:

  • Намиране на HTML елементи по id
  • Намиране на HTML елементи по име на етикет
  • Намиране на HTML елементи по име на клас

Намиране на HTML елемент по Id

Най-лесният начин да намерите HTML елемент в DOM е като използвате идентификатора на елемента.

Пример

Намиране на HTML елементи по име на етикет

Този пример намира елемента с id = ”main” и след това намира всички

елементи вътре в „main“:

С това стигнахме до края на тази статия в HTML DOM. Надявам се, че сте разбрали различните аспекти на HTML DOM, обектния модел на документа.

финал срещу окончателно срещу финализиране

Вижте нашите което се предлага с обучение под ръководството на инструктори на живо и опит в реалния живот на проекти. Това обучение ви кара да владеете умения за работа с back-end и front-end уеб технологии. Включва обучение по уеб разработка, jQuery, Angular, NodeJS, ExpressJS и MongoDB.

Имате въпрос към нас? Моля, споменете го в раздела за коментари в блога „HTML изображения“ и ние ще се свържем с вас.