Kernpunkte

• nodelist.js als Alternative zum DOM -Betrieb für JQuery bietet ?hnliche Funktionen, ist jedoch kleiner (4K nach Komprimierung) und nutzt Verbesserungen an der nativen Browser -API.

• Im Gegensatz zu JQuery behandelt Nodelist.js Knotenarrays als einzelne Knoten, wodurch sauberer Code und einfachere Nodelist -Objektvorg?nge aktiviert werden.

• nodelist.js enth?lt spezielle Methoden zum Einstellen und Erhalten von Attributen, zum Aufrufen von elementspezifischen Methoden und zum Zugriff auf Knoten in Nodelist sowie das prevObject -attribut, das dem Attribut von JQuery entspricht. owner

• nodelist.js ist mit Mainstream -Browsern nach einer bestimmten Version (Firefox 6, Safari 5.0.5, Chrome 6, dh 9, Opera 11.6) kompatibel und wird automatisch aktualisiert, um neue Methoden/Eigenschaften hinzuzufügen, die vom Browser hinzugefügt wurden.
  p.tip { Hintergrundfarbe: RGBA (128.128.128.0,05); Grenz-Top-Right-Radius: 5px; Grenz-Bottom-Right-Radius: 5px; Polsterung: 15px 20px; Border-Links: 10px Solid RGBA (128.128.128,0,075); }

In den letzten Jahren ist JQuery die De -facto -JavaScript -Bibliothek im Web geworden. Es entfernt viele Cross-Browser-Inkonsistenzen und fügt Kundenskripten eine Ebene popul?rer syntaktischer Zucker hinzu. Einer seiner Hauptschmerzpunkte in der Abstraktionsverarbeitung sind DOM -Operationen, aber seit dem Aufkommen von JQuery wurde die nativen Browser -APIs erheblich verbessert, und das Konzept von "Sie brauchen wahrscheinlich nicht JQuery".

Die Gründe sind wie folgt:

jQuery enth?lt viele Funktionen, die Sie nicht ben?tigen oder nicht verwenden (und daher ist es unn?tig, riesig zu sein).
jQuery nimmt für zu viele Menschen zu viele Funktionen an. Im Allgemeinen k?nnen kleinere Bibliotheken einige Aufgaben besser ausführen.
In Bezug auf DOM -Operationen kann die Browser -API nun die meisten Funktionen von JQuery ausführen.
Die Browser -API ist jetzt mehr synchronisiert, beispielsweise unter Verwendung von
4. anstelle von addEventListener. attachEvent

Was ist das Problem?

Das Problem ist, dass die Verwendung natives (oder reines) JavaScript für DOM im Vergleich zu JQuery problematisch sein kann. Dies liegt daran, dass Sie redundanterer Code schreiben und den nutzlosen Nodelist des Browsers verarbeiten müssen.

Schauen wir uns zun?chst einen Blick auf die Definition von MDN von Nodelist an:

Das

nodelistische Objekt ist eine Sammlung von Knoten, wie sie beispielsweise von den Methoden

und Node.childNodes zurückgegeben werden. document.querySelectorAll

Es gibt manchmal Dynamik -Nodelist (was verwirrend sein kann):

In einigen F?llen ist Nodelist eine dynamische Sammlung, was bedeutet, dass ?nderungen in der DOM in der Sammlung widerspiegeln. Zum Beispiel ist

dynamisch. Node.childNodes

Dies kann ein Problem sein, da Sie nicht erkennen k?nnen, welche dynamisch und welche statisch sind. Es sei denn, Sie entfernen jeden Knoten vom Nodelist und überprüfen Sie dann, ob der Nodelist leer ist. Wenn Sie leer sind, haben Sie eine dynamische Nodelistin (es ist nur eine schlechte Idee).

Darüber hinaus bietet der Browser keine nützlichen Methoden zur Manipulation dieser Nodelist -Objekte.

Zum Beispiel ist es leider nicht m?glich, mit forEach durch Knoten zu schleifen

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 錯誤：nodes.forEach 不是函數(shù)

Daher müssen Sie Folgendes tun:

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

oder verwenden Sie nur "Hack":

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

Der native Nodelist des Browsers hat nur eine Methode:

. Es gibt einen Knoten von Nodelist per Index zurück. Wenn wir auf den Knoten zugreifen k?nnen, wie wir ein Array verwenden (mit item), ist es v?llig nutzlos: array[index]

