Überprüfen ob Element existiert, auslesen und wiedergeben

[Kazu]

Hallo Mitglieder,

Ich sitze derzeit an einem Script der auf der Plattform YouTube das Menü auf der linken Seite erweitert.

Ich habe es geschafft dort Menüpunkte hinzuzufügen, jedoch würde ich ebenfalls gerne anzeigen lassen wie viele neue Nachrichten man im Posteingang hat.

YouTube selbst erstellt, wenn es eine neue Nachricht gibt, dort ein Menüpunkt mit einer Zahl daneben, die der Anzahl der neuen Nachrichten entspricht.

Wenn eine neue Nachricht vorhanden ist wird dies hier generiert:

<a class="guide-item yt-uix-sessionlink" href="/inbox#messages/1" data-sessionlink="ei=CVNTUajLOaOvhgHglIDgCw&amp;feature=g-personal">  
Nachrichten  
                  <span class="guide-count yt-uix-tooltip" title="Neue Nachrichten">1</span>  
  
            </a>

So sieht mein Code derzeit aus, wie bereits gesagt fügt dieser nur Menüpunkte hinzu.

// ==UserScript==  
// @name            Extended YouTube Sidebar  
// @version         1.0.0  
// @author          KazutoTV  
// @description     You will see more options in the sidebar  
// @include	    *.youtube.com/*  
// @updateVersion   0  
// ==/UserScript==  
  
  
var username = document.getElementById('yt-masthead-user-displayname').innerText;  
var newMenu = '';  
  
newMenu += '<ul class="guide-user-links yt-box"><h3><a href="/user/'+ username +'" class="guide-item  narrow-item" data-channel-id="UCcMTfKgGf_7_3HC2hhEjrMw" data-upsell="guide"><span class="display-name">'+ username +'</span></a></h3>';  
newMenu += '<a class="guide-item " href="/my_videos" data-channel-id="watch_later">Video-Manager</a>';  
newMenu += '<a class="guide-item " href="/my_favorites" data-channel-id="watch_later">Favoriten</a>';  
newMenu += '<a class="guide-item " href="/feed/watch_later" data-channel-id="watch_later">Später ansehen</a>';  
newMenu += '<a class="guide-item " href="/feed/history" data-channel-id="history">Verlauf</a>';  
newMenu += '<a class="guide-item " href="/channel/UCcMTfKgGf_7_3HC2hhEjrMw/videos?view=1" data-channel-id="playlists">Playlists</a>';  
newMenu += '<a class="guide-item" href="/inbox" data-channel-id="messages">Posteingang</a>';  
newMenu += '<a class="guide-item" href="/analytics" data-channel-id="messages">Analytics</a>';  
newMenu += '<a class="guide-item" href="http://socialblade.com/youtube/user/'+ username +'" target="_blank">Social Blade</a></ul>';  
  
document.getElementById('gh-personal').innerHTML = newMenu;  
  

Wie kann ich es bewerkstelligen dass überprüft wird ob dieses Element existiert sowie den Wert auslesen und diesen dann wie im Original rechts davon anzeigen lassen?

Ich habe nicht viel Erfahrung in Javascript und dachte mir dass dies Ideal wäre um etwas Javascript zu lernen, habt also bitte Verständnis falls ich etwas nicht direkt verstehen sollte.

[bubble]

Wie kann ich es bewerkstelligen dass überprüft wird ob dieses Element existiert sowie den Wert auslesen und diesen dann wie im Original rechts davon anzeigen lassen?

Zu aller erst: du generierst invalides HTML.
Verpasse den Elementen eine ID und greif via document.getElementById(); dann auf die entsprechenden Elemente zu.

Für weiteres wende dich z.B. an die http://de.selfhtml.org/javascript/objekte/index.htm@title=Objekt-Referenz, unter anderem werden wohl http://de.selfhtml.org/javascript/objekte/node.htm@title=node und http://de.selfhtml.org/javascript/objekte/string.htm@title=String für dich sehr von Interesse sein.

Ich habe nicht viel Erfahrung in Javascript und dachte mir dass dies Ideal wäre um etwas Javascript zu lernen, habt also bitte Verständnis falls ich etwas nicht direkt verstehen sollte.

Greasemonkey-Scripts sind wohl nicht optimal um Javascript zu lernen.

MfG
bubble

[Kazu]

Zu aller erst: du generierst invalides HTML.
Verpasse den Elementen eine ID und greif via document.getElementById(); dann auf die entsprechenden Elemente zu.

Für weiteres wende dich z.B. an die http://de.selfhtml.org/javascript/objekte/index.htm@title=Objekt-Referenz, unter anderem werden wohl http://de.selfhtml.org/javascript/objekte/node.htm@title=node und http://de.selfhtml.org/javascript/objekte/string.htm@title=String für dich sehr von Interesse sein.

Ich generiere den HTML Code nicht, dies macht YouTube. Ich kann dort also keine ID anfügen.

Greasemonkey-Scripts sind wohl nicht optimal um Javascript zu lernen.

MfG
bubble

Okay, das wusste ich nicht.

[bubble]

Ich generiere den HTML Code nicht, dies macht YouTube. Ich kann dort also keine ID anfügen.

Seit wann verwendet Youtube denn Greasemonkey-Scripts?

