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集合上使用數組方法嗎？