Понимание Document.createElement()

Я использую GWT и его основу DOM возможностей.

То, что я в основном пытаюсь достичь, это:

  • Есть div элемент, содержащий некоторый текст
  • Некоторые из этих текстов будут окружены span элементы
  • Элементы span можно перетаскивать друг в друга и предлагают контекстные меню
  • новый span конечные пользователи могут динамически создавать элементы

Вот как это может выглядеть:

Вот как это может выглядеть

При запуске приложения и во время динамического создания конечных пользователей spansЯ должен сделать некоторые Element а также Nodes манипуляции (создание, вставка, изменение, удаление). Чтобы достичь этого, я должен пройти через дерево DOM, чтобы найти конкретные элементы.

Я ищу способы уменьшить бесполезное время, затрачиваемое на запуск приложения, где я собираю div элемент (содержащий весь текст и span элементы).

Возьмите этот пример:

DivElement outermostDiv = Document.get().createDivElement();
processText(outermostDiv, text); // text could be a Java String element
turnTheseIntoSpans(listOfSpans, outermostDiv); // listOfSpans could be a list of text that must be surrounded by span elements.

Давайте представим, что turnTheseIntoSpans сделать много модификаций outermostDiv Элемент с использованием методов, таких как: appendChild(), removeFromParent()...

Мои вопросы:

  1. Является ли хорошей практикой модифицировать outermostDiv и его дочерние элементы перед вставкой в ​​DOM?

  2. Я могу иметь доступ к outermostDiv childs, родной брат childs, не добавив его в DOM, Я хотел бы понять, как дерево элементов для просмотра существует еще до outermostDiv добавлен в DOM?

Источник

3 ответа

Решение

Document.createDivElement() создает объект, который реализует com.google.gwt.dom.client.Node, вызвав следующий JavaScript:

return doc.createElement('div');

Такой узел изначально не присоединен к дереву документа, но даже до того, как он есть, вы уже можете выполнять большинство операций над ним (за исключением тех, которые будут нуждаться в его родительском узле, так как он все еще нулевой).

Примечание. Узел создается тем же документом, к которому он будет позже присоединен (это необходимо, поскольку узлы, созданные в другом документе, могут быть несовместимы - поэтому вы не всегда можете присоединить все узлы везде).

Источник

Чтобы уточнить этот вопрос, я должен сначала признать, что я чистый фронтендер - я не играл с GWT и пишу сырой Javascript, поэтому этот ответ основан на эзотерическом знании DOM в браузере.

  1. Да! Живая манипуляция с DOM документами обходится дорого. Управлять DOM перед вставкой гораздо быстрее, поскольку такие вещи, как вычисления стиля, вычисления перекомпоновки макета и события мутации DOM, запускаются только один раз, а не с каждой отдельной модификацией.

  2. Он существует в DOM - DOM просто представляет собой абстракцию XML-манипуляции, которая использовалась для его создания в первую очередь - он просто еще не является частью DOM документа и всех дополнительных сложностей, которые это вызывает.

Источник

Я думаю, что вы должны использовать StringBuilder для своей реализации. Вы можете выполнять все манипуляции со StringBuilder (вставлять теги, изменять их положение и т. Д.), А когда вы закончите, вы добавляете его содержимое в виджет HTML в виде строки. Это было бы намного быстрее, чем создание элементов, добавление дочерних элементов и т. Д.

Источник
Другие вопросы по тегам