JavaScript Web API和jQuery DOM選擇/操作

-1

有關DOM遍歷/選擇/操作的最佳實踐是什麼？如果我不止一次針對同一組元素做某件事，我是否應該堅持只有一種選擇方式？JavaScript Web API和jQuery DOM選擇/操作

例如：

var slidesHTML = document.getElementsByClassName("slide"); //HTMLCollection 
var slidesNODE = document.querySelectorAll("slide"); //NodeList 
var slidesJQUERY = $(".slide"); //jQuery object

現在，我針對這些要素時，我想打電話給jQuery的方法和針對的還是他們，當我要調用一個節點列表法，當我再次想調用HTMLCollection方法等。

這似乎是多餘的，這感覺像不好的做法。

但是，如果我選擇了一組元素，我將不得不重寫所有其他方法，我想從頭調用，這看起來像是過度殺傷。

來源

2017-09-29 Peter Jacuzzi

你爲什麼最終得到了這樣一個不同的採用jQuery對象，NodeLists和HTMLCollection的方法集？你真的需要這些不同的參數類型嗎？ –

這似乎是非常依賴的情況，即沒有一個明確的答案 – musefan

'$（「。slide」）[index]'或'$（「。slide」）。get（index）'提供對'DOM'對象 – guest271314

雖然更好的方法可能是堅持選擇它們的一種方式，但靈活性的缺乏可能對您不適用。

你可以，而不是僅僅寫一個不可知元素的getter得到的元素，並在格式返回他們你想要的：

var getElements = function getElements(selector, format) { 
    var elements; 

    if (format.toLowerCase() === "htmlcollection") { 
     elements = document.getElementsByClassName(selector); //HTMLCollection 
    } 

    if (format.toLowerCase() === "nodelist") { 
     elements = document.querySelectorAll(selector); //NodeList 
    } 

    if (format.toLowerCase() === "jquery") { 
     elements = $(selector); //jQuery object 
    } 

    return elements; 
}; 

... 
// meanwhile, in another part of the code... 

var slidesHTML = getElements("slide", "HTMLCollection"); 
var slidesNODE = getElements(".slide", "NodeList"); 
var slidesJQUERY = getElements(".slide", "jQuery");

個人來講，我覺得HTMLCollection和NodeList藏品中最是沒有價值的的情況下，所以這裏我沒有使用jQuery（或類似的庫）項目，我只是使用以下命令：

var elements = Array.prototype.slice.call(document.querySelectorAll(selector));

這種方法可以讓我CSS選擇語法的靈活性（和特異性）來獲取DOM元素並將它們拉回到元素的Array中，在這些元素中迭代它們或對它們執行其他操作是微不足道的。

來源

2017-09-29 14:56:37 pete

有道理。謝謝！ –

JavaScript Web API和jQuery DOM選擇/操作

回答

相關問題