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选择/操作

回答

相关问题