DOM元素同时存在于两个地方吗？ （通过同步）

Question

我知道一个奇怪的问题，但是在Javascript或任何其他基于Web的语言中是否存在使同一DOM元素同时存在于两个地方的问题？

Answer 1

基于壁虎的渲染器使您可以使用element() CSS函数在多个位置渲染同一元素。 请注意，这只会将元素呈现为图像，不会将事件传播回源元素。

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>元素，它允许在主机<use>元素的ShadowTree中创建参考节点的深层克隆。您可能会说，是克隆，但是，此克隆具有与源紧密相连的特殊性。在源上进行的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的element() 他们的答案中提到了 the8472 。

---

现在，如果您只是像node1 !== node2 && node1.childNodes[0] === node2.childNodes[0]中那样表示存在，则不会。