Vollständige JavaScript-Zusammenfassung des Timers und des DOM-Dokuments

Beim Erlernen von JavaScript werden Sie auf viele Probleme wie Timer und DOM stoßen. In diesem Artikel werden die damit verbundenen Probleme ausführlich erläutert.

In JavaScript gibt es zwei Arten von Timern, einer ist setTimeout() und der andere ist setTimeout()

setTimeout()

Die Funktion setTimeout wird verwendet Geben Sie an, wie viele Millisekunden nach der Ausführung einer bestimmten Funktion oder eines bestimmten Codeabschnitts vergangen sind. Es gibt eine Ganzzahl zurück, die die Timer-Nummer darstellt und zum späteren Abbrechen des Timers verwendet werden kann.
var timerId = setTimeout(func|code, delay)

Im obigen Code akzeptiert die setTimeout-Funktion zwei Parameter. Der erste Parameter func|code ist der Name der Funktion oder ein Codeteil wird verschoben. Der zweite Parameter Verzögerung ist die Anzahl der Millisekunden, um die die Ausführung verzögert wird.

Es ist zu beachten, dass der Code zum Verzögern der Ausführung in Form einer Zeichenfolge in setTimeout eingefügt werden muss, da die Engine die Eval-Funktion intern verwendet, um die Zeichenfolge in Code umzuwandeln.
Wenn es sich bei der verschobenen Ausführung um eine Funktion handelt, können Sie den Funktionsnamen direkt in setTimeout einfügen. Einerseits hat die Eval-Funktion Sicherheitsbedenken, und andererseits hat die setTimeout-Methode normalerweise die Form eines Funktionsnamens, um der JavaScript-Engine die Optimierung des Codes zu erleichtern, wie unten gezeigt.

function f(){  console.log(2);}setTimeout(f,1000);// 或者setTimeout(function (){console.log(2)},1000);
setInterval()
setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。
clearTimeout()，clearInterval()

setTimeout和setInterval函数，都返回一个表示计数器编号的整数值，将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。
var id1 = setTimeout(f,1000);var id2 = setInterval(f,1000);

clearTimeout(id1);
clearInterval(id2);

setTimeout和setInterval返回的整数值是连续的，也就是说，第二个setTimeout方法返回的整数值，将比第一个的整数值大1。利用这一点，可以写一个函数，取消当前所有的setTimeout。

