An Elementen hangeln generelles Verständnisproblem

[waschbaersiegen]

Tach auch!
Bei mir dreht es sich rein um Greasemonkeyscripte! Habe zuletzt vor etwa 3 Jahren damit rumgespielt - auf niedrigem Niveau - aber es lief!
Generell komme ich gut klar bis auf mein riesen Problem mich an Elementen zielsicher rauf und runter zu hangeln. Damit "vertrödel" ich eine Zeit das ist Wahnsinn.

Ich suche "Hilfe zu Selbsthilfe für Dummies". Bei mir dauert das meist etwas länger bis es "klick" macht.

Als Beispiel einfach mal mein aktuelles Problem:
div[2]/ul/li/div/ul/li/img
oder auch
div#conversationsOverlay.overlay-box ul li.elements-container div.message-container ul li.action-area img

An das DIV komme ich noch problemlos ran.
var div = document.getElementById('conversationsOverlay');
Ich brauche aber das IMG ganz unten.
Man könnte jetzt alle IMG auf der Seite durch eine Schleife laufen lassen, aber Sinn und Zweck ist es für mich das hangeln richtig zu erlernen.

Gibt es vielleicht Addons ala Firebug die mir da weiterhelfen können?
Wie lerne ich die Ausgabe von Firebug zu lesen und zu interpretieren (XPath)?

Bin an einem frustriertem Punkt angekommen wo auch Google nicht mehr hilft. Einfach weil ich oft nicht verstehe was ich lese :/

[ChrisB]

Hi,

Ich brauche aber das IMG ganz unten.

„Das” Image, es gibt also nur genau ein einziges Image unterhalb des obersten DIVs?

Man könnte jetzt alle IMG auf der Seite durch eine Schleife laufen lassen, aber Sinn und Zweck ist es für mich das hangeln richtig zu erlernen.

Na dann hangel mal.

MfG ChrisB

[bubble]

Du musst dich ja nicht unbedingt selbst durchhangeln.

https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector
https://developer.mozilla.org/en-US/docs/Web/API/document.querySelectorAll

MfG
bubble

[unknown]

Wie lerne ich die Ausgabe von Firebug zu lesen und zu interpretieren (XPath)?

Dann könntest du auch gleich über XPath darauf zugreifen. http://wiki.greasespot.net/XPath_Helper
Die Syntax findest du haufenweise im Netz.
Dann musst du dir nur noch überlegen was du suchst.
Also, ein img-Element.
Welches? Das einzige/1./2./n-te in einem li-element mit dem class-Attribut action-area.
In einem bestimmten li-element? In jedem? Im Element unter einem div-Element mit dem class-Attribut message-container?
In welchem div? ....
Das machst du solange, bis du eindeutig dein gesuchtes Element gefunden hast.
Dann kannst du das mit getElementById/getElementByTagName/getElementByClassName/previousSibling/nextSibling/parentNode/childNodes/..., XPath oder CSS-Selektoren suchen.

[waschbaersiegen]

Ich denke das ist es was ich die ganze Zeit gesucht habe. Tatsächlich ist das simpel...runtergehen wie in einem Dateisystem.

var TheImage=$x('//div[@id="conversationsOverlay"]/ul/li/div/ul/li/img', XPathResult.FIRST_ORDERED_NODE_TYPE);  
// oder so...  
var TheImage=$x('/html/body/div[2]/header/div[2]/ul/li/div/ul/li/img', XPathResult.FIRST_ORDERED_NODE_TYPE);  
alert(TheImage.src);

Google + "XPath Tutorial deutsch" bringt auch etwas Licht in die Sache.
DA werde ich mich jetzt mal schlau lesen, weil wenn das mal richtig verschachtelt ist wird das im Detail bestimmt wieder trickreich.

Ich weiß schon warum ich die Frage hier gestellt habe... ;)
Danke für die schnelle Hilfe!