Некоторые новшества при работе с DOM в библиотеки dart:dom

Для доступа к содержимому и операций с ним в HTML/XML документами используется  программный интерфейс DOM (Document Object Model), согласно которому, документ представляется в виде дерева, каждый узел которого может представлять собой элемент, атрибут элемента, текст или любой другой объект. Стандарт DOM предусматривает несколько различных способов поиска и выборки элементов внутри иерархии документа:

• getElementById() - получение элемента по его уникальному идентификатору
• getElementsByTagName() - получение массива элементов по типу
• getElementsByName() - получение массива элементов по имени
• getElementsByClassName() - получение массива элементов по имени класса
• querySelector() - выборка элемента по CSS селектору
• querySelectorAll() - выборка массива элементов по CSS селектору.

• document.links - коллекция всех ссылок в документе
• document.images - коллекция всех изображений в документе
• document.forms - коллекция всех форм
• document.scripts - коллекция всех скриптов

В библиотеки dart:html вместо всего этого множества способов предлагается использовать только два метода (на основе CSS селекторов) по получению групп и отдельных элементов - query(), queryAll(). Разработчики dart при это ссылаются на успех библиотеки jQuery, в которой основным механизмом выборки и обращения к элементам документа являются селекторы.

element.query('#article'); // получение элемента по уникальному идентификатору (id = article)
element.query('form'); // получение элемента form

element.queryAll('form'); // выборка группы элементов form
element.queryAll('.dot'); // выборка группы элементов с классом dot (class = dot)
element.queryAll('form.dot'); // выборка группы элементов form с классом dot (class = dot)

element.queryAll('[name="user"]'); // выборка группы элементов с имененм user (name = user)

element.queryAll('form label'); // выборка всех элементов label внутри элементов form

Коллекции элементов

В JavaScript коллекции элементов и атрибутов DOM не наследуются от встроенного объекта Array, что приводит к тому, что для работы с ними, приходится использовать специальные функции, отличные от стандартных. В библиотеки dart:html разработчиками эта проблема решена так, что элементы и атрибуты DOM и их массивы реализуют стандартные интрефейсы работы с коллекциями, тоесть, нет необходимости использовать дополнительные функции и методы:

// проверка наличие атрибута с заданным именем у элемента
element.hasAttribute('class'); // JavaScript
element.attributes.contains('class'); // Dart

// получение значения атрибута с заданным именем у элемента
element.getAttribute('src'); // JavaScript
element.attributes['src']; // Dart

// установка значения атрибута с заданным именем у элемента
element.setAttribute('src', 'value'); // JavaScript
element.attributes['src'] = 'value'; // Dart

// удаление атрибута
element.removeAttribute('name'); // JavaScript
element.attributes.remove('name'); // Dart

// проверка наличия дочерных узлов у элемента
element.hasChildNodes(); // JavaScrit
element.nodes.isEmpty(); // Dart

// получение первого потомка элемента
element.firstChild(); // JavaScript
element.nodes[0]; // Dart

// добавление нового потомка элемента
element.appendChild(child); // JavaScript
element.nodes.add(child); // Dart

Создание элементов

В JavaScript для создания новых элементов документа приходилось использовать методы документа - document.createElement('div'), в библиотеке dart:html для этих целий используются конструкторы объектов:

Element element = new Element.tag('div').

также можно использовать и более сложные конструкции, например, таблицу можно создать непосредственно из html разметки:

TableElement table = new Element.html('<table><tr><td>TABLE</td></tr></table>');