Untergeordnetes Element in JavaScript abrufen

Untergeordnetes Element in JavaScript abrufen

In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript die untergeordneten Knoten aus dem Text einer Webseite in HTML abrufen.

Abrufen der untergeordneten Knoten aus dem Hauptteil einer Webseite in HTML mit JavaScript

Ein untergeordnetes Element eines Knotens mit JavaScript zu erhalten bedeutet, auf die gesamte Seite zuzugreifen und sie in ein Array zu bekommen. Es ist wichtig, sich daran zu erinnern, dass Leerzeichen auf der Webseite als Textknoten betrachtet werden.

Im Falle von Leerzeichen behandelt der veraltete Browser es anders. Einige von ihnen werden als childNodes betrachtet und andere als Kinder wie Internet Explorer kleiner als Version 8.

<!DOCTYPE html>
<html>
<body>
<!-- we are writing a comment node! -->

<p>Click GET NODES button to get child nodes.</p>

<button onclick="getMyWebPageChildNodes()">GET NODES</button>

<p id="results"></p>

<script>
function getMyWebPageChildNodes() {
var myChildsNode = document.body.childNodes;
var textMessages = "";
var i;
for (i = 0; i < myChildsNode.length; i++) {
textMessages = textMessages + myChildsNode[i].nodeName + "<br>";
}

document.getElementById("results").innerHTML = textMessages;
}
</script>
</body>
</html>

Im obigen Code erstellen wir eine Schaltfläche und setzen einen Listener mit dem Namen onClick auf diese Schaltfläche.

Wir setzen eine Aktion auf den onclick mit dem Namen getMyWebPageChildNodes. Wir haben ein Array namens myChildsNode erstellt und alle untergeordneten Knoten in dieser Funktion gespeichert.

Danach legen wir eine Variable textMessages an, in der wir die Nodes rein kommentarlos speichern. Eine counter-Variable wird erstellt, um das myChildsNode-Array zu iterieren.

Wir haben eine for-Schleife gemacht, in der wir die Namen aller auf unserer Webseite vorhandenen Knoten abgerufen und dann in der Variablen textMessages gespeichert haben. Sobald dies erledigt ist, erhalten Sie alle Knotennamen und die for-Schleife wird beendet.

Hier ordnen wir diese Knoten unserem Absatz-Tag id=results zu. Schließlich erhalten wir alle untergeordneten Knoten in einem Absatz-Tag.

Verwandter Artikel - JavaScript Element