Web Scraping

[Nexuz89]

https://www.forschung-und-lehre.de/recht/grenzen-des-web-scrapings-2421/

Etwas Lesestoff zur rechtlichen Seite des Vorhabens.

Vielen dank, wir haben mit unsere Rechtsberatung schon kontakt aufgenommen, für unser vorhaben ist es erlaubt.

 

[mihe7]

wie schreib ich das den wenn es im content-Attribut drin ist ?

.content?

 

[Nexuz89]

.content?

result.price = e.querySelector('strong.content]').innerText
result.price = e.querySelector('.content]').innerText
result.price = e.querySelector('span.content]').innerText

leider lässt sich der text nicht kopieren, hab jetzt alles varianten aus probiert.

 

[thecain]

Was soll denn die schliessende eckige Klammer da?

 

[mihe7]

leider lässt sich der text nicht kopieren, hab jetzt alles varianten aus probiert.

Also, Crashkurs HTML/CSS/JavaScript, sonst werden wir da nie fertig.

HTML ist erstmal Text. Der Browser erstellt daraus ein objektorientiertes Modell, das sog. Document Object Model, kurz DOM. Weil dieses Modell eine Baumstruktur ist, wird dieser Baum auch als DOM-Tree bezeichnet. Ein Baum hat die schöne Eigenschaft, dass dieser aus Bäumen besteht und jeder Knoten als Wurzel eines (Teil-)Baums betrachtet werden kann. Die Wurzel des DOM-Tree ist das Objekt, das in JavaScript mittels document angesprochen wird.

Natürlich ist HTML nicht beliebiger Text, vielmehr folgt dessen Aufbau strengen Regeln. Für Elemente werden im Text spezielle Markierungen (engl. Tag) verwendet, die in spitzen Klammern zu schreiben sind. Bestimmte Elemente haben öffnende und schließende Tags, andere bestehen dagegen nur aus einem einfachen Tag.

So wird im Text mittels <a href="#">Test</a> der Inhalt, der sich zwischen dem öffnenden <a> und dem schließenden </a> (hier also der Text "Test") befindet, als Link zur URI "#" markiert. Im DOM würde das auf ein entsprechendes Objekt abgebildet werden.

Während HTML den Inhalt einer Seite definiert, wird mit CSS das Aussehen der Seite beeinflusst. CSS ist ebenfalls Text, dessen Aufbau sich von HTML unterscheidet. Wichtig ist an dieser Stelle, dass man in CSS für ein Element oder eine Gruppe von Elementen Regeln definieren kann, durch die die Darstellung der Elemente beschrieben werden.

Die Frage ist jetzt, wie man in einer solchen Regel angibt, auf welche HTML-Elemente sie anzuwenden ist. Dafür existieren CSS-Selektoren. Es gibt verschiedene Arten von Selektoren, Details findest Du unter https://developer.mozilla.org/de/docs/Web/CSS/CSS_Selectors.

So kann mittels Typselektor der Typ des Elements angegeben werden. Attributselektoren werden in eckigen Klammern angeben, so werden mit dd[data-product-price] HTML-Elemente des Typs dd gewählt, die über das Attribut data-product-price verfügen. Man kann auch nach konkreten Inhalten bei Attributen selektieren, dazu schreibt man in den eckigen Klammern eben einen Vergleich, so würden mit dd[data-product-title='price'] nur dd-Elemente angesprochen, deren data-prduct-title-Attribut den Wert "price" besitzen.

Einen Sonderfall nimmt das Attribut class ein, mit dem sich einem HTML-Element eine oder auch mehrere CSS-Klassen zuweisen lassen. Selektiert werden diese über einen Klassenselektor, bei dem der Name der CSS-Klasse ein Punkt voranzustellen ist. Hast Du also ein Element <div class="title">, so kann dieses mit div.title selektiert werden. Dieser Selektor besteht nun aus einem Typselektor (div) und einem Klassenselektor (.title). Willst Du dagegen alle Elemente (unabhängig vom Typ) mit dieser Klasse haben, lässt Du den Typselektor einfach weg und gibst .title an.

So viel zu CSS. Kommen wir zu JavaScript. In JavaScript hast Du die Möglichkeit, auf die Objekte des oben genannten DOM-Tree zuzugreifen. Elemente kannst Du (unter anderem) mit Hilfe von CSS-Selektoren suchen. Dafür bieten die HTML-Element-Objekte (aus dem DOM) zwei Methoden an: querySelector und querySelectorAll. Diese Methoden durchsuchen mit Hilfe des angegebenen CSS-Selektors den Teilbaum des Elements, auf das die Methode angewendet wird. Der Unterschied zwischen den beiden Methoden ist einfach der, dass querySelector das erste Element liefert, auf das der Selektor passt, während querySelectorAll eine Liste aller passenden Elemente zurückgibt.

In der Funktion

function productObject(e) {
    const result = {};
    result.title = e.querySelector('h2').innerText.trim()
    result.price = e.querySelector('dd[data-product-price]').innerText
    result.url = e.querySelector('a').href
    return result;
}

wird als Parameter ein HTML-Element (Objekt aus dem DOM) erwartet, das in der Funktion mit e angesprochen wird. Durch e.querySelector wird also gerade der Teilbaum des Dokuments durchsucht, dessen Wurzel das Element e ist.

e.querySelector("h2") liefert somit das erste h2-Element in dem von e definierten Teilbaum des Dokuments. HTML-Elemente haben Attribute, auf die in JavaScript zugegriffen werden kann. Eines dieser Attribute ist innerText, mit dem der Text (ohne das HTML-Markup) ausgelesen werden kann. So würde document.body.innerText den gesamten Text des Dokumentinhalts liefern - aber eben ohne HTML. Im Gegensatz dazu liefert innerHTML den Text inkl. Markup. Probiers einfach mal in der Konsole aus.

e.querySelector("h2").innerText liefert also den Text, der zwischen dem öffnenden und dem schließenden h2-Tag steht (das sich wiederum in dem von e definierten Teilbaum befinden muss). Da es sich um Text handelt, können mit trim() überflüssige Leerzeichen abgeschnitten werden.

Analog dazu kannst Du nicht nur auf innerText sondern auch auf andere Attribute zugreifen. Beispielsweise wird in der vorletzten Zeile auf das href-Attribut des a-Elements zugegriffen. Das funktioniert aber nur für bestimmte Attribute. Das "content"-Attribut ist kein Standardattribut und muss daher anders ausgelesen werden, nämlich mit Hilfe der Methode getAttribute().

e.querySelector("strong.pricefield__price").getAttribute("content")

Damit sollte nun alles geklärt sein. Ggf. musst Du Dich schrittweise an die Elemente (und an die Materie) herantasten. Naschlagewerk Nummer 1 in dem Zusammhang ist das Mozilla Developer Network (MDN), das ich oben schon für die Selektoren angegeben habe.

 

[kneitzel]

Ja, schon schlimm, dass sich so Einführungen im Netz nicht finden

Aber gut geschrieben.

 

[mihe7]

Ja, schon schlimm, dass sich so Einführungen im Netz nicht finden

Ich weiß auch nicht, wo das Problem liegt. Das war jetzt eine Kurzversion speziell für sein Vorhaben, aber generell wäre es zu empfehlen, sich mal tiefer mit der Materie zu befassen. So schwer ist das nun auch nicht.