Eindeutiger Selektor via Script ansprechen

[robert71]

Hallo! Vorab ich bin kein HTML oder JS Profi - Grundlagen und ein wenig mehr sind vorhanden.

Ich habe eine kleine HTML-Seite und wenn ich mir über Firefox / Element untersuchen den eindeutigen Selektor kopiere und ausgebe, lautet dieser:
#meinWrapper > div:nth-child(8) > div:nth-child(1) > input:nth-child(2)

Jetzt möchte ich am Ende innerhalb eines Scripttags dieses Element ansprechen und die Hintergrundfarbe ändern - aber ich bekomme es einfach nicht hin, den eindeutigen Selektor auch anzusprechen.

Momentan versuch ichs so:

<script>
var a = document.getElementById("meinWrapper").children[8].children[1].children[2];
a.style.backgroundcolor = "red"; 
</script>

Leider ohne Erfolg. Wäre für jeden Hinweis dankbar :-)

[MinusKamel]

backgroundColor

[Matthias Apsel]

Hallo robert71,

#meinWrapper > div:nth-child(8) > div:nth-child(1) > input:nth-child(2)

document.querySelector() erlaubt die Verwendung der CSS-Syntax. Außerdem musst du „backgroundColor“ schreiben.

Bis demnächst
Matthias

[MudGuard]

Hi,

#meinWrapper > div:nth-child(8) > div:nth-child(1) > input:nth-child(2) var a = document.getElementById("meinWrapper").children[8].children[1].children[2];

m.W. fängt CSS bei der Kinderzählung bei 1 an, Javascript bei 0.

Und da war doch auch noch ein Problem mit den Whitespace-Textnodes zwischen den Elementen ...

==> wenn Du dem Element keine id verpassen kannst, mit der der Zugriff deutlich vereinfacht wäre, dann eher querySelector() benutzen, dann ist die Syntax identisch.

cu,
Andreas a/k/a MudGuard

[robert71]

Hallo! Danke für die Antworten...leider kann ich keine ID verpassen - da es ein JS-Viewer ist der eingebunden wird.

Habe es jetzt zumindest den Zugriff hinbekommen mit:

var a = document.getElementById("meinWrapper").childNodes[7].childNodes[0].childNodes[1]; a.style.backgroundColor = "red";

Habe nur noch das Problem, dass das Element bei Scriptaufruf ( am HTML Ende ) noch nicht vorhanden ist. Gibt es eine Möglichkeit das Script erst aufzurufen wenn der Viewer komplett geladen bzw. aufgebaut ist?

[Vollzitat entfernt]

[Jasager]

Gibt es eine Möglichkeit das Script erst aufzurufen wenn der Viewer komplett geladen bzw. aufgebaut ist?

Ja.

[Rolf b]

Spaßvogel :)

Es gibt diverse Möglichkeiten, sich auf "fertig geladen" zu registrieren.

Altmodisch:

window.onload = function(event) {
   // initialize me
}

Mit addEventListener:

window.addEventListener("load", function(event) {
   // initialize me
});

Mit jQuery - Ready Handler (wird aufgerufen wenn das DOM konstruiert ist, Bilder etc fehlen noch):

$(document).ready(function() {
   // initialize me
});

// Synonym ist:
$(function() {
});

Mit jQuery - Load Handler (wird aufgerufen wenn DOM konstruiert ist und Ressourcen geladen sind):

$(document).load(function(event) {
   // initialize me
});

Außer jQuery gibt es noch eine Menge anderer Frameworks, die Dir bei Events helfen. In manchen Beispielen sieht man auch, dass die Initializer-Funktion den load Event Handler gleich wieder deregistriert, da muss man schauen ob es nötig ist. Der Funktionskontext kann Ressourcen halten, die man ggf. loswerden will, aber solange das nicht viel ist, kann man das mMn ignorieren.

Rolf

[Gunnar Bittersmann]

@@Rolf b

Mit jQuery - Ready Handler (wird aufgerufen wenn das DOM konstruiert ist, Bilder etc fehlen noch):

Der Vollständigkeit halber: Das gibt’s ohne jQuery in nativem JavaScript auch: Das Event heißt DOMContentLoaded. [MDN, SELFHTML]

document.addEventListener('DOMContentLoaded', function(event) {
   // initialize me
});

LLAP 🖖

[Reinhard]

Hey,

document.addEventListener('DOMContentLoaded', function(event) {
   // initialize me
});

Manchmal sieht man dieses Event auch an window gekoppelt, also window.addEventListener('DOMContentLoaded', ...).
Gibt's da eigentlich einen Unterschied?

Reinhard

[Reinhard]

Hey,

Und da war doch auch noch ein Problem mit den Whitespace-Textnodes zwischen den Elementen ...

Die Whitespace-Textnodes - sowie alle anderen Nicht-Element-Nodes - sind in .children nicht vorhanden; die musst du in .childNodes suchen.

Reinhard