Что люди имеют в виду под «Манипуляцией DOM» и как мне это сделать? - PullRequest
38 голосов
/ 14 октября 2010

Я всегда слышу, как люди говорят об DOM, манипулируют DOM, меняют DOM, пересекают DOM;но что именно это означает?

Что такое DOM и зачем мне с ним что-то делать?

Ответы [ 5 ]

43 голосов
/ 14 октября 2010

DOM - это, по сути, API, с помощью которого вы взаимодействуете с документом, и доступен на многих языках в виде библиотеки (JS является одним из этих языков).Браузер преобразует весь HTML-код вашей веб-страницы в дерево на основе вложенности.Откройте Firebug и посмотрите на структуру HTML.Это дерево, о котором я говорю.

Если вы хотите изменить любой HTML-код, вы можете взаимодействовать с DOM API для этого.

<html>
 <head><script src="file.js"></script></head>
 <body>blah</body>
</html>

В file.js Iможет ссылаться на тело, используя:

onload = function() {
    document.getElementsByTagName('body')[0].style.display='none';
}

getElementsByTagName - это метод объекта document.Я манипулирую элементом body, который является элементом DOM.Если бы я хотел пройти и найти, скажем, диапазон, я мог бы сделать это:

onload = function() {
 var els = document.getElementsByTagName('*');
 for ( var i = els.length; i--; ) {
    if ( els[i].nodeType == 1 && els[i].nodeName.toLowerCase() == 'span' ) {
       alert( els[i] )
    }
 }
}

Я перебираю nodeList, возвращенный getElementsByTagName во фрагменте выше, и ищу диапазон, основанный на nodeNameсвойство.

16 голосов
/ 14 октября 2010

Это означает работу с объектной моделью документов , которая является API для работы с XML-подобными документами.

С w3 на DOM :

Объектная модель документа - это независимый от платформы и языка интерфейс, который позволит программам и сценариям динамически получать доступ и обновлять содержимое, структуру и стиль документов.Документ может быть дополнительно обработан, и результаты этой обработки могут быть включены обратно в представленную страницу.Это обзор материалов, связанных с DOM, здесь, на W3C и в Интернете.

Одна из функций, наиболее часто используемых в работе DOM:

getElementById

Управление/ Изменение DOM означает использование этого API для изменения документа (добавление элементов, удаление элементов, перемещение элементов и т. Д.).

Обход DOM означает перемещение по нему - выбор определенных элементов, перебор групп элементови т.д ...

1 голос
/ 14 октября 2010

Просто вам нужно прочитать кое-что об этом, потому что какого-либо ответа, который я перечислю здесь, будет недостаточно, о нем есть книги.
Но вы можете получить ответ на свои вопросы, проверив:
http://en.wikipedia.org/wiki/Document_Object_Model
http://www.w3.org/DOM/
http://www.w3schools.com/htmldom/default.asp

0 голосов
/ 20 сентября 2017

Вкратце:

Когда загружается веб-страница, браузер создает объектную модель документа страницы, которая является объектно-ориентированнойпредставление документа HTML, который действует как интерфейс между JavaScript и самим документом, а позволяет создавать динамические веб-страницы.

Источник: w3schools - HTML DOM

0 голосов
/ 14 октября 2010

D ocument

O bject

M odel

Это DOM .Либо XML, либо HTML, либо похожий документ.Все эти термины означают синтаксический анализ документа и / или внесение в него изменений (обычно с использованием некоторых доступных инструментов, таких как JavaScript или C #).

Наилучшим примером DOM, когда люди используют эти термины, является документ HTML.в браузере.В этом случае вы можете манипулировать DOM, чтобы добавить что-то на веб-страницу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...