AW: GetElementByClass bzw. ByTagName
28.11.2017 14:58:41
Zwenn
Hallo Oliver,
Du kommst so nicht an die eigentliche Modellnummer, weil Du ein Array bildest, in dem die Modellnummer nicht enthalten ist. Ich fand das am Anfang auch verwirrend, aber eigentlich ist es ganz einfach. Vergegenwärtge Dir, dass jedes Array-Element in knotenAst2 die HTML-Strukturen des Browser Dokuments enthält, die jeweils vom öffnenden, bis zum schließenden Tag Deiner gesetzten Bedingung reicht. Das ganze Vorgehen basiert übrigens auf dem DOM (Document Object Model), weshalb die Variablen zur Aufnahme der HTML-Unterstrukturen als Object deklariert werden müssen. Es sind keine Strings, weshalb man am Ende immer mit innertext oder seinen Brüdern arbeiten muss.
In Deinem Fall hast Du zu kleine HTML-Ausschnitte in knotenAst2 versammelt. Denn Du baust das Array knotenAst2 mit folgender Zeile auf:
Set knotenAst2 = browser.document.getElementsByClassName("attr-name")
Der CSS-Klassenname attr-name ist ausschließlich Tags der Tabelle zugeordnet, in der auch die Modellnummer steht. Aber, die Klasse ist span-Tags zugeordnet, die abgeschlossen werden, bevor die Zeile mit den zugeordneten Werten in der Tabelle angesprochen wird. Du sammelst also nur die Kopfzeile ein.
Dein Array ergibt sich zu folgendem:
(Spitze HTML-Klammern aus Forengründen gegen Eckige ausgetauscht)
knotenAst2(0) = [span class="attr-name" title="Type"]Type:[/span]
knotenAst2(1) = [span class="attr-name" title="Cake Tools Type"]Cake Tools Type:[/span]
knotenAst2(2) = [span class="attr-name" title="Material"]Material:[/span]
knotenAst2(3) = [span class="attr-name" title="Certification"]Certification:[/span]
knotenAst2(4) = [span class="attr-name" title="Feature"]Feature:[/span]
knotenAst2(5) = [span class="attr-name" title="Place of Origin"]Place of Origin:[/span]
knotenAst2(6) = [span class="attr-name" title="Brand Name"]Brand Name:[/span]
knotenAst2(7) = [span class="attr-name" title="Model Number"]Model Number:[/span]
knotenAst2(8) = [span class="attr-name" title="Product name"]Product name:[/span]
knotenAst2(9) = ...
knotenAst2(...) = ...
knotenAst2(n) = ...
Nun könnte man auf die Idee kommen, knotenAst2 eben aus class="attr-value" aufzubauen. Dann hat man zwar auch die Modellnummer eingefangen, man kann sie aber nicht identifizieren. Es wird also ein Array benötigt, dass die HTML-Strukturen beinhaltet, die beide notwendigen span-Tag-Zeilen enthält. Eine zur identifikation und eine mit dem gesuchten Wert.
Man schaut sich also die umgebenden Tags der HTML-Strukturen an, die wir brauchen. Dann kommt man darauf, dass alles was wir benötigen in li-Tags eingeschlossen ist:
[li]
[span class="attr-name" title="Model Number"]Model Number:[/span]
[span class="attr-value" title="JSF084"]JSF084[/span]
[/li]
Problem: Die li-Tags stehen nackt da. Die haben nicht mal ein Attribut. Jetzt gibt es zwei Wege, die man einschlagen kann. Entweder bildet man mit getElementsByTagName("li") ein Array über sämtliche li-Tags der Seite und geht sie durch oder man schaut eine Ebene höher, in was die benötigten li-Tags eingeschlossen sind.
Ich empfehle grundsätzlich die zweite Methode, da man sonst erstmal damit beschäftigt ist rauszufinden, welche Regeln man einhalten muss, um aus allen li-Tags die richtigen zu selektieren. So kann es ja sein, dass auch andere li-Tags mit class="attr-name" oder class="attr-value" versehen wurden. Wenn man sich hingegen an den Grundsatz hält, den kleinst möglichen HTML-Ausschnitt zu wählen, ist man den ganzen Rest des Seiten-Quelltextes sofort los.
Die li-Tags sind für unser Vorhaben ausserdem sehr geeignet für die empfohlene Methode. Schließlich gehören sie normalerweise zu einer Hierarchie von Tags. So auch hier. Alle li-Tags sind in einem ul-Tag vereinigt. Diesem ul-Tag wurde class="attr-list" zugewiesen.
Bevor wir uns darauf stürzen, muss unbedingt geprüft werden, ob diese CSS-Klasse noch woanders auf der Seite verwendet wird. Das ist nicht der Fall, also bilden wir als ersten Schritt ein Array mit getElementsByClassName("attr-list"). Da wir wissen, dass dieses Array nur ein einziges Element enthält, bzw. das erste Array-Element ist, können wir direkt darauf zugreifen, indem wir den Index des ersten Array-Elements angeben: getElementsByClassName("attr-list")(0).
Nur, um es noch einmal zu verdeutlichen:
Das einzige Array-Element enthält die gesamte HTML-Struktur, die vom öffnenden Tag, das den gesuchten CSS-Klassennamen attr-list enthält, bis zum schließenden Tag reicht
knotenAst2(0) =
[ul class="attr-list"]
[li]
[span class="attr-name" title="Type"]Type:[/span]
[span class="attr-value" title="Cake Tools"]Cake Tools[/span]
[/li]
[li]
[span class="attr-name" title="Cake Tools Type"]Cake Tools Type:[/span]
[span class="attr-value" title="Moulds"]Moulds[/span]
[/li]
[li]
[span class="attr-name" title="Material"]Material:[/span]
[span class="attr-value" title="Silicone, 100% eco-friendly food grade silicone"] _
Silicone, 100% eco-friendly food grade silicone[/span]
[/li]
[li]
[span class="attr-name" title="Certification"]Certification:[/span]
[span class="attr-value" title="FDA, LFGB, SGS, FDA, LFGB, RoHS by SGS"]FDA, LFGB, SGS, _
FDA, LFGB, RoHS by SGS[/span]
[/li]
[li]
[span class="attr-name" title="Feature"]Feature:[/span]
[span class="attr-value" title="Eco-Friendly, Stocked"]Eco-Friendly, Stocked[/span]
[/li]
[li]
[span class="attr-name" title="Place of Origin"]Place of Origin:[/span]
[span class="attr-value" title="Zhejiang, China (Mainland)"]Zhejiang, China (Mainland)[/ _
span]
[/li]
[li]
[span class="attr-name" title="Brand Name"]Brand Name:[/span]
[span class="attr-value" title="SILIKOLOVE"]SILIKOLOVE[/span]
[/li]
[li]
[span class="attr-name" title="Model Number"]Model Number:[/span]
[span class="attr-value" title="JSF084"]JSF084[/span]
[/li]
[li]
[span class="attr-name" title="Product name"]Product name:[/span]
[span class="attr-value" title="9 Cavity Flower Debossing Design Silicon Cake _
Decorating Tools Set"]9 Cavity Flower Debossing Design Silicon Cake Decorating Tools Set[/span]
[/li]
[li]
[span class="attr-name" title="Size"]Size:[/span]
[span class="attr-value" title="9.5*9.5*1.3cm"]9.5*9.5*1.3cm[/span]
[/li]
[li]
[span class="attr-name" title="Color"]Color:[/span]
[span class="attr-value" title="As picture or as your request"]As picture or as your _
request[/span]
[/li]
[li]
[span class="attr-name" title="Weight"]Weight:[/span]
[span class="attr-value" title="91g"]91g[/span]
[/li]
[li]
[span class="attr-name" title="MOQ"]MOQ:[/span]
[span class="attr-value" title="10pcs for cake decorating set"]10pcs for cake _
decorating set[/span]
[/li]
[li]
[span class="attr-name" title="Logo"]Logo:[/span]
[span class="attr-value" title="Embossed, Debossed, Printed(Customized)"]Embossed, _
Debossed, Printed(Customized)[/span]
[/li]
[li]
[span class="attr-name" title="Packing"]Packing:[/span]
[span class="attr-value" title="1pc/opp bag or custom for cake decorating tools set"] _
1pc/opp bag or custom for cake decorating tools set[/span]
[/li]
[li]
[span class="attr-name" title="Temperature range"]Temperature range:[/span]
[span class="attr-value" title="-40℃~ 250℃"]-40℃~ 250℃[/span]
[/li]
[/ul]
Mit diesem HTML-Ausschnitt können wir jetzt arbeiten, wie vorher mit dem gesamten Dokument. Wie Eingangs erwähnt, handelt es sich um ein Objekt und nicht um einen String. Wir können also weiterhin alle Methoden verwenden, die auf das DOM anwendbar sind und wir können die Objektstruktur ausnutzen.
Jetzt ist die Tatsache relevant, dass die li-Tags zwar noch immer nackt dastehen, es aber nur noch relevante li-Tags gibt. Deshalb bilden wir nun das ersehnte Array aus den li-Tags. Wie gesagt, können wir die Objekt-Struktur ausnutzen. Das machen wir, indem wir getElementsByTagName("li") getrennt durch den Punkt-Operator, direkt hinter den Befehl zum Bilden des zuvor benötigten Arrays schreiben:
set knotenAst2 = browser.document.getElementsByClassName("attr-list")(0).getElementsByTagName(" _
li")
Jetzt liegt ein Array vor, das Du so verwenden kannst, wie in meinem Ausgangsskript. Am Besten, Du spielst mit diesen Strukturen mal rum und lässt Dir an unterschiedlichen Stellen z.B. mal den innertext von Array-Elementen ausgeben. Dann siehst Du z.B. dass der innertext, in dem Du mit instr() nach dem Teilstring "Model Number" suchst, auch die Modellnummer selbst bereits enthält. Warum? Weil innertext nicht auf Tag-Grenzen achtet. Es wird einfach alles ausgegeben, was reiner Text ist.
Mit dieser einigermaßen ausführlichen Erläuterung solltest Du in der Lage sein, auch andere Werte auslesen zu können.
Viele Grüße,
Zwenn