Heim >Web-Frontend >js-Tutorial >JavaScript vs JQuery HTML -Sammlungen

JavaScript vs JQuery HTML -Sammlungen

Jennifer AnistonOriginal: 2025-03-03 00:29:10912Durchsuche

JavaScript vs jQuery HTML Collections

HTMLCollection -Objekte werden aus document.getElementsByTagName zurückgegeben , document.getElementsByName und document.getElementsByClassName -Methoden (nicht in allen Browsern unterstützt) . Oberflächlich ähneln sie Arrays, da sie eine Länge -Eigenschaft haben und Elemente durch [Index] zugegriffen werden können. Sie sind jedoch keine Arrays. Methoden wie Push (), Slice () und Sort () werden nicht unterstützt. Betrachten Sie das folgende HTML -Dokument:

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

Greifen wir jeden Absatzknoten mit GetElementsByTagName und einem JQuery -Selektor an:

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

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

Beide geben die gleichen Knoten zurück, sodass die Sammlungslänge 3 beträgt:

pCollection.length: 3
pQuery.length: 3

Wir werden dem Dokument jetzt ein weiteres Absatzelement hinzufügen und die Sammlungen erneut ansehen:

// 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);

Das Ergebnis:

pCollection.length: 4
pQuery.length: 3

HTMLCollection -Objekte sind Live . Sie werden automatisch aktualisiert, wenn sich das zugrunde liegende Dokument ändert. JQuery und die meisten anderen JavaScript -Bibliotheken verwenden Methoden wie document.getElementsByTagName (), kopieren jedoch die resultierenden Knoten in ein echtes Array. Daher handelt es sich um eine Anfrage zum Status des Dokuments zu diesem Zeitpunkt: Sie wird nie aktualisiert. Bei beiden Methoden gibt es Vor- und Nachteile. Beispielsweise verursacht der folgende Code eine unendliche Schleife, da die HTMLCollection -Länge zunimmt, wenn

Elemente hinzugefügt werden:

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

Trotzdem kann es Situationen geben, in denen eine schnellere, native lebende HTMLCollektion nützlicher ist als eine statische Sammlung von JQuery -Knoten oder wiederholt die gleiche Auswahl. Glücklicherweise können wir jede Sammlung an JQuery weitergeben, wenn wir sie manipulieren wollen, z.

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

JQuery und andere Bibliotheken können die Entwicklungsaufwand senken, aber immer prüfen, ob es möglich ist, effizientere Code in einfachem JavaScript zu schreiben, ohne zusätzliche Dateianforderungen und Verarbeitungsaufgaben zu verarbeiten.

häufig gestellte Fragen zu JavaScript gegen JQuery HTML -Sammlungen

Was ist der Hauptunterschied zwischen JavaScript und JQuery im Umgang mit HTML -Sammlungen? JavaScript ist eine Programmiersprache, die direkt mit HTML -Sammlungen interagiert und mehr Kontrolle und Flexibilität ermöglicht. Es kann jedoch komplexer sein und erfordert ein tieferes Verständnis der Sprache. Auf der anderen Seite ist JQuery eine JavaScript -Bibliothek, die viele Aufgaben vereinfacht, einschließlich der Handhabung von HTML -Sammlungen. Es bietet benutzerfreundliche Methoden zum Manipulieren von HTML-Elementen, bietet jedoch möglicherweise nicht das gleiche Kontrollniveau wie reines JavaScript.

Wie kann ich eine HTML -Sammlung in ein Array in JavaScript konvertieren? Hier ist ein Beispiel mit Array.from ():

let collection = document.GetElementsByClassName ('Beispiel'); Eine HTML -Sammlung in jQuery? Hier ist ein Beispiel:

$ ('. Beispiel'). Jede (Funktion (Index, Element) {
console.log (Index, Element); Methoden auf einer HTML -Sammlung, die von einer JavaScript -Methode zurückgegeben wird. Dies liegt daran, dass JavaScript -Methoden HTML -Sammlungen zurückgeben, während JQuery -Methoden JQuery -Objekte zurückgeben. Sie können die HTML -Sammlung jedoch mit der jQuery -Funktion $ () in ein JQuery -Objekt konvertieren, wie SO:
let collection = document.getElements byclassName ('Beispiel');
lass jQueryObject = $ (Sammlung);
sowohl in JavaScript als auch in JQuery können Sie mithilfe von Bracket -Notation auf einzelne Elemente in einer HTML -Sammlung zugreifen, ähnlich wie Sie in einem Array auf Elemente zugreifen würden. Um beispielsweise auf das erste Element in einer Sammlung zugreifen zu können, verwenden Sie die Sammlung [0].

Kann ich Elemente in einer HTML -Sammlung ändern? In JavaScript können Sie die Eigenschaften der Elemente direkt ändern, während Sie in jQuery Methoden wie .css (), .attr () und .html () verwenden können, um die Elemente zu ändern. Sammlung. In JavaScript können Sie die Sammlung in ein Array konvertieren und dann die .Filter () -Methode verwenden.

Kann ich Array -Methoden für eine HTML -Sammlung verwenden? Sie können die Sammlung jedoch mit Array.From () oder dem Spread -Operator in ein Array konvertieren und dann Array -Methoden verwenden. Sie können dem Dokument jedoch Elemente hinzufügen, und sie werden automatisch in die Sammlung aufgenommen, wenn sie mit dem Selektor übereinstimmen.

Kann ich die .map () -Methode für eine HTML -Sammlung verwenden? Sie können die Sammlung jedoch mit Array.from () oder dem Spread -Operator in ein Array konvertieren und dann die .map () -Methode darauf verwenden.

Das obige ist der detaillierte Inhalt vonJavaScript vs JQuery HTML -Sammlungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery css html Static Array Object if sort for while Filter using Length operator Property Collection copy map console function this Access Other

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：10 kostenlose Android -Apps für WebentwicklerNächster Artikel：10 kostenlose Android -Apps für Webentwickler

In Verbindung stehende Artikel

Mehr sehen