javascript - 如何通过javascript从模板中获取元素？

Question

我不知道如何通过 javascript 从模板中获取 DOM 元素的好方法。

示例模板:

<script id = "template" type="text/template">
    <div>text1</div>
    <div>text2</div>
    <div>text3</div>
</script>

例如我想得到带有“text2”的div

有一些我知道的方法，它们都是不好的:

1. 将“类”添加到所有元素 - 它破坏了语义(为 CSS 创建的类)。在大型项目中，类名必须很长，很不方便。

2. 通过他的编号(索引)获取元素 - 添加新元素时，您必须在代码中重写旧编号。

Answer 1

我看到了几个选项:

1. 如果你不想使用 class ，你可以使用 data-* attribute .

2. 假设您加载模板一次，然后根据需要复制其内容，您可以将 id 值放在模板中的元素上，然后将其删除在克隆它们并将它们添加到文档时(这样您就不会在元素的多个副本上得到相同的 id，这将是无效的并且可能适得其反)。