var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true

Hier kommt Nodelist.js ins Spiel - so einfach, ein DOM mithilfe einer nativen API von Browser wie JQuery zu bedienen, erfordert jedoch nur eine 4K -Komprimierungsgr??e.

L?sung

Ich habe nodelist.js erstellt, weil ich native DOM -APIs verwendet habe, aber sie pr?gnanter machen m?chte, wodurch beim Schreiben von Code eine Menge Redundanz reduziert wird (z. B. für Schleifen).

nodelist.js ist ein Wrapper für die native DOM -API, mit der Sie Arrays von Knoten (d. H. Mein Nodelist) manipulieren k?nnen, als w?re es ein einzelner Knoten. Dies gibt Ihnen mehr Funktionen als das native Nodelist -Objekt in Browser.

Wenn Sie dies für gut halten, erhalten Sie eine Kopie von nodelist.js aus dem offiziellen Github -Repository und lesen Sie den Rest dieses Tutorials weiter.

Verwendung:

Auswahl eines DOM -Knotens ist einfach:

// kehre zu meinem Nodelist $$(selector); zurück

Diese Methode wird im Hintergrund

verwendet. querySelectorAll(selector)

Aber wie ist es mit JQuery verglichen?

Ich bin froh, dass Sie diese Frage gestellt haben. Vergleichen wir einheimische JS, JQuery und Nodelist.js.

Angenommen, wir haben drei Tasten:

?ndern wir den Text jeder Schaltfl?che auf "Klicken Sie auf mich":

native js:

var buttons = document.querySelectorAll('button'); // 返回瀏覽器無用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].textContent = 'Click Me';
}

jQuery:

$('button').text('Click Me');

nodelist.js:

$$('button').textContent = 'Click Me';

Hier sehen wir, dass nodelist.js nodelist effektiv als einzelne Knoten behandeln kann. Das hei?t, wir verweisen auf eine Nodelistin und setzen seine

-Mobilie auf "Klicken Sie mich". Nodelist.js führt dies dann für jeden Knoten im Nodelist durch. Sehr klug, oder? textContent

Wenn wir eine Methodenkette (?hnlich wie JQuery) wollen, machen wir Folgendes, was einen Verweis auf Nodelist zurückgibt:

$$('button').set('textContent', 'Click Me');

Fügen Sie jetzt einen Klickereignis -Listener zu jeder Schaltfl?che hinzu:

native js:

var buttons = document.querySelectorAll('button'); // 返回瀏覽器無用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    this.classList.add('clicked');
  });
}

jQuery:

$('button').on('click', function() {
  $(this).addClass('click');
  // 或?qū)?jQuery 與原生混合使用 `classList`：
  this.classList.add('clicked');
});

nodelist.js:

$$('button').addEventListener('click', function() {
  this.classList.add('clicked');
});

Okay, die

-Methode von JQuery ist also ziemlich gut. Meine Bibliothek verwendet die native DOM -API des Browsers (daher on), aber das hindert uns nicht daran, einen Alias ??für die Methode zu erstellen: addEventListener

$$.NL.on = $$.NL.addEventListener;

$$('button').on('click', function() {
  this.classList.add('clicked');
});

Nicht schlecht! Dies zeigt, wie wir unsere eigene Methode hinzufügen:

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 錯誤：nodes.forEach 不是函數(shù)

nodelist.js Unterstützung für Array -Methoden

nodelist.js erbt von Array.prototype, aber nicht direkt, da einige Methoden ge?ndert wurden, daher ist es sinnvoll, sie mit Nodelist (Array von Knoten) zu verwenden.

push und unshift

Zum Beispiel: push und unshift Methoden k?nnen nur Knoten als Parameter annehmen, da ansonsten ein Fehler geworfen wird:

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

So werden sowohl push als auch unshift nodelist zurückgegeben, um die Methoden zu erm?glichen, was bedeutet, dass es sich von den nativen Methoden Array#push oder Array#unshift von JavaScript unterscheidet, die irgendetwas akzeptieren und die neue L?nge des Arrays zurückgeben. Wenn wir die L?nge von Nodelist wünschen, müssen wir nur die Eigenschaft length verwenden.

