Может ли DOM быть DAG или он должен оставаться деревом?

Question

Это загадочно.Я ожидаю, что просто поиск в вопросе в строке темы даст четкий ответ, но, поскольку не появляется даже намека на ответ, я спрашиваю.

В приведенном ниже коде для удобства используется D3, но вопрос о DOM.Не стесняйтесь использовать (меньший IMHO) jquery или (гораздо меньший) базовый код манипуляции DOM, если вы предпочитаете, чтобы ответить.

Ряд DIV появляется слева ().При наведении курсора справа увеличивается один из DIV ().

function magnify(i) {
    return function() {
        var right = d3.select("right");
        right.selectAll("*").remove();
        right.append("magunit")
             .html("<h2>" + i + "</h2>");
    }
}
for(i=0; i<256; i++) {
    var unit = d3.select("left").append("unit")
                 .on("mouseenter",magnify(i));
    unit.html("<h2>" + i + "</h2>");
}

html, body { width: 100%; height: 100%; margin: 0; }
mycontainer { width: 100%; height: 100%; display: flex; flex-flow: row; }
left { display: flex; flex-flow: row wrap; flex: 1; overflow-y: auto;}
right { display: flex; flex-flow: row; flex: 1; }
unit { flex: 1 1 auto; width: 80px; height: 60px; border: solid 1px black; }

<script src="https://d3js.org/d3.v5.min.js"></script>
    <mycontainer><left></left><right></right></mycontainer>

Необходимо ли заново создавать каждый DIV?Что стандарт говорит об указании на существующий DIV с двух сторон, что делает DOM ориентированным ациклическим графом (DAG), а не деревом?

Пояснение в ответ на комментарий Кайидо

Я использую здесь <unit> вместо чего-то произвольно сложного, чтобы код был кратким.Смысл в том, чтобы перемещать указатели, а не постоянно воссоздавать (произвольно сложные) структуры юнитов.Следовательно, «просто изменить текст внутри <h2>» не обрезает его, но «переключиться на SVG и использовать <use>» правильно.

Релевантно

• Shadow DOM

Answer 1

Нет.Я проверил это с помощью следующего:

var testdiv = document.createElement("div");
testdiv.innerHTML="Im testing";
document.body.insertBefore(testdiv,document.body.childNodes[0]);

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

document.body.append(testdiv);

Узел удаляется сверху и добавляется снизу.

Однако есть обходной путь.Узлы в javascript являются объектами, поэтому вы можете добавить к ним дополнительный параметр.Вы можете использовать его для установки идентификатора для каждого элемента узла, вы можете хранить, какие элементы, с какими идентификаторами, в массиве.В качестве базового примера:

var map=[];
var testdiv = document.createElement("div");
testdiv.innerHTML="Im testing";
testdiv.myID=1;
if (!map[1]) map[1]=[];
map[1].push(testdiv);

document.body.append(testdiv);

var testdiv2=testdiv.cloneNode(true);
testdiv2.myID=testdiv.myID;
document.body.append(testdiv2);
if (!map[1]) map[1]=[];
map[1].push(testdiv2);

Теперь, если вы запросите карту для элементов, он вернет 2 узла с идентификатором 1. и этот массив карт связан с этими узлами внутри DOM.Вы можете получить ID узлов в вашей DOM, посмотрев на их myID.

Answer 2

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

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

Мы ограничены этим, потому что все, что находится в DOM, должно быть выражено какдействительный HTML и наоборот.В конечном итоге браузер анализирует HTML-документ, чтобы узнать, что отображать.Структура документа является (должна быть) строго древовидной, поскольку в HTML (и XML) дочерние элементы создаются путем помещения их в родительский элемент (т. Е. Вложения).Невозможно выразить отношения с несколькими родителями, используя этот формат.

Если бы сегодня мы снова разрабатывали сеть, мы могли бы сделать это иначе, но это часть наследия, которое мы получили почти за 30 лет.назад - когда JavaScript даже не был чем-то особенным.

Если вам нужна общая ссылка на отношения между документами DOM и HTML, я бы порекомендовал прочитать https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/… для начала.

См. Также https://w3.org/TR/2004/REC-DOM-Level-3-LS-20040407/load-save.html.Это спецификация W3C, описывающая, как объект DOM должен быть сериализуемым как из XML, так и из XML (из которых, разумеется, HTML представляет собой конкретное разнообразие).Если он сериализуем в XML, то он должен быть представлен в виде иерархического дерева, потому что именно этого требует XML.

И https://dom.spec.whatwg.org/#nodes - текущий уровень жизни, описывающий, как DOM представляет собой иерархическое деревоузлы.