在JavaScript中调用多个选择器

当需要抓取多个节点时。可以说我想追加几个节点。例如缘故：2个节点它们是：在JavaScript中调用多个选择器

<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();两次，但是当这些类型的应用程序增长时，我发现自己调用元素选择器的方式让它变得非常笨拙，我很想知道如何处理元素选择器较重的组件，以及更多关于调用重复的document.getElementById();或类似的缺点？

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

来源

2017-02-18 panoply

您正在回答你提供的标签，即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速度慢的原因。

来源

2017-02-18 18:58:54 NotABlueWhale

我不确定这是否回答“问题”。 OP在做这样的观察：使用ID选择器会感觉“哈克”，并且您建议使用jQuery？ – evolutionxbox

我不认为他说使用ID选择器本身就不好。对我来说，他似乎发现了用于操纵DOM丑陋和尴尬使用的内置JavaScript方法。使用jQuery会使DOM操作对他来说不那么痛苦。 – NotABlueWhale

@evolutionxbox是正确的，我没有看到jQuery和/或大多数JS框架的需要，我更倾向于将这些选择器调用封装在一个反对每次调用它们的函数中。经过一些更多的研究，这并不重要，但我很乐意有人来清除它。我真的很感谢你的意见，但jQuery的imo举办网络和新一代开发人员。人们经常知道jQuery而不是JavaScript。与ES6 jQuery是不是我们需要与现代网络。 – panoply

在JavaScript中调用多个选择器

回答

相关问题