Diese beiden Methoden wie die native Array -Methode von JavaScript ?ndern die Nodelist.

concat

concat Die Methode akzeptiert Folgendes als Parameter:

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

concat ist eine rekursive Methode, daher k?nnen diese Arrays so tief sein, wie wir es gerne haben würden und werden abgeflacht. Wenn jedoch ein Element im übergebenen Array kein Knoten, Nodelist oder HTMLCollection ist, wirft es einen Fehler auf.

concat Gibt einen neuen Nodelist zurück, genau wie die Array#concat -Methode von JavaScript.

pop, shift, map, slice, filter,

,

Sowohl die Methoden pop shift als auch Array#pop k?nnen optionale Parameter annehmen, was angibt, wie viele Knoten sich vom Nodelist zum Pop oder Verschieben haben. Im Gegensatz zu JavaScripts nativem Array#shift oder

taucht letzteres immer auf oder verschiebt ein Element im Array, unabh?ngig davon, was als Parameter übergeben wird.

map Wenn jeder zugeordnete Wert ein Knoten ist, gibt die

-Methode einen Nodelist zurück.

Die Methoden slice filter und

tun das Gleiche wie in realen Arrays, geben aber einen Nodelist zurück.

Array.prototype Da nodelist.js nicht direkt von Array.prototype erbt, wenn Sie beim Laden von nodelist.js eine Methode hinzufügen, wird sie nicht vererbt.

Sie k?nnen die verbleibenden Array -Methoden von nodelist.js hier anzeigen.

spezielle Methode

nodelist.js verfügt über vier eindeutige Methoden und eine Eigenschaft namens owner, was dem prevObject -Merkmal von JQuery entspricht.

get und set Methode:

Einige Elemente haben Attribute, die für Elemente dieses Typs spezifisch sind (z. B. das Attribut href auf dem Anker -Tag). Aus diesem Grund wird $$('a').href undefined zurückkehren - da es sich nicht um eine Eigenschaft handelt, die von jedem Element in Nodelist geerbt wird. So verwenden wir die Methode get, um auf diese Eigenschaften zuzugreifen:

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 錯誤：nodes.forEach 不是函數(shù)

Die

set Methode kann verwendet werden, um diese Eigenschaften für jedes Element festzulegen:

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

set Gibt auch Nodelist zurück, um die Methodenverkettung zu erm?glichen. Wir k?nnen es in textContent usw. (beide gleichwertig) verwenden:

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

Wir k?nnen auch mehrere Eigenschaften in einem Anruf festlegen:

var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true

Alle oben genannten Vorg?nge k?nnen mit jedem Attribut durchgeführt werden, z. B. style:

var buttons = document.querySelectorAll('button'); // 返回瀏覽器無用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
  buttons[i].textContent = 'Click Me';
}

call Methode

Mit der Methode

call k?nnen Sie elementspezifische Methoden aufrufen (z. B. pause in einem Videoelement):

$('button').text('Click Me');

item Methode

Die Methode

item entspricht der eq -Methode von JQuery. Es gibt einen Nodelist zurück, der nur die Knoten enth?lt, die den Index bestehen:

$$('button').textContent = 'Click Me';

owner Attribute

Das Attribut

owner entspricht dem prevObject von JQuery.

$$('button').set('textContent', 'Click Me');

btns.style Gibt ein Stilarray zurück, w?hrend owner den von style abgebildeten Nodelist zurückgibt.

nodelist.js Kompatibilit?t

Meine Bibliothek ist mit allen wichtigen neuen Browsern kompatibel, wie unten beschrieben.

Browser Version Firefox 6 safari 5.0.5 Chrom 6 ie 9

Opera

11.6

Schlussfolgerung

Jetzt k?nnen wir endlich das nützliche Nodelist -Objekt verwenden!

Für eine Komprimierungsgr??e von ca. 4K erhalten Sie alle oben genannten und mehr, über die Sie im Github -Repository von nodelist.js erfahren k?nnen.

Da nodelist.js einen Browser als Abh?ngigkeit verwendet, ist kein Upgrade erforderlich. Wenn der Browser dem DOM -Element neue Methoden/Attribute hinzufügt, k?nnen Sie diese Methoden/Attribute automatisch über nodelist.js verwenden. All dies bedeutet, dass die einzige Abwertung, über die Sie sich Sorgen machen müssen, die Browserentfernungsmethode ist. Dies sind normalerweise sehr niedrige Verwendungsmethoden, da wir das Web nicht brechen k?nnen.

