在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中調用多個選擇器

回答

相關問題