Обход DOM дерева: легко дойти пешком Document Object Model

Обход дерева Document Object Model (DOM) часто требуется полезность, с помощью веб-разработчиков. Этот процесс в настоящее время довольно легко. Узнайте, как ходить DOM!

A+ A-

Обход различных моделей данных и структуры данных являются очень распространенным требованием в области разработки программного обеспечения. Веб-программисты также часто приходится иметь дело с объектной модели документа (DOM) веб-страницы или что-файла XML. Walking DOM дерева и манипулирования DOM узлов является обычным делом для веб-разработчиков. Поэтому, так как долгое время наблюдается потребность в простой и легкий способ доступа узлов в DOM. К счастью, теперь есть очень простой способ для обхода DOM.

С W3C определен интерфейс TreeWalker -Теперь вы можете быстро получить доступ к требуемым узлов. Метод createTreeWalker () может создать объект TreeWalker. Давайте посмотрим это на примере JavaScript:

 переменная ходок = document.createTreeWalker (RootNode, NodeFilter.SHOW_TEXT, нуль, ложь) 

Приведенный выше код создает дерево с корнем в качестве указанного RootNode. Это означает, что вы можете достать любой суб-дерева в DOM! И в случае, если вы заинтересованы в работе со всем DOM вы можете получить полное дерево с помощью элемента BODY, как корень. Элемент BODY охватывает весь видимый элемент на веб-странице.

Протест (как обычно!): Насколько я знаю, IE 8 (или меньше) не поддерживает этот метод. Firefox / Chrome / Opera поддерживают его. Надеюсь, IE 9 и выше, будут иметь поддержку этого метода. Вы можете проверить это в вашем браузере.

вар RootNode = document.getElementById ( 'корень')
переменная ходок = document.createTreeWalker (RootNode, NodeFilter.SHOW_TEXT, нуль, ложь) 

Разве это не красота ?! В первой строке, вы получите ручку на любом элементе его ID , а затем предоставить этот элемент метода createTreeWalker () , чтобы получить полный DOM дерево , под этим элементом.

JavaScript это красиво!

JavaScript это красиво!

Что больше ?! Можно также указать , какой тип узлов в поддереве вы хотите играть. NodeFilter Интерфейс определяет 15 различных констант , чтобы помочь вам в этом. Из этих констант, вы будете в основном использовать следующие:

NodeFilter.SHOW_ALL (для выбора всех узлов)
NodeFilter.SHOW_ELEMENT (для выбора только текстовые узлы)
NodeFilter.SHOW_ATTRIBUTE (для выбора только узлы атрибутов)
NodeFilter.SHOW_TEXT (для выбора только узлы элементов)

Вот пример функции, которая даст вам доступ ко всему тексту узлов:

Функция domwalker (корень) {
вар RootNode = document.getElementById (корень)
переменная ходок = document.createTreeWalker (RootNode, NodeFilter.SHOW_TEXT, нуль, ложь)

в то время как (walker.nextNode ()) {
// Сделайте что-нибудь с текущим узлом
}
}

Используя простой во время цикла, вы можете пройти через все узлы, присутствующие в DOM поддерева. В приведенном выше примере, к югу от дерева только с текстовыми узлами возвращается.

Обход DOM часто выполняется при разработке веб - приложений с помощью JavaScript, Perl, Python и т.д. Так , например, на другой день , когда мне нужно , чтобы рандомизировать список HTML , я должен был захватить все узлы LI , а затем перетасовать их. Хотя, в этом случае используется другой метод доступа к узлам.

Я надеюсь, что этот метод поможет вам в написании лучше и проще код.

Ads

Поделиться

последний

Лучшие альтернативы Ubuntu искать, если вы Linux Lover

Давайте начнем знакомство с чем-то; простой, но немного не ...

Как добавить подпись в Gmail Входящие - Добавить подпись Google в Gmail

Входящие с помощью Google была одна из лучших вещей, которы...

Еженедельно Tech News: Nokia, Google и Nintendo

Привет всем, это Пятница, 3 марта, и так же, как всегда, мы...

Raspberry Pi Проекты для начинающих - Что вы можете сделать с Raspberry Pi

Raspberry Pi представляет собой серию малой мощности, одноп...

Лучший VPN для Android 2017 года - Как использовать VPN в Android

Прошли те дни, когда виртуальные частные сети были только д...

Комментарии