Heim >Web-Frontend >js-Tutorial >Wie lese ich dynamisch alle Bereiche eines Divs?
Beim Erstellen einer Webseite kann ein HTML-Element mehrere verschachtelte HTML-Elemente enthalten. In manchen Fällen muss ein Entwickler möglicherweise ein HTML-Element für ein bestimmtes HTML-Element lesen. In unserem Fall müssen wir alle span-Elemente des div-Elements lesen und ihren Inhalt extrahieren.
In diesem Tutorial lernen wir, mit JavaScript den Inhalt aller Spans eines div-Elements zu lesen und ihn wieder formatiert an die Webseite anzuhängen.
Benutzer können JavaScript verwenden, um alle Bereiche von div-Elementen gemäß der folgenden Syntax dynamisch zu lesen.
var spans = div.getElementsByTagName("span"); for (var i = 0; i < spans.length; ++i) { output.innerHTML += spans[i].innerHTML + "<br>"; }
In der obigen Syntax erhalten wir das „span“-Element anhand des Tag-Namens und lesen alle span-Elemente einzeln.
Im folgenden Beispiel haben wir ein div-Element erstellt, das die ID „myDIv“ enthält. Zusätzlich haben wir 5 Span-Elemente mit unterschiedlichem Inhalt hinzugefügt.
In JavaScript verwenden wir die ID des div-Elements, um darauf zuzugreifen. Danach greifen wir über ihre Tag-Namen auf alle span-Elemente zu, die untergeordnete Elemente von div-Elementen sind. Als Nächstes verwenden wir eine for-Schleife, um das Array der Span-Elemente zu durchlaufen und den inneren HTML-Code jedes Span-Elements abzurufen.
In der Ausgabe können wir den Inhalt des span-Elements sehen.
<html> <body> <h2> Reading <i> all the spans of a div element </i> dynamically using JavaScript </h2> <div id="myDiv"> <span> First </span> <span> Second </span> <span> Third </span> <span> Fourth </span> <span> Fifth </span> </div> <br> <div id = "output"> </div> <script> var div = document.getElementById("myDiv"); var spans = div.getElementsByTagName("span"); var output = document.getElementById("output"); for (var i = 0; i < spans.length; ++i) { output.innerHTML += spans[i].innerHTML + "<br>"; } </script> </html>
Im folgenden Beispiel haben wir ein div-Element mit einer ID erstellt, die „content“ entspricht. Das div-Element enthält mehrere „
“, „“ und „“-Elemente als untergeordnete Elemente in zufälliger Reihenfolge, wir extrahieren jedoch nur das span-Element.
In JavaScript greifen wir auf div-Elemente und untergeordnete span-Elemente zu. Danach lesen wir einfach den Inhalt des span-Elements und hängen seinen Inhalt an die Liste an.
<html> <body> <h2> Reading <i> all the spans of a div element </i> dynamically using JavaScript </h2> <div id = "content"> <p> This is the first paragraph. </p> <p> This is the second paragraph. </p> <span> This is the first span. </span> <div> This is a div element. </div> <span> This is the second span. </span> <span> This is the third span. </span> <h2> This is a h2 element </h2> <p> This is the third paragraph. </p> <span> This is the fourth span. </span> </div> <br> <ul id = "output"> </ul> <script> var div = document.getElementById("content"); var spans = div.getElementsByTagName("span"); var output = document.getElementById("output"); for (var i = 0; i < spans.length; i++) { var li = document.createElement("li"); li.innerHTML = spans[i].innerHTML; output.appendChild(li); } </script> </html>
In diesem Beispiel haben wir den Namen der Frucht im span-Tag und ihre Erklärung im div-Tag hinzugefügt. Daher enthält das übergeordnete Div die Elemente span und div als untergeordnete Elemente.
In JavaScript verwenden wir das Attribut „children“, um alle untergeordneten Elemente des div-Elements abzurufen. Danach iterieren wir über alle untergeordneten Elemente. In der for-Schleife verwenden wir das Attribut „tagName“, um zu prüfen, ob das aktuelle Element ein „span“-Element ist. Wenn ja, lesen wir den Inhalt und hängen ihn an die Liste an. Ansonsten iterieren wir weiter.
<html> <body> <h3> Reading <i> all the spans of a div element </i> dynamically using JavaScript </h3> <div id = "fruits"> <span> Apple </span> <div> Color: red </div> <span> Orange </span> <div> Color: orange </div> <span> Banana </span> <div> Color: yellow </div> <span> Watermelon </span> <div> Color: green </div> </div> <h3> Output: </h3> <ul id = "output"> </ul> <script> let fruits = document.getElementById("fruits"); let children = fruits.children; let output = document.getElementById("output"); for (let i = 0; i < children.length; i++) { if (children[i].tagName == "SPAN") { output.innerHTML += "<li>" + children[i].innerHTML + "</li>"; } } </script> </html>
Wir haben gelernt, JavaScript zu verwenden, um alle span-Elemente eines div-Elements dynamisch zu lesen. In den ersten beiden Beispielen haben wir auf alle Span-Elemente zugegriffen und sie dann durchlaufen. Im dritten Beispiel iterieren wir über alle untergeordneten Elemente des div-Elements und identifizieren während der Iteration das span-Element.
Das obige ist der detaillierte Inhalt vonWie lese ich dynamisch alle Bereiche eines Divs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!