Okay, ich habe mich schon einmal mit JavaScript beschäftigt, aber das Nützlichste, was ich geschrieben habe, ist ein CSS-Style-Switcher. Ich bin also etwas neu darin. Angenommen, ich habe folgenden HTML-Code:
<div id="foo">
<div class="bar">
Hello world!
</div>
</div>
Wie würde ich "Hallo Welt!" zu "Auf Wiedersehen Welt!" ? Ich weiß, wie document.getElementByClass und document.getElementById funktionieren, möchte aber genauer darauf eingehen. Entschuldigung, wenn dies schon einmal gefragt wurde.
quelle
document.getElementsByClassName
würde gut funktionieren..innerHtml
,.textContent
um die Sicherheit von Copy / Paste-Codierern zu gewährleisten.Sie können es so machen:
oder, wenn Sie dies mit weniger Fehlerprüfung und mehr Kürze tun möchten, können Sie dies in einer Zeile wie folgt tun:
Zur Erklärung:
id="foo"
.class="bar"
.innerHTML
dass dieses Element seinen Inhalt ändert.Vorsichtsmaßnahmen: Einige ältere Browser unterstützen dies nicht
getElementsByClassName
(z. B. ältere Versionen von IE). Diese Funktion kann bei Fehlen eingestellt werden.Hier empfehle ich die Verwendung einer Bibliothek mit integrierter CSS3-Auswahlunterstützung, anstatt sich selbst um die Browserkompatibilität zu kümmern (lassen Sie die Arbeit von jemand anderem erledigen). Wenn Sie möchten, dass nur eine Bibliothek dies tut, funktioniert Sizzle hervorragend. In Sizzle würde dies folgendermaßen geschehen:
In jQuery ist die Sizzle-Bibliothek integriert. In jQuery ist dies:
quelle
Wenn dies in IE 7 oder niedriger funktionieren muss, müssen Sie berücksichtigen, dass getElementsByClassName nicht in allen Browsern vorhanden ist. Aus diesem Grund können Sie Ihren eigenen getElementsByClassName erstellen oder dies versuchen.
quelle
getElementsByClassName
funktioniert auch nicht in IE8, aber Sie können esquerySelectorAll
an seiner Stelle verwenden (so ziemlich sowieso).qSA
in einem Shim zu verwenden, damit Sie weiterhin nativen Code in IE8 verwenden können. Wenn Sie sich Ihre Lösung genauer ansehen, müssen Sie einige Dinge beheben.var i = 0, var child = fooDiv.childNodes[i]
ist ungültig.i <= fooDiv.childNodes
macht nicht wirklich Sinn.childNode.className.test("bar")
Es gibt keinechildNode
Variable und eine Zeichenfolge hat keinetest()
Methode.Rekursive Funktion:
quelle
Der einfachste Weg, dies zu tun, ist:
oder besser lesbar:
quelle
Sie sollten document.getElementByID nicht verwenden , da es nur für clientseitige Steuerelemente funktioniert, deren IDs festgelegt sind. Sie sollten stattdessen jquery wie im folgenden Beispiel verwenden.
benutze das :
Wenn Sie entfernen oder bearbeiten möchten, fügen Sie einfach "." hinzu. hinter und machen die Operationen
quelle