(function() {  var gid = setInterval(clearAllTimeouts, 0);  function clearAllTimeouts() {    var id = setTimeout(function() {}, 0);    while (id > 0) {      if (id !== gid) {
        clearTimeout(id);
      }
      id--;
    }
  }
})();```

Nachdem der obige Code ausgeführt wurde, sind alle setTimeout-Einstellungen tatsächlich ungültig. ###Der Funktionsmechanismus von setTimeout und setInterval ist: 1. Verschieben Sie den angegebenen Code aus dieser Ausführung, warten Sie bis zur nächsten Runde der Ereignisschleife und prüfen Sie dann, ob die angegebene Zeit erreicht ist. 2. Wenn er eintrifft, führen Sie den entsprechenden Code aus. Wenn er nicht eintrifft, warten Sie mit der erneuten Beurteilung bis zur nächsten Runde der Ereignisschleife.

Dies bedeutet, dass der durch setTimeout angegebene Code erst ausgeführt wird, wenn alle diesmal ausgeführten Codes ausgeführt wurden.

Die Funktion von setTimeout besteht darin, die Ausführung des Codes bis zum angegebenen Zeitpunkt zu verschieben, dh setTimeout(f,0), dann wird er nicht sofort ausgeführt >
setTimeout(f,0) wird Der zweite Parameter wird auf 0 gesetzt, wodurch f ausgeführt wird, sobald die vorhandenen Aufgaben (Skriptsynchronisierungsaufgaben und vorhandene Ereignisse in der „Aufgabenwarteschlange“) enden. Mit anderen Worten besteht die Funktion von setTimeout(f,0) darin, die angegebene Aufgabe so früh wie möglich auszuführen. #DOM>Früher habe ich im Wesentlichen über die Syntax von js gesprochen, aber jetzt kombiniere ich HTML und js.
Document Object Model (DOM) ist eine Programmierschnittstelle für HTML- und XML-Dokumente. Es bietet eine strukturierte Darstellung des Dokuments (Strukturbaum) und definiert eine Möglichkeit, wie Programme auf den Strukturbaum zugreifen können, um Struktur, Stil und Inhalt des Dokuments zu ändern.

DOM bietet eine Möglichkeit, ein Dokument als strukturierte Gruppe von Knoten und Objekten darzustellen, die Eigenschaften und Methoden enthalten. Im Wesentlichen verbindet es eine Webseite mit einem Skript oder einer Programmiersprache.
 Um etwas auf der Seite zu ändern, muss JavaScript das HTML-Dokument Entrance abrufen um auf alle Elemente in der . zuzugreifen. Dieser Eintrag sowie die Methoden und Attribute zum Hinzufügen, Verschieben, Ändern oder Entfernen von HTML-Elementen werden alle über das DOM ##document object* abgerufen. Jedes in den Browser geladene HTML-Dokument wird zu einem Dokumentobjekt. Das Dokumentobjekt enthält die grundlegenden Informationen des Dokuments. Wir können über JavaScript auf alle Elemente der HTML-Seite zugreifen und diese ändern. ####Häufig verwendete Attribute von Dokumentobjekten Das Dokumentobjekt verfügt über viele Attribute zur Beschreibung von Dokumentinformationen. Hier sind einige häufig verwendete Attribute Sie können das Objekt mit document abrufen. Wenn nicht, geben Sie null`document.doctype; // document.doctype.name; zurück .head;`
` document.body;`
So erhalten Sie den Kopf des Dokuments bzw. über diese beiden Eigenschaften, den Körperknoten
* ####activeElementDie Eigenschaft activeElement gibt das empfangene Element zurück Fokus im aktuellen Dokument.
Benutzer können normalerweise die Tabulatortaste verwenden, um den Fokus zu verschieben, und die Leertaste, um den Fokus zu aktivieren. Wenn der Fokus beispielsweise auf einem Link liegt, wird durch Drücken der Leertaste zum Link gesprungen

*. ### #documentURI, domain, lastModifieddocumentURI-Attribute geben die URL des aktuellen Dokuments zurück
Domänenattribut gibt den Dokumentdomänennamen zurück
lastModified gibt die letzte Änderungszeit des aktuellen Dokuments zurück

* Speicherort
location-Attribut gibt ein schreibgeschütztes Objekt zurück. Stellt die URL-Informationen des aktuellen Dokuments bereit

