Пример: В этом примере мы используем идентификатор HTML-элемента для поиска HTML-элемента DOM.
<!DOCTYPE html>
<html>
<body>
<h2>GeeksforGeeks</h2>
<!--In this e.g. We find HTML Elements by Id in DOM -->
<p id="intro">A Computer Science portal for geeks.</p>
<p>This example illustrates the <b>getElementsById</b> method.</p>
<p id="demo"></p>
<script>
const element = document.getElementById("intro");
document.getElementById("demo").innerHTML =
"GeeksforGeeks introduction is: " + element.innerHTML;
</script>
</body>
</html>
Выход:
В этом посте мы обсудим объектную модель документа(DOM) вместе с ее свойствами и методами, используемыми для управления документом.
Объектная модель документа (DOM) — это программный интерфейс для документов HTML и XML(Расширяемый язык разметки). Он определяет логическую структуру документов и способ доступа к документу и управления им.
Примечание: Это называется логической структурой, потому что DOM не определяет никаких отношений между объектами.
DOM — это способ представления веб-страницы в структурированном иерархическом виде, чтобы программистам и пользователям было проще просматривать документ. С помощью DOM мы можем легко получать доступ к тегам, идентификаторам, классам, атрибутам или элементам и управлять ими, используя команды или методы, предоставляемые объектом документа.
Почему требуется DOM?
HTML используется для структурирования веб-страниц, а Javascript используется для добавления поведения на наши веб-страницы. Когда HTML-файл загружается в браузер, javascript не может напрямую понять HTML-документ. Итак, создается соответствующий документ(DOM). DOM-это в основном представление одного и того же HTML-документа, но в другом формате с использованием объектов. Javascript легко интерпретирует DOM, т. е. javascript не может понять теги(<h1>H<h1></h1>) в HTML-документе, но может понять объект h1 в DOM. Теперь Javascript может получить доступ к каждому из объектов (h1, p и т.д.) С помощью различных функций.
Структура DOM: DOM можно рассматривать как дерево или Лес(более одного дерева). Термин структурная модель иногда используется для описания древовидного представления документа. Одним из важных свойств моделей структуры DOM является структурный изоморфизм: если любые две реализации DOM используются для создания представления одного и того же документа, они создадут одну и ту же модель структуры с точно такими же объектами и отношениями.
Почему называется Объектной моделью?
Документы моделируются с использованием объектов, и модель включает в себя не только структуру документа, но и поведение документа и объектов, из которых он состоит, например, элементы тегов с атрибутами в HTML.
Свойства DOM: Давайте посмотрим свойства объекта документа, которые могут быть доступны и изменены объектом документа.
- Window Object: Объект окна всегда находится на вершине иерархии.
- Document object: Когда HTML-документ загружается в окно, он становится объектом документа.
- Form Object: Он представлен тегами формы.
- Link Object: Он представлен тегами ссылок.
- Anchor Object: Он представлен тегами href.
- Form Control Elements: Форма может содержать множество элементов управления, таких как текстовые поля, кнопки, переключатели, флажки и т.д.
Методы объекта документа:
- write(“string”): записывает заданную строку в документ.
- getElementById(): возвращает элемент, имеющий заданное значение идентификатора.
- getElementsByName(): возвращает все элементы, имеющие заданное значение имени.
- getElementsByTagName(): возвращает все элементы, имеющие заданное имя тега.
- getElementsByClassName(): возвращает все элементы, имеющие заданное имя класса.
Пример:
<table>
<ROWS>
<tr>
<td>Car</td>
<td>Scooter</td>
</tr>
<tr>
<td>MotorBike</td>
<td>Bus</td>
</tr>
</ROWS>
</table>
Чем DOM не является?
- Объектная модель документа не является двоичным описанием, где она не определяет двоичный исходный код в своих интерфейсах.
- Объектная модель документа не используется для описания объектов в XML или HTML, в то время как DOM описывает XML и HTML-документы как объекты.
- Объектная модель документа не представлена набором структур данных; это интерфейс, который определяет представление объекта.
- Объектная модель документа не показывает критичность объектов в документах, т. е. в ней нет информации о том, какой объект в документе соответствует контексту, а какой нет.
Уровни DOM:
- Уровень 0: Предоставляет низкоуровневый набор интерфейсов.
- Уровень 1: DOM уровень 1 может быть описан в двух частях: ОСНОВНОЙ и HTML.
- ЯДРО предоставляет низкоуровневые интерфейсы, которые можно использовать для представления любого структурированного документа.
- HTML предоставляет интерфейсы высокого уровня, которые можно использовать для представления HTML-документов.
- Уровень 2 : состоит из шести спецификаций: ЯДРО 2, ПРЕДСТАВЛЕНИЯ, СОБЫТИЯ, СТИЛЬ, ОБХОДи ДИАПАЗОН.
- ЯДРО 2: расширяет функциональные возможности ЯДРА, заданные уровнем DOM 1.
- ПРЕДСТАВЛЕНИЯ: представления позволяют программам динамически получать доступ к содержимому документа и управлять им.
- СОБЫТИЯ: События-это сценарии, которые либо выполняются браузером, когда пользователь реагирует на веб-страницу.
- СТИЛЬ: позволяет программам динамически получать доступ к содержимому таблиц стилей и управлять им.
- ОБХОД: позволяет программам динамически просматривать документ.
- ДИАПАЗОН: позволяет программам динамически определять диапазон содержимого в документе.
- Уровень 3: состоит из пяти различных спецификаций: CORE3, ЗАГРУЗКА и СОХРАНЕНИЕ, ПРОВЕРКА, СОБЫТИЯ и XPATH.
- CORE3: расширяет функциональные возможности ЯДРА, заданные уровнем DOM 2.
- ЗАГРУЗКА и СОХРАНЕНИЕ: позволяет программе динамически загружать содержимое XML-документа в документ DOM и сохранять документ DOM в XML-документе путем сериализации.
- ПРОВЕРКА: позволяет программе динамически обновлять содержимое и структуру документа, обеспечивая при этом, чтобы документ оставался действительным.
- СОБЫТИЯ: расширяет функциональные возможности событий, указанных на уровне DOM 2.
- XPATH: XPATH-это язык путей, который можно использовать для доступа к дереву DOM.
Пример манипуляции dom:
<!DOCTYPE html>
<html>
<head>
<title>DOM manipulation</title>
</head>
<body>
Enter Value 1 <input type="text" id="val1" />
<br />
<br />
Enter Value 2<input type=".text" id="val2" />
<br />
<br />
<button onclick="getAdd()">Click To Add</button>
<br />
<p id="result"></p>
<!-- Javascript code inside body tag -->
<script type="text/javascript">
function getAdd() {
//it will fetch the value of input with id val1
const num1 = Number(document.getElementById("val1").value);
//It will fetch the value of input with id val2
const num2 = Number(document.getElementById("val2").value);
//addition
const add = num1 + num2;
console.log(add);
//displaying the result in paragraph using dom
document.getElementById("result").innerHTML = "Addition : " + add;
//it will change the color of paragraph with red
document.getElementById("result").style.color = "red";
}
</script>
</body>
</html>
Выход:
