在JavaScript中调用多个选择器

当需要抓取多个节点时。假设我想附加几个节点。例如：2个节点，它们是：

<div id=”one”>
    <button class="btn">button</button> 
</div>

<div id=”two”>
</div>

但是，我不喜欢调用

document.getElementById

2次，如何更好地处理这样的事情？为了进一步说明这一点，假设我想修改嵌套在

one

div中的一个元素，然后再将其附加到

two

——在这种情况下，我通常使用父元素作为选择器沿着节点向下移动，例如：

// Getting element with class .btn and changing txt color:
this.button = this.element.getElementsByClassName('btn')[0];
this.button.style.color = '#000000';

在这个级别上，我觉得调用

document.getElementById（）是可以的两次，但当这些类型的应用程序增长时，我看到自己调用元素选择器的方式变得越来越糟糕，这让我感觉很有黑客味，我想知道如何处理元素选择器重的组件，以及更多地了解调用重复的
document.getElementById（）的缺点或类似

我是不是要把它们包装成函数？或者保留这种方法可以吗？
您在提供的标记中回答您的问题，即jQuery。jQuery为您提供了快速与DOM交互的工具

例如：

this.element = document.getElementById('one');
this.appTo = document.getElementById('two');

变成：

this.element = $('#one');
this.appTo = $('#two');

$('.btn').first().css('color', '#000000');

修改图元也更容易：

// Getting element with class .btn and changing txt color:
this.button = this.element.getElementsByClassName('btn')[0];
this.button.style.color = '#000000';

变成：

this.element = $('#one');
this.appTo = $('#two');

$('.btn').first().css('color', '#000000');

您甚至可以用一行代码修改多个元素，例如类为btn的所有元素：

$('.btn').css('color', '#000000');

就性能而言，jQuery在幕后使用本机javascript方法，因此速度会稍微慢一些。然而，对于大多数常见的用途，性能差更可能是由于编程不好而不是jQuery速度慢造成的。
我不确定这是否回答了“问题”。OP观察到使用ID选择器让人感觉“不舒服”，对此，您建议使用jQuery？我不认为他说使用ID选择器本身就不好。在我看来，他似乎发现用于操纵DOM的内置javascript方法既丑陋又难以使用。使用jQuery将使DOM操作对他来说不那么痛苦。@evolutionxbox在这一点上是正确的，我认为没有必要使用jQuery或大多数JS框架，我的意思是最好将这些选择器调用封装在一个函数中，而不是每次都调用它们。经过更多的研究，这其实并不重要，但我希望有人能澄清这一点。我真的很感谢您的意见，但是jqueryimo阻碍了web和新一代开发人员的发展。人们通常知道jQuery而不知道JavaScript。使用ES6 jQuery并不是现代web所需要的。@panoply在这种情况下，您可能想看看Angular或更轻的Vue JS。这些框架专注于高效的DOM操作，它们严重减少了您将要进行的DOM查询的数量。这里有一点学习曲线，但对于作为新一代开发人员一部分的人来说，这肯定不是问题，他们不想被jQuery这样的“过时技术”所束缚。