// Angenommen, die aktuelle URL ist
http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
document.location.href / / " http://user:passwd@www.example.com:4097/path/a.html?x=111#part1"
document.location.protocol // "http:"document.location.host / / " www.example.com:4097"
document.location.hostname // "www.example.com"
document.location.port // "4097"
document.location.pathname // "/ path/a.html"document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.user // "user"
document .location.password // „bestanden“
// Zu einer anderen URL springen
document.location.assign('http://www.google.com')
// Neuladen von der priorisieren server Load
document.location.reload(true)
// Neuladen aus lokalem Cache priorisieren (Standardwert)
document.location.reload(false)
// Zu einer anderen URL springen, aber die Das aktuelle Dokument wird nicht im Verlaufsobjekt beibehalten.
// Das heißt, Sie können die Schaltfläche „Zurück“ nicht verwenden, um zum aktuellen Dokument zurückzukehren.
document.location.assign('http://www.google.com' )// den Standort ändern Das Objekt wird in eine Zeichenfolge konvertiert, die document.location.href entspricht
document.location.toString()```

Obwohl das Objekt vom Standortattribut zurückgegeben wird ist schreibgeschützt, die URL kann zugewiesen werden. Mit diesem Attribut springt die Webseite automatisch zur angegebenen URL.
document.location = 'http://www.example.com';// Entspricht document.location.href = 'http://www.example.com';

Titel, Zeichensatz

title-Attribut gibt den Titel des aktuellen Dokuments zurück, das beschreibbar ist
characterSet-Attribut gibt den Zeichensatz zum Rendern des aktuellen Dokuments zurück

readyState

readyState-Attribut gibt den zurück current Der Status des Dokuments, es gibt drei mögliche Werte
Laden: Laden des HTML-Codes, Analyse ist noch nicht abgeschlossen
Interaktiv: Laden externer Ressourcenphase
Abgeschlossen: Alle Ladevorgänge abgeschlossen

#### ###compatMode
Das Attribut compatMode gibt den Modus zurück, in dem der Browser Dokumente verarbeitet. Mögliche Werte sind
BackCompat: Abwärtskompatibilitätsmodus, d. h. es wird kein DOCTYPE hinzugefügt
CSS1Compat: strikter Modus, DOCTYPE

wird hinzugefügt

#######Cookie
Cookie ist ein auf der Clientseite gespeicherter Text. Wir werden ihn später im Client-Speicherkapitel vorstellen 🎜>innerText

innerText ist ein beschreibbares Attribut, das den im Element enthaltenen Textinhalt zurückgibt. Wenn mehrere Ebenen vorhanden sind, wird der Inhalt in der Reihenfolge von flachen zu tiefen Elementen gespleißt

🎜>

Das innerHTML-Attribut hat eine ähnliche Funktion wie innerText, gibt jedoch nicht den Textinhalt des Elements zurück, sondern die HTML-Struktur des Elements, und das DOM wird beim Schreiben von
< automatisch erstellt ;div>

123 456

Der innerHTML-Rückgabeinhalt des äußeren div ist „

123456< /span>

"

Der äußereHTML-Rückgabeinhalt enthält auch sich selbst

##### ## Gemeinsame Methoden von Dokumentobjekten

open(), close()
Die Methode document.open wird verwendet, um ein neues Dokument für die Schreibmethode zum Schreiben von Inhalten zu erstellen. Dies entspricht tatsächlich dem Löschen des aktuellen Dokuments und dem Neuschreiben des Inhalts
Die Methode document.close wird verwendet, um das von der Methode open erstellte Dokument zu schließen. Sobald die Schreibmethode geschlossen ist, kann sie keinen Inhalt mehr schreiben.

write()

Die Methode document.write wird verwendet, um Inhalte in das aktuelle Dokument zu schreiben. Solange das aktuelle Dokument nicht mit der Close-Methode geschlossen wurde, wird der geschriebene Inhalt an den vorhandenen Inhalt angehängt.

document.open();document.write("hello");document.write("world");document.close();```
1. Ob die Seite gerendert wurde , dann Wenn die Schreibmethode aufgerufen wird, ruft sie zuerst die offene Methode auf, um den gesamten Inhalt des aktuellen Dokuments zu löschen und es dann zu schreiben.

2. Wenn die Schreibmethode während des Seitenrenderings aufgerufen wird, wird die Open-Methode nicht aufgerufen.

Es ist zu beachten, dass die Schreibmethode nach dem Aufruf der Schließmethode zwar nicht mehr zum Schreiben von Inhalten verwendet werden kann, andere DOM-Knoten der aktuellen Seite jedoch weiterhin geladen werden.
#####*Mit Ausnahme einiger besonderer Umstände sollten Sie versuchen, die Verwendung der document.write-Methode zu vermeiden.

In diesem Artikel werden Probleme im Zusammenhang mit Timern erläutert. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Detaillierte Erläuterung des Funktionsprinzips von AJAX und seiner Vor- und Nachteile

N Methoden von JS Erhalten von Elementen und deren dynamische und statische Diskussion

JavaScript vollständige Zusammenfassung der DOM-Elemente

Das obige ist der detaillierte Inhalt vonVollständige JavaScript-Zusammenfassung des Timers und des DOM-Dokuments. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!