Node.isEqualNode() — Methode · JavaScript-Referenz

Signatur

Node.prototype.isEqualNode(otherNode)

Beschreibung

isEqualNode() vergleicht zwei DOM-Knoten inhaltlich. Zwei Knoten gelten als gleich, wenn sie denselben nodeType haben und die typspezifischen Merkmale übereinstimmen: bei Elementen Namensraum, Präfix, lokaler Name und die Menge der Attribute (Name, Namensraum und Wert); bei Text- und Kommentarknoten der Textinhalt (data); bei Doctypes Name, publicId und systemId. Außerdem müssen die Kindknoten in gleicher Anzahl und Reihenfolge ebenfalls gleich sein – der Vergleich läuft also rekursiv über den ganzen Teilbaum.

Damit unterscheidet sich die Methode grundlegend von isSameNode() bzw. dem Operator ===, die nur auf Identität prüfen (ist es genau dasselbe Objekt?). isEqualNode() eignet sich deshalb z. B. für Tests, um zu prüfen, ob ein gerendertes Fragment einem erwarteten Aufbau entspricht, oder um unnötige DOM-Aktualisierungen zu vermeiden, wenn neuer Inhalt identisch zum bestehenden ist.

Die Reihenfolge der Attribute spielt keine Rolle, die Reihenfolge der Kindknoten dagegen schon. Auch reine Leerzeichen-Textknoten zählen als Kinder – unterschiedliche Einrückung im HTML führt also zu false.

Parameter

Name	Typ	Default	Beschreibung
$otherNode Pflicht	Node \| null		Der Knoten, mit dem verglichen werden soll. Bei `null` liefert die Methode immer `false`.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn beide Knoten (einschließlich ihres gesamten Teilbaums) gleich sind, sonst false.

Beispiele

Gleichheit vs. Identität

const a = document.createElement('p');
a.textContent = 'Hallo';
const b = a.cloneNode(true);

console.log(a.isEqualNode(b)); // gleicher Aufbau
console.log(a === b);          // verschiedene Objekte
console.log(a.isSameNode(b));

true false false

Attribut-Reihenfolge egal, Werte nicht

const tpl = document.createElement('template');
tpl.innerHTML = `
  <a href="/start" class="nav">Start</a>
  <a class="nav" href="/start">Start</a>
  <a class="nav" href="/home">Start</a>`;

const [l1, l2, l3] = tpl.content.querySelectorAll('a');
console.log(l1.isEqualNode(l2));
console.log(l1.isEqualNode(l3));

true false

Unnötiges DOM-Update vermeiden

const updateList = (container, items) => {
  const next = document.createElement('ul');
  for (const item of items) {
    const li = document.createElement('li');
    li.textContent = item;
    next.append(li);
  }
  const current = container.firstElementChild;
  if (current && current.isEqualNode(next)) {
    console.log('Keine Änderung – DOM bleibt unangetastet');
    return;
  }
  container.replaceChildren(next);
  console.log('Liste aktualisiert');
};

const box = document.createElement('div');
updateList(box, ['Äpfel', 'Birnen']);
updateList(box, ['Äpfel', 'Birnen']);
updateList(box, ['Äpfel', 'Kirschen']);

Liste aktualisiert Keine Änderung – DOM bleibt unangetastet Liste aktualisiert

Fallstrick: Leerzeichen-Textknoten

const wrap = document.createElement('div');
wrap.innerHTML = '<ul><li>A</li></ul><ul>\n  <li>A</li>\n</ul>';
const [u1, u2] = wrap.children;

console.log(u1.isEqualNode(u2)); // u2 hat zusätzliche Textknoten
console.log(u1.childNodes.length, u2.childNodes.length);

false 1 3

// Wichtig · Fallstricke

Nur Attribute und Struktur zählen: Eigenschaften, die nicht als Attribut gespiegelt sind (z. B. der aktuelle value eines <input> nach einer Benutzereingabe, checked-Zustand, Event-Listener, eigene JS-Eigenschaften), fließen nicht in den Vergleich ein.
Leerzeichen und Kommentare sind echte Kindknoten – unterschiedliche Formatierung ergibt false. Gegebenenfalls vorher mit normalize() zusammenführen bzw. Leerzeichen-Knoten entfernen.
Das style-Attribut wird als Zeichenkette verglichen: "color:red" und "color: red" gelten als verschieden.
Shadow-Roots werden nicht mitverglichen, nur der Light-DOM-Teilbaum.
Performance: Der Vergleich ist rekursiv; bei großen Teilbäumen kann er teuer sein. Für reine Identitätsprüfung immer === verwenden.
Kompatibilität: in allen modernen Browsern seit Jahren unterstützt, ebenso in jsdom (Node.js-Tests).

Siehe auch

Node.isSameNode() Node.cloneNode() Node.contains() Node.normalize() Node.compareDocumentPosition() Node new OscillatorNode()