在JavaScript中調用多個選擇器

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();兩次，但是當這些類型的應用程序增長時，我發現自己調用元素選擇器的方式讓它變得非常笨拙，我很想知道如何處理元素選擇器較重的組件，以及更多關於調用重複的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速度慢的原因。