Wann sind zwei HTML-DOMS gleich?

Question

Sind DOMs gleich, wenn sie nicht in der gleichen Reihenfolge sind, aber für jeden Typ dieselbe Anzahl von Elementen haben?

wie folgt aus:

First DOM Element ="<div> 
        <img/> 
        <span/> 
        <div> 
         <img/> 
        </div> 
        </div>"; 

Second DOM Element = "<div> 
         <img/> 
         <img/> 
         <span> 
         <div/> 
         </span> 
         </div>"; 

In dieser praktisch probieren, wenn ich die gleiche Anzahl von Elementen Typ haben, hat die Reihenfolge der Elemente Materie ist, sind die DOM noch gleich?

Dank

Answer 1

Vom specification:

Ein Knoten 'A' entspricht einem Knoten 'B', wenn alle folgenden Bedingungen erfüllt sind:

[andere Kürze halber entfernt Bedingungen]

• Jedes Kind von 'A' entspricht dem Kind von 'B' am identischen Index.

Wenn also die untergeordneten Elemente nicht gleich geordnet sind, werden sie nicht als gleich angesehen.

Answer 2

Beim Vergleich von Elementknoten mit untergeordneten Elementen wird .isEqualNode() rekursiv auf Paare untergeordneter Knoten bei entsprechenden Indizes angewendet, und jeder untergeordnete Knoten muss dem anderen entsprechen.

Die DOM-Unterbaumstrukturen müssen also genau gleich aussehen. Das heißt, der Wert von A.childNodes[0] muss (nach den Regeln von .isEqualNode()) dem Wert B.childNodes[0] und so weiter entsprechen.

Hinweis, dass es andere Regeln für .isEqualNode() auch: die Attribute die gleichen mit den gleichen Werten sein müssen, offensichtlich die Knotentypen gleich sein müssen usw.

Answer 3

Nein, sie nicht gleich sind, da ist first :

1 div

| _ 1 img

| _ 1 Spanne

| _ 1 div

..etc ..

Der zweite enthält stattdessen:

1 div

| _ 2 img < --- Hier ist schon anders

..etc .. .

Die Funktion isEqualNode gibt true zurück, wenn sie den gleichen Typ haben und Eigenschaften definieren (für Elemente wäre dies t Erben ID, Anzahl der Kinder usw.), ihre Attribute stimmen überein und so weiter.

Siehe folgende Ausschnitt bitte:

let divList = document.getElementsByTagName("div"); 
 

 
function test(p1, p2) { 
 
    console.log("div " + p1 + " equals div " + p2 + ": " + divList[p1].isEqualNode(divList[p2])); 
 
} 
 

 
test(0, 0); 
 
test(0, 1); 
 
test(0, 2);

<div>This is the first element.</div> 
 
<div>This is the second element.</div> 
 
<div>This is the first element.</div>

Ich hoffe, es war klar, bye.