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

136

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.

Tanner Babcock
quelle

Antworten:

232

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>

Joseph Marikle
quelle
1
In diesem Fall ist es nicht erforderlich, das übergeordnete Element anhand der ID abzurufen. document.getElementsByClassNamewürde gut funktionieren.
Rvighne
7
@rvighne Die genauen Anforderungen von OP waren, dass er "genauer werden möchte". Die Person, die die Frage stellte, fragte, wie sie in seiner DOM-Baumdurchquerung spezifischer sein könne. Die Verwendung von getElementByClassName war kein Punkt der Verwirrung, aber ich kann sehen, wie leicht jemand denken könnte, ich hätte beide als notwendig angegeben. Sie sind nicht. Wenn Sie nur auf Elemente einer bestimmten Klasse abzielen möchten, die sich unter einem bestimmten Knoten einer bestimmten ID befinden, im Gegensatz zu Elementen derselben Klasse unter einem anderen Knoten, verwenden Sie diese Option.
Joseph Marikle
1
Könnte gut sein, diese Antwort zu bearbeiten und zu ändern .innerHtml, .textContentum die Sicherheit von Copy / Paste-Codierern zu gewährleisten.
Codescribblr
14

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!");
jfriend00
quelle
Vielen Dank, ich hatte Probleme mit document.getElementBy *. jQuery macht die Dinge so viel einfacher.
Tanner Babcock
7

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!";
    }
}
John Hartsock
quelle
getElementsByClassNamefunktioniert auch nicht in IE8, aber Sie können es querySelectorAllan seiner Stelle verwenden (so ziemlich sowieso).
user113716
@ Ӫ _._ Ӫ ... lol ... du bist richtig, aber du beweist meine Antwort nur noch mehr. Sie können sich nicht auf getElementsByClassName verlassen, wenn Ihre Seite in mehreren Browsern funktionieren muss. jQuery wäre definitiv eine Option, aber auch der obige Code.
John Hartsock
Ja, ich habe diesen Kommentar zur Unterstützung Ihrer Antwort gemeint, aber dann auch, um darauf hinzuweisen, dass es möglich ist, qSAin 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.
user113716
@ Ӫ _._ Ӫ ... neugierig was siehst du ... weil ich es nicht sehe.
John Hartsock
var i = 0, var child = fooDiv.childNodes[i]ist ungültig. i <= fooDiv.childNodesmacht nicht wirklich Sinn. childNode.className.test("bar")Es gibt keine childNodeVariable und eine Zeichenfolge hat keine test()Methode.
user113716
4

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);
        }
    }
}
Avi Shimshilashvili
quelle
Im obigen Beispiel gibt es einen kleinen Fehler. Anstatt sofort in den else-Pfad zurückzukehren, müssen Sie überprüfen, ob zuerst etwas gefunden wurde. Andernfalls werden die anderen untergeordneten Knoten nicht durchlaufen. Etwa so: if (elementToReturn) {return elementToReturn; }
Jannik
3

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}]`);
}
Benjamin Werner
quelle
-4

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

Hardik Akbari
quelle
10
Die Verwendung einer thermonuklearen Waffe zum Töten eines Hirsches funktioniert, ist jedoch ein leichter Overkill. Die Verwendung einer Multi-KB-jQuery-Bibliothek zur Auswahl eines Elements, wenn Javascript diese Funktionalität im Basiscode bietet, ist etwas übertriebener.
Danejir