Beim Erlernen von JavaScript werden Sie auf das Problem stoßen, dass js Elemente erhält. In diesem Artikel wird die Methode zum Abrufen von Elementen erläutert.
Bei der eigentlichen Front-End-Entwicklungsarbeit stoßen wir häufig auf die Notwendigkeit, bestimmte Elemente abzurufen, um den Stil, den Inhalt usw. des Elements zu aktualisieren. Das Document Object Model (DOM) ist eine Programmierschnittstelle für HTML- und XML-Dokumente. Es bietet eine strukturierte Darstellung des Dokuments und definiert eine Möglichkeit, vom Programm aus auf die Struktur zuzugreifen und so die Struktur und den Stil des Dokuments und des Inhalts zu ändern. Das DOM analysiert ein Dokument in eine strukturierte Sammlung von Knoten und Objekten (Objekte, die Eigenschaften und Methoden enthalten), die Webseiten mit Skripten oder Programmiersprachen verbinden. Daher kann JavaScript Elementknoten über die DOM-API abrufen. Die Methoden lauten wie folgt: querySelector() und querySelectorAll() sind die ES5-Elementauswahlmethoden
1:
Empfängt ein Parameter: Die ID des abzurufenden Elements (Groß-/Kleinschreibung beachten, muss strikt übereinstimmen), gibt ein Elementobjekt zurück (kann auch als dynamische NodeList-Sammlung betrachtet werden, aber die Sammlung enthält nur ein übereinstimmendes Element, wird aber auch reflektiert Wenn das Element mit einer bestimmten ID im aktuellen Dokument nicht vorhanden ist, wird nul zurückgegeben.
Syntax:
element = document.getElementById(id);
Beispiel: Löschen
<body>
<div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(1)
var body=document.querySelector('body');
body.removeChild(div); console.log(body); //(2)
</script></body>
//(1)处打印值 <div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>//(2)处打印值<body>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(1)
var body=document.querySelector('body');
body.removeChild(div); console.log(body); //(2)
</script></body>Nach dem Login kopieren
Beispiel:
<!DOCTYPE html><html><head>
<title>getElementById example</title>
<script>
function changeColor(newColor) { var elem = document.getElementById("para1");
elem.style.color = newColor;
} </script></head><body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button></body></html>Nach dem Login kopieren
getElementById( )-Methode sucht nicht nach Elementen, die nicht im Dokument enthalten sind. Nachdem Sie ein Element erstellt und eine ID zugewiesen haben, müssen Sie insertBefore() oder andere ähnliche Methoden verwenden, um das Element in das Dokument einzufügen, bevor Sie getElementById() verwenden können, um Folgendes zu erhalten:
var element = document.createElement("div");
element.id = 'testqq';var el = document.getElementById('testqq'); // el will be null!Nach dem Login kopieren
getElementsByClassName():
Empfangt einen Parameter, bei dem es sich um eine Zeichenfolge handelt, die einen oder mehrere Klassennamen enthält (Klassennamen werden durch Leerzeichen getrennt), und gibt eine dynamische HTMLCollection-Sammlung zurück (man kann auch sagen, dass sie ein NodeList-ähnliches Array-Objekt zurückgibt). welches das aktuelle Element enthält Als Wurzelknoten alle untergeordneten Elemente mit angegebenen Klassennamen.
Syntax:
var elements = document.getElementsByClassName(names);
var elements = rootElement.getElementsByClassName(names);
Nach dem Login kopieren
getElementsByClassName kann für jedes Element aufgerufen werden, nicht nur für Dokumente. Das Element, das diese Methode aufruft, wird als Stammelement für diese Suche verwendet.
Beispiel:
Alle Elemente mit der Klasse „test“ abrufen:
document.getElementsByClassName('test');
Alle Elemente einschließlich der Klasse Elements abrufen von 'red' und 'test':
document.getElementsByClassName('red test');
Im untergeordneten Knoten des Elements mit der ID „main“ alle Elemente abrufen mit Klasse 'test':
document.getElementById('main').getElementsByClassName('test');
Beispiel: Löschen
//html代码<div class="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
//js代码一 <script>
var div = document.getElementsByClassName("myDiv"); console.log(div); //(3)
var p = document.getElementsByClassName("myP"); for (var i = 0; i < p.length; i++) {
div[0].removeChild(p[i]);
} console.log(p); //(4)
</script>Nach dem Login kopieren
/ /Print value at (3)
[div.myDiv] //Eine dynamische HTMLCollection-Sammlung mit einer Länge von 1 und innerHTML von
hello dolby
,
hello bean
, warum es keine anderen zwei p-Elemente gibt, wird später erklärt.
//Wert bei (4) drucken
[p.myP,p.myP] //Eine dynamische HTMLCollection-Sammlung mit einer Länge von 2 und innerHTML bzw. „hello dolby“ und „hello bean“.
Die obige Methode zum Löschen von Knoten hat überprüft, dass die Methode getElementsByClassName eine dynamische HTMLCollection-Sammlung zurückgibt.
⬆️Im obigen Code erhält zunächst div eine dynamische Sammlung bestehend aus Elementen mit dem Klassennamen „myDiv“ auf der Seite, p erhält eine dynamische Sammlung bestehend aus Elementen mit dem Klassennamen „myP“ auf der Seite , und verwendet dann eine for-Schleife, um jedes Element in der „myP“-Auflistung im ersten Element in der „myDiv“-Auflistung (d. h. dem einzigen div-Element im obigen Beispiel) zu löschen. Daher nur das erste und das dritte Elemente werden gelöscht. Aus diesem Grund?
Der Grund dafür ist, dass Änderungen in der DOM-Struktur in der dynamischen Sammlung automatisch in den gespeicherten Objekten widergespiegelt werden können. Zunächst wird p.legth=4, wenn i=0, das erste p-Element auf der Seite gelöscht und danach p.legth=4 .length= 3; Wenn i=1, wird das Element mit Index 1 in den verbleibenden drei p gelöscht, und wenn p.length=2 ist, ist die Bedingung von iWie können Sie also jedes Element in der HTMLCollection-Sammlung arrayartiger Objekte durchlaufen und alle Elemente löschen?
Es wird immer noch mit einer for-Schleife gemacht⬇️, löschen Sie einfach jedes Mal das letzte Element in der Objektsammlung~
//js代码二 <script>
var div = document.getElementsByClassName("myDiv")[0]; console.log(div); //(5)
var p = document.getElementsByClassName("myP"); for (var i=p.length;i--;){
div.removeChild(p[i]);
} console.log(p); //(6)
</script>
//(5)处打印值<div class="myDiv"></div>//(6)处打印值[] //空的HTMLCollection集合，长度为0Nach dem Login kopieren
3. getElementsByTagName():
Erhält einen Parameter: to be erhalten Der Tag-Name des Elements (ohne Berücksichtigung der Groß-/Kleinschreibung), gibt eine dynamische HTMLCollection-Sammlung zurück (man kann auch sagen, dass sie ein NodeList-Klassen-Array-Objekt zurückgibt), die Sammlung enthält das aktuelle Element als Stammknoten (mit Ausnahme des aktuellen Elements selbst). , alle angegebenen Tag-Namen Untergeordnete Elemente, die Reihenfolge der untergeordneten Elemente ist die Reihenfolge, in der sie im Unterbaum des aktuellen Elements erscheinen. Wenn kein Element gefunden wird, ist die Menge leer.
Syntax:
elements = element.getElementsByTagName(tagName)
Beispiel:
// check the alignment on a number of cells in a table. var table = document.getElementById("forecast-table");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
var status = cells[i].getAttribute("data-status");
if ( status == "open" ) {
// grab the data
}
}Nach dem Login kopieren
Beispiel: Löschen Sie
<body>
<div id="myDiv">
<p class="myP">hello world</p>
<p class="myP">hello dolby</p>
<p class="myP">hello dot</p>
<p class="myP">hello bean</p>
</div>
<script>
var div = document.getElementById("myDiv"); console.log(div); //(7)
var p = document.getElementsByTagName("p");//Nach dem Login kopieren
以下for循环改为for (var i=0,len=p.length;i for (var i=p.length;i--;){
div.removeChild(p[i]);
} console.log(p); //(8)
