Что люди подразумевают под "DOM Manipulation" и как мне это сделать?

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

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

Ответ 1

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

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

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

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

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.

Ответ 2

Это означает работу с Document Object Model, которая является API для работы с XML-документами.

Из w3 на DOM:

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

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

getElementById

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

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

Ответ 3

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

Ответ 4

D ocument

O bject

M odel

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

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

Ответ 5

Короче:

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

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