Web Scraping

Diskutiere Web Scraping im Java Basics - Anfänger-Themen Bereich.
N

Nexuz89

ich hab es die letzten 4 stunden versucht selber zumachen, leider scheiter es an diesen punkten:
  1. function productObject(e) {
  2. const result = {};
  3. result.title = e.querySelector('h2').innerText.trim()data-t-id
  4. result.price = e.querySelector('dd[data-product-price]').innerText
  5. result.url = e.querySelector('a').href
  6. return result
Ich weiss leider nicht wie ich den Http code auslese, ich erkenne die elemente nicht bzw sind sie immer anderest geschrieben :/
Ich find das element nicht für die Artikel Bezeichnung ??
 

Anhänge

G

Gelöschtes Mitglied 9001

Ich bin ja sonst eher von der gutmütigen Seite, aber das hier sieht in meinen Augen etwas zwielichtig aus: Jemand registriert sich im Forum und nahezu der erste Thread ist einer, in der in jedem zweiten Posting darum gebeten wird, dass andere für ihn Algorithmen schreiben, die Daten von Webseiten abgreifen oder das gar gleich komplett übernehmen sollen.
 
N

Nexuz89

hallo, nein ist es nicht, es ist mir selber bisschen unangenehm gefragt zuhaben leider bin ich ein totaler Anfänger und bin unerfahren und brauche die Unterstützung und bin sehr dankbar für eure Meinung.
Ich habe paar codes entschlüsselt (und ich denke ich werde besser :) ) leider auf lidl.ch bekomme ich den preis nicht raus.
 
N

Nexuz89

hallo, nein ist es nicht, es ist mir selber bisschen unangenehm gefragt zuhaben leider bin ich ein totaler Anfänger und bin unerfahren und brauche die Unterstützung und bin sehr dankbar für eure Meinung.
Ich habe paar codes entschlüsselt (und ich denke ich werde besser :) ) leider auf lidl.ch bekomme ich den preis nicht raus.
ich meinte den sreenshot
 

Anhänge

mihe7

mihe7

Da steht der Preis nicht im Text sondern im content-Attribut, wenn ich es richtig sehe.
 
N

Nexuz89

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.
 
mihe7

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
Javascript:
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.
 
J

JustNobody

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

Aber gut geschrieben.
 
mihe7

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.
 
Thema: 

Web Scraping

Passende Stellenanzeigen aus deiner Region:
Anzeige

Neue Themen

Anzeige

Anzeige
Oben