Question

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

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

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

在JavaScript中，人们需要抓住这两个元素，逻辑上我们就像（例如）：

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

//append
this.appTo.appendChild(this.element, this.appTo);

但是，我不喜欢我称之为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();，但是当这些类型的应用程序增长时，我看到自己称元素选择器的方式很多，它感觉很hacky而且我想知道如何处理元素选择器重组件以及更多关于调用重复document.getElementById();或类似问题的缺点？

我只是将它们包装在函数中吗？还是可以保持这种方法？

Answer 1

您正在回答您提供的标签中的问题，即jQuery。 jQuery为您提供了快速与DOM交互的工具。

例如：

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

变为：

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

修改元素也更容易：

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

变为：

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

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

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

性能方面，jQuery使用底层的本机javascript方法，所以它会慢一点。然而，对于大多数常见用途，糟糕的性能更可能是由于编程错误而不是jQuery的速度慢。

在JavaScript中调用多个选择器

1 个答案: