webentwicklung-frage-antwort-db.com.de

Element nach Klasse und ID in Element abrufen - JavaScript

Okay, ich habe mich vorher mit JavaScript beschäftigt, aber das Nützlichste, was ich geschrieben habe, ist ein CSS-Style-Switcher. Ich bin also etwas neu in diesem Bereich. Angenommen, ich habe einen HTML-Code wie diesen:

<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 jedoch genauere Angaben machen. Entschuldigung, wenn dies vorher gefragt wurde.

javascriptgetelementbyidgetelementsbyclassname
104
Tanner Babcock

Nun, zuerst müssen Sie die Elemente mit einer Funktion wie getElementById auswählen.

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];

getElementById gibt nur einen Knoten zurück, aber getElementsByClassName gibt eine Knotenliste zurück. Da es nur ein Element mit diesem Klassennamen gibt (soweit ich das beurteilen kann), können Sie einfach das erste abrufen (dafür ist das [0] - es ist wie ein Array).

Dann können Sie den HTML-Code mit .textContent Ändern.

targetDiv.textContent = "Goodbye world!";

var targetDiv = document.getElementById("foo").getElementsByClassName("bar")[0];
targetDiv.textContent = "Goodbye world!";
<div id="foo">
    <div class="bar">
        Hello world!
    </div>
</div>
191
Joseph Marikle

Du kannst es so machen:

var list = document.getElementById("foo").getElementsByClassName("bar");
if (list && list.length > 0) {
    list[0].innerHTML = "Goodbye world!";
}

oder, wenn Sie es mit weniger Fehlerprüfung und mehr Kürze tun möchten, können Sie es in einer Zeile wie folgt tun:

document.getElementById("foo").getElementsByClassName("bar")[0].innerHTML = "Goodbye world!";

Zur Erklärung:

  1. Sie erhalten das Element mit id="foo".
  2. Sie finden dann die Objekte, die in diesem Objekt enthalten sind und class="bar".
  3. Das gibt eine Array-ähnliche Knotenliste zurück, sodass Sie auf das erste Element in dieser Knotenliste verweisen
  4. Sie können dann das innerHTML dieses Elements festlegen, um dessen Inhalt zu ändern.

Vorsichtsmaßnahmen: Einige ältere Browser unterstützen getElementsByClassName nicht (z. B. ältere Versionen von IE). Diese Funktion kann eingeblendet werden, wenn sie fehlt.

Hier empfehle ich die Verwendung einer Bibliothek mit integrierter CSS3-Selektorunterstützung, anstatt sich selbst um die Browserkompatibilität zu kümmern (überlassen Sie es anderen, die ganze Arbeit zu erledigen). Wenn Sie möchten, dass nur eine Bibliothek das tut, dann wird Sizzle großartig funktionieren. In Sizzle würde dies folgendermaßen erfolgen:

Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";

in jQuery ist die Sizzle-Bibliothek integriert. In jQuery wäre dies:

$("#foo .bar").html("Goodbye world!");
13
jfriend00

Wenn dies in IE 7 oder niedriger funktionieren soll, müssen Sie beachten, dass getElementsByClassName nicht in allen Browsern vorhanden ist. Aus diesem Grund können Sie Ihr eigenes getElementsByClassName erstellen oder dies versuchen.

var fooDiv = document.getElementById("foo");

for (var i = 0, childNode; i <= fooDiv.childNodes.length; i ++) {
    childNode = fooDiv.childNodes[i];
    if (/bar/.test(childNode.className)) {
        childNode.innerHTML = "Goodbye world!";
    }
}
5
John Hartsock

Rekursive Funktion:

function getElementInsideElement(baseElement, wantedElementID) {
    var elementToReturn;
    for (var i = 0; i < baseElement.childNodes.length; i++) {
        elementToReturn = baseElement.childNodes[i];
        if (elementToReturn.id == wantedElementID) {
            return elementToReturn;
        } else {
            return getElementInsideElement(elementToReturn, wantedElementID);
        }
    }
}
3
Avi Shimshilashvili

Der einfachste Weg dies zu tun ist:

function findChild(idOfElement, idOfChild){
  let element = document.getElementById(idOfElement);
  return element.querySelector('[id=' + idOfChild + ']');
}

oder besser lesbar:

findChild = (idOfElement, idOfChild) => {
    let element = document.getElementById(idOfElement);
    return element.querySelector(`[id=${idOfChild}]`);
}
3
Benjamin Werner