如何在克隆元素上引用子元素答案

【问题标题】：how to reference a child element on a cloned element如何在克隆元素上引用子元素
【发布时间】：2017-05-31 12:47:06
【问题描述】：

我正在对 DOM 元素进行一些测试，测试的结果是元素后代之一。例如：

<div id="myelement" class="some-class">
  <div class="some-child-class"></div>
  <div class="some-other-child-class">
    <div class="grandchild-class"></div>
    <div class="another-grandchild"></div>*
  </div>
</div>

让我们假设：

test(document.getElementById('myelement'));

将返回标有星号的元素

现在我的问题是：测试过程繁重且耗费资源。我不想在不需要的时候运行它。有时，我克隆了一个已经过测试的元素（意思是 - 我知道测试的结果），但是由于我得到了一个对象引用，所以我不能使用它来访问克隆元素上的相关子元素.

是否有任何有效的方法可以以某种方式“保存”从父元素到特定后代 DOM 元素的相对路径，然后将其“应用”到另一个元素上？

【问题讨论】：

为什么不直接选择元素而不是遍历 DOM？
您是否尝试过重新使用选择器？选择器只是一个字符串，即：'input .withclass'，您应该能够在任何元素集上重复使用它。
也许以某种方式标记已经测试过的元素？以数据集为例。
不知道你在测试什么，只是好奇，你是单元测试还是集成测试？如果我的任何 JavaScript 单元测试是 heavy and resource consuming，我会担心，因为这要么是被测代码中设计不良或测试设置不良（不模拟应该被模拟的东西等）的标志，并且可能是直接地址？
@Fran：“重资源消耗”是一个相对术语 :-) 这些测试在运行时执行。每个只有几毫秒。但它加起来......我正在努力尽可能地表现出色。

标签： javascript path element

【解决方案1】：

因此，您可以为每个元素分配唯一的 id，并将测试结果缓存在 Elements id 的 Object 中。但是，我不知道这是否有用。一个示例实现：

var test=function(el){
  return this[el.id] || (this[el.id]=advancedtesting(el));
}.bind({});

所以你可以这样做：

test(document.getElementById('myelement'));//caches
test(document.getElementById('myelement'));//returns the cached

【讨论】：

【解决方案2】：

你可以使用 jQuery。

他们使用的选择器可以采用“nth-child”或“nth-of-type”的形式（参见文档here）。

它的作用是从它们相对于您开始的位置的位置定位子元素。在你的情况下，如果你想从你的第一个元素开始，然后到加星标的元素，你可以这样做：

$('#myelement').find('div:nth-child(2) > div:nth-child(2)')

这样做的目的是将#myelement 作为开始搜索的基础，然后搜索到第二个子元素，即 div，然后再次搜索到该 div 的第二个子元素。您可以使用不同的基数重用该选择器。

【讨论】：

当问题本身既没有标记也没有提及 jQuery 时，请不要推荐使用它。
OP 似乎想提高只运行几毫秒的测试的速度，引入另一个库可能无助于加快测试速度。
抱歉，也许 OP 出于任何原因想要纯 JavaScript。不过，我不确定性能会差很多。