logo

Об'єктна модель документа

  1. Об'єкт документа
  2. Властивості об'єкта документа
  3. Методи об'єкта документа
  4. Приклад об'єкта документа

The об'єкт документа представляє весь документ html.

Коли документ html завантажується в браузер, він стає об’єктом документа. Це кореневий елемент який представляє документ html. Він має властивості та методи. За допомогою об’єкта документа ми можемо додавати динамічний вміст до нашої веб-сторінки.

Як згадувалося раніше, це об'єкт window. Так

 window.document 

Те саме, що

 document 

Згідно з W3C - «Об’єктна модель документа W3C (DOM) — це платформа та нейтральний щодо мови інтерфейс, який дозволяє програмам і сценаріям динамічно отримувати доступ і оновлювати вміст, структуру та стиль документа».


Властивості об'єкта документа

Давайте подивимося властивості об’єкта документа, до яких може отримати доступ і змінити об’єкт документа.


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

Ми можемо отримати доступ і змінити вміст документа за допомогою його методів.

Нижче наведено важливі методи об’єкта документа:

vlc media player завантажити youtube
методопис
write('рядок')записує вказаний рядок у документ.
writeln('рядок')записує вказаний рядок у документ із символом нового рядка в кінці.
getElementById()повертає елемент із вказаним значенням id.
getElementsByName()повертає всі елементи, що мають задане значення імені.
getElementsByTagName()повертає всі елементи, що мають задану назву тегу.
getElementsByClassName()повертає всі елементи, що мають вказане ім’я класу.

Доступ до значення поля за об’єктом документа

У цьому прикладі ми збираємося отримати значення введеного тексту користувачем. Ось ми використовуємо document.form1.name.value щоб отримати значення поля імені.

тут, документ є кореневим елементом, який представляє документ html.

форма1 це назва форми.

назва це ім'я атрибута вхідного тексту.

значення властивість, яка повертає значення введеного тексту.

Давайте подивимося на простий приклад об’єкта документа, який друкує назву з вітальним повідомленням.

 function printvalue(){ var name=document.form1.name.value; alert('Welcome: '+name); } Enter Name: 

Результат наведеного вище прикладу

Введіть ім'я: