Элементы DOM существуют в двух местах одновременно? (Bysynchronisation)

Question

Странный вопрос, я знаю, но есть ли в Javascript или каком-либо другом веб-языке, чтобы один и тот же элемент DOM существовал в двух местах одновременно?

Answer 1

Средства рендеринга на основе Gecko позволяют отображать один и тот же элемент в нескольких местах с помощью CSS-функции element () .Обратите внимание, что это только визуализирует элемент как изображение, но не распространяет события назад на исходный элемент.

Answer 2

DOM - это DOM, независимо от языка.

Каждый элемент DOM либо вообще не связан с DOM, либо связан с одним конкретным родителем. Вы не можете отображать один и тот же элемент в двух разных местах. Присоединение к новому родителю просто переместит элемент из старого.

Вы можете создать или клонировать элемент, то есть через Node.

function clone() {
  var itm = document.getElementById("items-one").lastChild;
  var cln = itm.cloneNode(true);
  document.getElementById("items-two").appendChild(cln);
}

<ul id="items-one"><li>Element One</li></ul>
<ul id="items-two"><li>Element Two</li></ul>

<button onclick="clone()">Clone Element</button>

Answer 3

Это зависит от того, что вы называете " существует ".

В SVG есть элемент <use>, который позволяет создавать глубокие клоны эталонного узла в ShadowTree элемента host <use>. Вы скажете, да, это просто клонирование, , но , этот клон имеет особенность тесной связи с его источником. Изменения DOM, сделанные в источнике, будут влиять на клона, правила CSS, примененные к источнику, также будут влиять на клона _{, по крайней мере, в SVG2} :

onclick = e => // we only modify the source #rect
  document.getElementById('rect').setAttribute("height", 20);

:hover #rect{
  fill: red;  /*Firefox is buggy here*/
}

click to execute DOM modification
<svg>
  <rect id="rect" x="0" y="0" width="50" height="50" fill="green"/>
  <use x="60" xlink:href="#rect"/>
</svg>

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

Другие элементы SVG также могут быть обработаны несколько раз, пока они находятся в одном месте в DOM. <marker> и <pattern> - это такие элементы:

<svg>
  <defs>
    <!-- defined only once -->
    <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
        markerWidth="5" markerHeight="5">
      <circle cx="5" cy="5" r="5" fill="red" />
    </marker>
  </defs>
  <!-- our marker will get painted twice -->
  <polyline points="10,10 10,90 90,90" fill="none" stroke="black"
   marker-start="url(#dot)" marker-end="url(#dot)"  />
</svg>

Итак, еще раз, можно сказать, что они "существуют" несколько раз, но в DOM они только один раз. (очень нравится FF's element() the8472 , упомянутых в их ответе).

---

Теперь, если вы имеете в виду существует , как в node1 !== node2 && node1.childNodes[0] === node2.childNodes[0], тогда нет.