Holen Sie sich Element in Element nach Klasse und ID - JavaScript

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.

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

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

getElementByIdGibt nur einen Knoten zurück, gibt jedoch getElementsByClassNameeine Knotenliste zurück. Da es nur ein Element mit diesem Klassennamen gibt (soweit ich das beurteilen kann), können Sie nur das erste erhalten (dafür ist das gedacht [0]- es ist wie ein Array).

Dann können Sie das HTML mit ändern .textContent.

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>

Sie können es so machen:

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

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:

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 class="bar".
3. Dadurch wird eine Array-ähnliche Knotenliste zurückgegeben, sodass Sie auf das erste Element in dieser Knotenliste verweisen
4. Sie können dann festlegen, innerHTMLdass 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:

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

In jQuery ist die Sizzle-Bibliothek integriert. In jQuery ist dies:

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

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.

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!";
    }
}

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);
        }
    }
}

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}]`);
}

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.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                                                                                                             
<div id="foo">
   <div class="bar"> 
          Hello world!
     </div>
</div>

benutze das :

$("[id^='foo']").find("[class^='bar']")

// do not forget to add script tags as above

Wenn Sie entfernen oder bearbeiten möchten, fügen Sie einfach "." hinzu. hinter und machen die Operationen