JavaScript vs jQuery HTML收藏-js教程-PHP中文网

JavaScript vs jQuery HTML Collections

JavaScript vs jQuery HTML收藏

htmlcollection对象从document.getElementsbytagname返回，document.getElementsByname和document.getElementsByClassName方法（在所有浏览器中不支持）。从表面上看，它们与数组相似，因为它们具有长度属性，并且可以通过[索引]访问元素。但是，它们不是数组。不支持push（），slice（）和sort（）之类的方法。考虑以下HTML文档：

<body>
	<p>Paragraph 1</p>
	<p>Paragraph 2</p>
	<p>Paragraph 3</p>
</body>

登录后复制

让我们使用getElementsBytagname和jQuery选择器获取每个段落节点：

var pCollection = document.getElementsByTagName("p");
var pQuery = $("p");

console.log("pCollection.length: ", pCollection.length);
console.log("pQuery.length: ", pQuery.length);

登录后复制

两者都返回相同的节点，因此收集长度为3：

pCollection.length: 3
pQuery.length: 3

登录后复制

现在，我们将在文档中添加另一个段落元素，然后再次查看集合：

// add new paragraph
var newp = document.createElement("p");
newp.appendChild(document.createTextNode("Paragraph 4"));
document.body.appendChild(newp);
// 
// display length
console.log("pCollection.length: ", pCollection.length);
console.log("pQuery.length: ", pQuery.length);

登录后复制

结果：

pCollection.length: 4
pQuery.length: 3

登录后复制

htmlCollection对象是 live。每当基础文档更改时，它们会自动更新。 jQuery和大多数其他JavaScript库都使用document.getElementsbytagname（）等方法，但将结果节点复制到真实数组。因此，这是当时对文档状态的查询：它永远不会更新。两种方法都有优势和缺点。例如，以下代码导致无限循环，因为HTMLCollection长度随着

元素的增加而增加：

var pCollection = document.getElementsByTagName("p");
for (var i = 0; i < pCollection.length; i++) {
	document.body.appendChild(pCollection[i].cloneNode(true));
}

登录后复制

也就是说，在某些情况下，与静态的jQuery节点集合或反复做出相同的选择相比，本机活的HTMLCollection更快的速度可能更有用。幸运的是，当我们想操纵它时，我们可以将任何收藏夹传递给jQuery，例如

var pCollection = document.getElementsByTagName("p");
// ... add nodes, do work, etc ...
$(pCollection).addClass("myclass");

登录后复制

jQuery和其他库可以减少开发工作，但始终检查是否可以在普通的旧JavaScript中编写更有效的代码，而不会产生其他文件请求和处理开销。

>关于JavaScript vs jQuery HTML Collections的常见问题

在处理HTML集合时，JavaScript和JQuery之间的主要区别是什么？

JavaScript和jQuery都是操纵HTML集合的强大工具，但它们以不同的方式处理这些任务。 JavaScript是一种编程语言，可直接与HTML集合进行交互，从而获得更多的控制和灵活性。但是，它可能更复杂，需要对语言有更深入的了解。另一方面，jQuery是一个JavaScript库，简化了许多任务，包括处理HTML集合。它为操纵HTML元素提供了易于使用的方法，但它可能无法提供与纯JavaScript相同的控制水平。

>如何将HTML集合转换为JavaScript中的数组？

>
>在JavaScript中，您可以使用array.from（）方法或传播操作员将HTML集合转换为数组。以下是一个示例，使用array.from（）：

让收集= document.getElementsByClassName（'xample''）;
让array = array = array = array.from（collection）;
>使用传播操作员：

> lotection.getElentsbyClassName（'example'''> iation; jQuery？

中的HTML集合在jQuery中，您可以使用.each（）方法在HTML集合上迭代。以下是一个示例：

$（'。示例'）。每个（函数（索引，元素）{
> console.log（index，element）;
}）; >>>>>>>>>>>>>我无法直接使用jquery rectoct by javers offe y y html offect。通过JavaScript方法返回的HTML集合中的jQuery方法。这是因为JavaScript方法返回HTML集合，而JQuery方法返回jQuery对象。但是，您可以使用jQuery函数$（）将HTML集合转换为jQuery对象，就像：

让收集= document.getElementsByClassName（'example''> let jqueryObject = $（collection）;

>现在您可以在jqueryobject上使用jqueryobject。在JavaScript和JQuery中，您可以使用括号符号在HTML集合中访问单个元素，类似于您将如何访问数组中的元素。例如，要访问集合中的第一个元素，您将使用Collection [0]。

我可以在HTML集合中修改元素？

是的，您可以在JavaScript和Jquery中修改HTML集合中的元素。在JavaScript中，您可以直接修改元素的属性，而在jQuery中，您可以使用.css（），.attr（）和.html（）和.html（）和.html（）修改元素。

>我如何过滤html集合中的元素？我如何在jquery中使用extralle extry efter ye extral forter the extral to the forter the forter the ht ht ht ht ht ht。在JavaScript中，您可以将集合转换为数组，然后使用.filter（）方法。

>我可以在HTML集合上使用数组方法吗？