Was denkst du? Würden Sie in Betracht ziehen, diese Bibliothek zu verwenden? Fehlen wichtige Funktionen? Ich würde gerne Ihre Kommentare in den Kommentaren unten h?ren.

h?ufig gestellte Fragen zu DOM -Operationen mit nodelist.js

Was ist der Unterschied zwischen Nodelist und HTMLCollection?

Array.from() nodelist und htmlcollection sind beide Knotensammlungen. Der Hauptunterschied zwischen ihnen besteht darin, dass Nodelist jeden Knotentyp enthalten kann, w?hrend HTMLCollection eine Sammlung von Elementknoten ist. HTMLCollection ist ebenfalls dynamisch, dh sie wird automatisch aktualisiert, wenn sich die Dokumentstruktur ?ndert. Nodelist hingegen ist statisch und aktualisiert nicht, um ?nderungen im Dokument widerzuspiegeln.

Wie kann ich Nodelist in ein Array umwandeln? Sie k?nnen Nodelist mit der -Methode oder dem erweiterten Bediener in ein Array konvertieren. Hier erfahren Sie, wie es geht:

var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
  // do something
});
// 錯誤：nodes.forEach 不是函數(shù)

Warum gibt der JQuery -Selektor PrevObject anstelle eines normalen Elements zurück?

Die Verkettungsmechanismus von

jQuery funktioniert, indem sie frühere Objekte speichert, bevor ?nderungen vorgenommen werden. Auf diese Weise k?nnen Sie die Methode .end() verwenden, um in Ihren vorherigen Zustand wiederherzustellen. Wenn Sie das tats?chliche DOM -Element erhalten m?chten, k?nnen Sie die Methode oder die Array -Notation .get() verwenden.

Wie kann ich Nodelist durchlaufen?

Sie k?nnen die Nodelist mit der für die Schleife für ... von Schleifen oder forEach() Methode durchlaufen. Hier ist ein Beispiel mit A für Schleife:

var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
  // do something with nodes[i]
}

Wie verwendet die .prev () -Methode in jQuery?

Die .prev() -Methode in jQuery wird verwendet, um das ausgew?hlte Element unmittelbar neben dem vorherigen Geschwister auszuw?hlen. Wenn ein Selektor bereitgestellt wird, wird das vorherige Geschwisterelement nur dann abgerufen, wenn der Selektor übereinstimmt.

Ist JQuery im Jahr 2022 noch relevant?

W?hrend JQuery beim Start ein Spielver?nderer war, hat sich das moderne JavaScript-?kosystem erheblich ver?ndert. Viele der Funktionen, die JQuery beliebt machen, sind jetzt in JavaScript selbst integriert. JQuery ist jedoch immer noch weit verbreitet und gewartet, und es kann für einige Projekte eine gute Wahl sein.

Wie w?hlt ich einen bestimmten Knoten von Nodelist aus?

Sie k?nnen einen bestimmten Knoten von Nodelist mit der Array -Notation oder der item() -Methode ausw?hlen. Hier erfahren Sie, wie es geht:

[].forEach.call(document.querySelectorAll('div'), function(node) {
    // do something
});

Kann ich Methoden auf Nodelist verwenden, filtern und reduzieren?

nodelist ist kein Array, daher gibt es keine Methoden wie Karte, Filter und Reduzierung. Sie k?nnen Nodelist jedoch in ein Array umwandeln und diese Methoden dann verwenden.

Was ist der Unterschied zwischen QuerySelector und QuerySelectorall?

querySelector Gibt das erste Element in dem Dokument zurück, das mit dem angegebenen CSS -Selektor entspricht, und querySelectorAll gibt den Nodelist aller Elemente, die mit dem CSS -Selektor übereinstimmen, zurück.

Wie kann ich überprüfen, ob Nodelist leer ist?

Sie k?nnen überprüfen, ob Nodelist leer ist, indem Sie seine length Eigenschaft überprüfen. Wenn die L?nge 0 ist, ist Nodelist leer. Hier erfahren Sie, wie es geht:

var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true

Das obige ist der detaillierte Inhalt vonVerlieren Sie die JQuery Bloat. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!