// ==UserScript==  
// @name            Extended YouTube Sidebar  
// @version         1.0.0  
// @author          KazutoTV  
// @description     You will see more options in the sidebar  
// @include            *.youtube.com/*  
// @updateVersion   0  
// ==/UserScript==  
  
  
var username = document.getElementById('yt-masthead-user-displayname').innerText;  
var newMenu = '';  
  
newMenu += '<ul class="guide-user-links yt-box"><h3><a href="/user/'+ username +'" class="guide-item  narrow-item" data-channel-id="UCcMTfKgGf_7_3HC2hhEjrMw" data-upsell="guide"><span class="display-name">'+ username +'</span></a></h3>';  
newMenu += '<a class="guide-item " href="/my_videos" data-channel-id="watch_later">Video-Manager</a>';  
newMenu += '<a class="guide-item " href="/my_favorites" data-channel-id="watch_later">Favoriten</a>';  
newMenu += '<a class="guide-item " href="/feed/watch_later" data-channel-id="watch_later">Später ansehen</a>';  
newMenu += '<a class="guide-item " href="/feed/history" data-channel-id="history">Verlauf</a>';  
newMenu += '<a class="guide-item " href="/channel/UCcMTfKgGf_7_3HC2hhEjrMw/videos?view=1" data-channel-id="playlists">Playlists</a>';  
newMenu += '<a class="guide-item" href="/inbox" data-channel-id="messages">Posteingang</a>';  
newMenu += '<a class="guide-item" href="/analytics" data-channel-id="messages">Analytics</a>';  
newMenu += '<a class="guide-item" href="http://socialblade.com/youtube/user/'+ username +'" target="_blank">Social Blade</a></ul>';  
  
document.getElementById('gh-personal').innerHTML = newMenu;

Das ist doch dein Code oder nicht?

So sieht mein Code derzeit aus, wie bereits gesagt fügt dieser nur Menüpunkte hinzu.

Ach ist es ja doch.

Innerhalb von Listen (ul- und ol-Elemente) sind nur Listen und Listeneinträge (li-Elemente) erlaubt. Du prügelst aber direkt a-Elemente rein.

Was die IDs angeht, da hab ich dich wohl falsch verstanden. Du willst quasi nur die Elemente hinzufügen, die noch nicht vorhanden sind, oder?

Nun ich gehe mal davon aus.

Die a-Elemente unterscheiden sich in alle im gleichen Attribut, nämlich @href.
Also lass finde alle a-Elemente mit http://de.selfhtml.org/javascript/objekte/node.htm#get_elements_by_tag_name@title=getElementsByTagName(), lege sie in einem http://de.selfhtml.org/javascript/objekte/array.htm@title=Array ab. Erzeuge ein zweites Array mit allen @href-Werten die du eventuell selbst hinzufügen willst. Dann  iteriere durch deine Liste mit den a-Elementen und ermittle den @href-Wert mit http://de.selfhtml.org/javascript/objekte/node.htm#get_attribute@title=getAttribute(), wenn dieser Wert in deinem zweiten Array vorkommt, lösche ihn aus dem zweiten Array.

Am Ende hast du dann ein Array mit allen @href-Werten, deren Links NICHT exisitieren.

MfG
bubble

[Kazu]

Seit wann verwendet Youtube denn Greasemonkey-Scripts?

Oh, dann habe ich dich falsch verstanden. Ich dachte du meinst den HTML Code welcher generiert wird wenn eine neue Nachricht eintrifft.

Innerhalb von Listen (ul- und ol-Elemente) sind nur Listen und Listeneinträge (li-Elemente) erlaubt. Du prügelst aber direkt a-Elemente rein.

Das hatte ich bis vor kurzem, habe aber gemerkt dass es auch ohne li-Elemente funktioniert. Ich werde dort dann li-Elemente eintragen.

Was die IDs angeht, da hab ich dich wohl falsch verstanden. Du willst quasi nur die Elemente hinzufügen, die noch nicht vorhanden sind, oder?

Genau. Momentan ersetzte ich das gesamte Menü durch meine Menüpunkte.

Nun ich gehe mal davon aus.

Die a-Elemente unterscheiden sich in alle im gleichen Attribut, nämlich @href.
Also lass finde alle a-Elemente mit http://de.selfhtml.org/javascript/objekte/node.htm#get_elements_by_tag_name@title=getElementsByTagName(), lege sie in einem http://de.selfhtml.org/javascript/objekte/array.htm@title=Array ab. Erzeuge ein zweites Array mit allen @href-Werten die du eventuell selbst hinzufügen willst. Dann  iteriere durch deine Liste mit den a-Elementen und ermittle den @href-Wert mit http://de.selfhtml.org/javascript/objekte/node.htm#get_attribute@title=getAttribute(), wenn dieser Wert in deinem zweiten Array vorkommt, lösche ihn aus dem zweiten Array.

Am Ende hast du dann ein Array mit allen @href-Werten, deren Links NICHT exisitieren.

MfG
bubble

Tut mir leid, ich weiß zwar was Arrays sind und im Grunde auch wie diese funktionieren, jedoch weiß ich nicht wirklich wie man diese verwendet. Zudem habe ich deine Anleitung nur halb verstanden. Da ich vorher noch nie richtig mit Javascript gearbeitet habe, verstehe ich nicht viel darüber.