So starten Sie schnell mit VUE3.0: Geben Sie das Lernen ein.
Verwandte Empfehlungen: JavaScript-Tutorial
1. Rufen SieBedienung von Elementen ab.
Das Dokumentobjekt bietet einige Methoden zum Suchen von Elementen Basierend auf ihrer ID, ihrem Namen und ihrer Klasse erhalten Sie das Operationselement über Attribute und Tag-Namen.
Zusammenfassung:
Abgesehen davon, dass die Methode document.getElementById() das Element mit der angegebenen ID zurückgibt, geben die anderen Methoden eine Sammlung zurück, die die Anforderungen erfüllt. Um eines der Objekte abzurufen, können Sie es per Index abrufen, der standardmäßig bei 0 beginnt.
Das Dokumentobjekt stellt einige Eigenschaften bereit, die zum Abrufen von Elementen im Dokument verwendet werden können. Rufen Sie beispielsweise alle Formular-Tags, Bild-Tags usw. ab.
Beachten Sie, dass
die durch die Methoden des Dokumentobjekts erhaltenen Operationselemente und die Eigenschaften des Dokumentobjekts dasselbe Objekt darstellen. Beispielsweise stimmt document.getElementsByTagName('body')[0] mit document.body überein.
Die neuen Dokumentobjektmethoden von HTML5
Um das Abrufen von Elementen für den Betrieb zu erleichtern, fügt HTML5 dem Dokumentobjekt zwei neue Methoden hinzu, nämlich querySelector() und querySelectorAll().
Da diese beiden Methoden auf die gleiche Weise verwendet werden, wird im Folgenden die Methode document.querySelector() als Beispiel verwendet.
Bei DOM-Operationen stellen Elementobjekte auch Methoden zum Abrufen bestimmter Elemente innerhalb eines Elements bereit. Die beiden häufig verwendeten Methoden sind getElementsByClassName() und getElementsByTagName(). Sie werden genauso verwendet wie die gleichnamigen Methoden im Dokumentobjekt.
Darüber hinaus stellt das Elementobjekt auch das Attribut „Children“ bereit, um die untergeordneten Elemente des angegebenen Elements abzurufen. Rufen Sie beispielsweise die untergeordneten Elemente von ul im obigen Beispiel ab.
HTMLCollection-Objekt
Der Unterschied zwischen HTMLCollection- und NodeList-Objekten:
Tipp: Für die Sammlung, die von der Methode getElementsByClassName(), der Methode getElementsByTagName() und dem untergeordneten Attribut zurückgegeben wird, können ID und Name automatisch in ein Attribut umgewandelt werden.
2. Elementinhalt
Wenn Sie in JavaScript den erhaltenen Elementinhalt bearbeiten möchten, können Sie die vom DOM bereitgestellten Eigenschaften und Methoden verwenden.
Geben Sie ein Beispiel
Code-Implementierung
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Elementinhaltsoperationen</title>
</head>
<Körper>
<p id="box">
Der erste Absatz...
<p>
Der zweite Absatz...
<a href="http://www.example.com">Dritter</a>
</p>
</p>
<Skript>
var box = document.getElementById('box');
console.log(box.innerHTML);
console.log(box.innerText);
console.log(box.textContent);
</script>
</body>
</html> Beachten Sie, dass
bei Verwendung des innerText-Attributs Probleme mit der Browserkompatibilität auftreten können. Daher wird empfohlen,
innerHTML zu verwenden, um den Textinhalt von Elementen während der Entwicklung so weit wie möglich abzurufen oder festzulegen. Gleichzeitig gibt es bestimmte Unterschiede zwischen dem innerHTML-Attribut und der document.write()-Methode beim Festlegen des Inhalts. Ersteres wirkt auf das angegebene Element, während letzteres die gesamte HTML-Dokumentseite rekonstruiert. Daher sollten Leser während der Entwicklung die geeignete Implementierungsmethode gemäß den tatsächlichen Anforderungen auswählen
[Fall] Ändern der Boxgröße
Ideen zur Code-Implementierung :
① Schreiben Sie HTML und legen Sie die Größe von p fest.
② Schließen Sie die Änderung der Boxgröße entsprechend der Anzahl der Benutzerklicks ab.
③ Wenn die Anzahl der Klicks eine ungerade Zahl ist, wird das Kästchen größer; wenn die Anzahl der Klicks eine gerade Zahl ist, wird das Kästchen kleiner.
Code-Implementierung
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<Stil>
.box{width:50px;height:50px;background:#eee;margin:0 auto;}
</style>
</head>
<Körper>
<p id="box" class="box"></p>
<Skript>
var box = document.getElementById('box');
var i = 0; // Speichern Sie die Anzahl der Klicks des Benutzers auf die Box box.onclick = function() { // Behandeln Sie das Klickereignis der Box ++i;
if (i % 2) { // Die Anzahl der Klicks ist eine ungerade Zahl und wird größer this.style.width = '200px';
this.style.height = '200px';
this.innerHTML = 'big';
} else { // Die Anzahl der Klicks ist eine gerade Zahl und wird kleiner this.style.width = '50px';
this.style.height = '50px';
this.innerHTML = 'small';
}
};
</script>
</body>
</html> 3. Elementattribute
Um JavaScript das Abrufen, Ändern und Durchlaufen der relevanten Attribute des angegebenen HTML-Elements zu erleichtern, werden im DOM Operationsattribute und -methoden bereitgestellt.
Sie können das Attribut attributes verwenden, um alle Attribute eines HTML-Elements sowie die Anzahl aller Attribute und die Länge abzurufen.
Geben Sie ein Beispiel
Code-Implementierung
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Elementattributoperationen</title>
<Stil>
.gray{Hintergrund: #CCC;}
#thick{font-weight: Bolder;}
</style>
</head>
<Körper>
<p>Testwort.</p>
<Skript>
// p-Element abrufen var ele = document.getElementsByTagName('p')[0];
// ① Gibt die Anzahl der Attribute des aktuellen Elements aus console.log('Anzahl der Attribute vor der Operation: ' + ele.attributes.length);
// ② Attribute zu ele hinzufügen und die Anzahl der Attribute überprüfen ele.setAttribute('align', 'center');
ele.setAttribute('title', 'Testtext');
ele.setAttribute('class', 'gray');
ele.setAttribute('id', 'thick');
ele.setAttribute('style', 'font-size:24px;border:1px solid green;');
console.log('Anzahl der Attribute nach dem Hinzufügen von Attributen: ' + ele.attributes.length);
// ③ Holen Sie sich den Stilattributwert von ele console.log('Get the style attribute value:' + ele.getAttribute('style'));
// ④ Löschen Sie das Stilattribut von ele und überprüfen Sie die verbleibenden Attribute ele.removeAttribute('style');
console.log('Alle Eigenschaften anzeigen:');
for (var i = 0; i < ele.attributes.length; ++i) {
console.log(ele.attributes[i]);
}
</script>
</body>
</html> 4. Überprüfung des Elementstils
: Ändern Sie den Stil durch die Operation von Elementattributen.
Syntax des Elementstils: style.Attribute name.
Voraussetzung: Sie müssen den Bindestrich „-“ im CSS-Stilnamen entfernen und den zweiten englischen Anfangsbuchstaben großschreiben.
Beispiel: Um die Hintergrundfarbe festzulegen, muss die Hintergrundfarbe in der Stilattributoperation in „backgroundColor“ geändert werden.
Beachten Sie, dass
der Float-Stil in CSS mit den reservierten Wörtern von JavaScript in Konflikt steht und verschiedene Browser unterschiedliche Lösungen haben
. Beispielsweise können IE9-11, Chrome und FireFox „float“ und „cssFloat“ verwenden, Safari-Browser verwendet „float“ und IE6~8 verwenden „styleFloat“.
Frage: Ein Element kann mehrere Klassenselektoren haben. Wie wird die Selektorliste während der Entwicklung bedient?
Die ursprüngliche Lösung: Verwenden Sie das className-Attribut des Elementobjekts, um das Ergebnis zu erhalten. Das erhaltene Ergebnis ist ein Zeichentyp und verarbeitet die Zeichenfolge dann entsprechend der tatsächlichen Situation.
Die von HTML5 bereitgestellte Methode: die Klassenauswahlliste des neuen classList-Elements (schreibgeschützt).
Beispiel: Wenn der Klassenwert eines p-Elements „Box-Header-Navigationslistentitel“ ist, wie lösche ich den Header?
HTML5-Lösung: p element object.classList.toggle("header");
zum Beispiel
Code-Implementierung
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Verwendung von classList</title>
<Stil>
.bg{Hintergrund:#ccc;}
.strong{font-size:24px;color:red;}
.smooth{height:30px;width:120px;border-radius:10px;}
</style>
</head>
<Körper>
<ul>
<li>PHP</li>
<li class="bg">JavaScript</li>
<li>C++</li>
<li>Java</li>
</ul>
<script> // Zweites li-Element abrufen var ele = document.getElementsByTagName('li')[1] // Wenn es keine starke Klasse im li-Element gibt, fügen Sie if (!ele.classList.contains('strong ' )) { ele.classList.add('strong'); } // Wenn es keine glatte Klasse im li-Element gibt, fügen Sie sie hinzu, wenn sie gelöscht wird, ele.classList.toggle('smooth'); log('Add and switch After style: '); console.log(ele);
<Skript>
ele.classList.remove('bg');
console.log('Nach dem Löschen:');
console.log(ele);
</script>
</body>
</html> Darüber hinaus stellt das classList-Attribut auch viele andere verwandte Operationsmethoden und Eigenschaften bereit.
5. [Fall] Tab-Bar-Umschalteffekt
Ideen zur Code-Implementierung :
① Schreiben Sie HTML, um die Struktur und den Stil der Registerkartenleiste zu entwerfen, wobei „class“ gleich „current“ ist, um die aktuell angezeigte Registerkarte anzugeben, und der Standardwert die erste Registerkarte ist.
② Rufen Sie alle Tags und den den Tags entsprechenden Anzeigeinhalt ab.
③ Durchlaufen und fügen Sie für jedes Etikett ein Mouseover-Ereignis hinzu. Durchlaufen Sie in der Ereignisverarbeitungsfunktion den gesamten Anzeigeinhalt, der dem Etikett entspricht, und fügen Sie Strom über die Methode add () von classList hinzu Die Methode „remove()“ verlässt den aktuellen Bereich.
Code-Implementierung
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Effekt zum Wechseln der Tab-Leiste</title>
<Stil>
.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}
.tab-head{height:31px;}
.tab-head-p{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#206F96;line-height:30px;text- align:center;cursor:pointer;color:#fff;}
.tab-head .current{background:#fff;border-bottom:1px solid #fff;color:#000;}
.tab-head-r{border-right:0;}
.tab-body-p{display:none;margin:20px 10px;}
.tab-body .current{display:block;}
</style>
</head>
<Körper>
<p class="tab-box">
<p class="tab-head">
<p class="tab-head-p current">Tab eins</p>
<p class="tab-head-p">Tab 2</p>
<p class="tab-head-p">Tab drei</p>
<p class="tab-head-p tab-head-r">Tab vier</p>
</p>
<!--jkdjfk?-->
<p class="tab-body">
<p class="tab-body-p current"> 1 </p>
<p class="tab-body-p"> 2 </p>
<p class="tab-body-p"> 3 </p>
<p class="tab-body-p"> 4 </p>
</p>
</p>
<Skript>
// Alle Tab-Elementobjekte der Tab-Leiste abrufen var tabs = document.getElementsByClassName('tab-head-p');
// Alle Inhaltsobjekte der Tab-Leiste abrufen var ps = document.getElementsByClassName('tab-body-p');
for (var i = 0; i < tabs.length; ++i) { // Das Elementobjekt durchlaufen tabs[i].onmouseover = function() { // Ein Mouseover-Ereignis zum Tag-Elementobjekt hinzufügen for ( var i = 0; i < ps.length; ++i) { // Das Inhaltselementobjekt der Tab-Leiste durchlaufen if (tabs[i] == this) { // Zeigt das li-Element ps[i] an, das die aktuelle Maus verwendet ist über .classList.add('current'); gerutscht
tabs[i].classList.add('current');
} else { // Andere Li-Elemente ausblenden ps[i].classList.remove('current');
tabs[i].classList.remove('current');
}
}
};
}
</script>
</body>
</html> Verwandte Empfehlungen: Javascript-Tutorial
Das Obige ist der detaillierte Inhalt von HTML-Elementoperationen, die anhand von JavaScript-Beispielen ausführlich erläutert werden. Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.
