Forum: PC-Programmierung javascript querySelectorAll


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Martin D. (mdewendt)


Lesenswert?

Hallo.

Ich bin absoluter Anfänger was javascript an geht.
Ich möchte unter Chrome mit Tampermonkey ein User Script erstellen, 
welches den Wert von data-sonne aus folgendem Code ausliesst:

... <li data-haus="123" data-baum="abcd" data-sonne=678>Text</li> ...

Mit

const nodeList= document.querySelectorAll("[data-sonne]");
nodeList.forEach(li => console.log(li));

erhalte ich schonmal die entsprechenden ganzen Codezeilen. Ich möchte 
aber nur den Wert (hier zB 678) erhalten. Erstmal als console.log 
ausgeben und später an eine URL (zB 
http://webserver.internal/data.php?sonne=678) übergeben.

1.) wie komme ich nur an den Wert?
2.) wie rufe ich später die URL auf?
Vielen Dank.

Martin

von Εrnst B. (ernst)


Lesenswert?

Martin D. schrieb:
> 1.) wie komme ich nur an den Wert?

einfach per "getAttribute" auslesen.
1
const nodeList= document.querySelectorAll("[data-sonne]");
2
nodeList.forEach(li => console.log(li.getAttribute("data-sonne"));

Martin D. schrieb:
> 2.) wie rufe ich später die URL auf?

Kommt darauf an, was du mit aufrufen meinst.

Links zum Klicken erstellen?
Iframes mit src=.... erstellen?
Daten per "fetch()" im Script laden?

: Bearbeitet durch User
von Martin D. (mdewendt)


Lesenswert?

Hallo Ernst

Das war ja einfach. Danke.

Martin D. schrieb:
> 2.) wie rufe ich später die URL auf?

Ich möchte statt console.log die Daten an die URL 
http://webserver.internal/data.php?sonne=678 übergeben. Nichts anklicken 
müssen oder die aktuelle Seite verändern etc. Das javascript soll die 
URL mit dem Übergabeparameter aufrufen.

Martin

von Daniel A. (daniel-a)


Lesenswert?

Εrnst B. schrieb:
> Martin D. schrieb:
>> 1.) wie komme ich nur an den Wert?
>
> einfach per "getAttribute" auslesen.const nodeList=
> document.querySelectorAll("[data-sonne]");
> nodeList.forEach(li => console.log(li.getAttribute("data-sonne"));

Für eigene data-* attribute gibt es extra die "dataset" eigenschaft:
1
const nodeList= document.querySelectorAll("[data-sonne]");
2
nodeList.forEach(li => console.log(li.dataset.sonne));

Darüber kann man die auch erstellen / setzen oder löschen. Ist simpler 
als die Funktionen zu nutzen.

PS: Dir fehlt da ein )

von Franko S. (frank_s866)


Lesenswert?

Wenn deine attribute eindeutig sind geht auch
wert = getElementById("dataSonne").value;
In wert stehen dann deine 678

dann musst nicht über <li> an an die Werte ran.


Martin D. schrieb:
> müssen oder die aktuelle Seite verändern etc. Das javascript soll die
> URL mit dem Übergabeparameter aufrufen.
Hier nimmt man fetch, früher das nahm man das xhtmlRequest-Ojekt.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.