Résumé complet JavaScript du minuteur et du document DOM

Dans le processus d'apprentissage de JavaScript, vous rencontrerez de nombreux problèmes tels que les minuteries et le DOM. Cet article expliquera en détail les problèmes associés.

En JavaScript, il existe deux types de minuteries, l'une est setTimeout() et l'autre est setTimeout()

setTimeout()

La fonction setTimeout est utilisée pour spécifiez combien de millisecondes après qu'une certaine fonction ou un certain morceau de code sera exécuté. Il renvoie un entier représentant le numéro du minuteur, qui peut être utilisé pour annuler le minuteur ultérieurement.
var timerId = setTimeout(func|code, delay)

Dans le code ci-dessus, la fonction setTimeout accepte deux paramètres Le premier paramètre func|code est le nom de la fonction ou un morceau de code qui. sera reporté. Le deuxième paramètre delay est le nombre de millisecondes pour retarder l'exécution.

Il est à noter que le code pour reporter l'exécution doit être mis dans setTimeout sous forme de chaîne, car le moteur utilise la fonction eval en interne pour convertir la chaîne en code.
Si l'exécution différée est une fonction, vous pouvez directement mettre le nom de la fonction dans setTimeout. D'une part, la fonction eval présente des problèmes de sécurité, et d'autre part, afin de faciliter l'optimisation du code par le moteur JavaScript, la méthode setTimeout prend généralement la forme d'un nom de fonction, comme indiqué ci-dessous.

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--;
    }
  }
})();```

Après avoir exécuté le code ci-dessus, tout setTimeout n'a en réalité aucun effet. ###Le mécanisme de fonctionnement de setTimeout et setInterval est le suivant : 1. Déplacez le code spécifié hors de cette exécution, attendez le prochain tour de boucle d'événement, puis vérifiez si l'heure spécifiée est arrivée. 2. S'il arrive, exécutez le code correspondant ; s'il n'arrive pas, attendez le prochain tour d'Event Loop pour rejuger.

Cela signifie que le code spécifié par setTimeout ne sera pas exécuté tant que tous les codes exécutés cette fois n'auront pas été exécutés.

La fonction de setTimeout est de reporter l'exécution du code jusqu'à l'heure spécifiée. Si l'heure spécifiée est 0, c'est-à-dire setTimeout(f,0), alors il ne sera pas exécuté immédiatement
setTimeout(f,0) will Le deuxième paramètre est défini sur 0, ce qui provoque l'exécution de f dès la fin des tâches existantes (tâches de synchronisation de script et événements existants dans la "file d'attente des tâches"). En d'autres termes, la fonction de setTimeout(f,0) est d'exécuter la tâche spécifiée le plus tôt possible. #DOM>Avant, je parlais essentiellement de la syntaxe de js, mais maintenant je combine html et js.
Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML. Il fournit une représentation structurée du document (arborescence structurelle) et définit la manière dont les programmes peuvent accéder à l'arborescence structurelle pour modifier la structure, le style et le contenu du document.

DOM fournit un moyen de représenter un document comme un groupe structuré de nœuds et d'objets contenant des propriétés et des méthodes. Essentiellement, il connecte une page Web à un script ou à un langage de programmation.
 Pour modifier quelque chose sur la page, JavaScript doit obtenir le document HTML Entrée pour accéder à tous les éléments du . Cette entrée, ainsi que les méthodes et attributs permettant d'ajouter, de déplacer, de modifier ou de supprimer des éléments HTML, sont tous obtenus via le DOM ##Document Object* Chaque document HTML chargé dans le navigateur deviendra un objet document. L'objet document contient les informations de base du document. Nous pouvons accéder et modifier tous les éléments de la page HTML via JavaScript. ####Attributs couramment utilisés des objets document L'objet document possède de nombreux attributs pour décrire les informations du document. Voici quelques
* ####doctype Lors de l'écriture d'un document HTML, la première phrase est généralement un doctype. instruction, qui peut être transmise via le document. Obtenez l'objet, sinon, retournez null`document.doctype; // document.doctype.name; // "html"`* ####head、body `document.head;`
` document.body;`
Comment obtenir l'en-tête du document respectivement via ces deux attributs, le nœud body
* ####activeElementL'attribut activeElement renvoie l'élément qui a fait l'objet d'une attention particulière dans le document actuel.
Les utilisateurs peuvent généralement utiliser la touche de tabulation pour déplacer le focus et la barre d'espace pour activer le focus. Par exemple, si le focus est sur un lien, appuyer sur la barre d'espace passera au lien

*. ### #documentURI, domain, lastModifieddocumentURI les attributs renvoient l'URL du document actuel
l'attribut domain renvoie le nom de domaine du document
lastModified renvoie l'heure de la dernière modification du document actuel

* emplacement
L'attribut location renvoie un objet en lecture seule, fournit les informations URL du document actuel

// Supposons que l'URL actuelle soit
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 // "/ chemin/a.html"document.location.search // "?x=111"
document.location.hash // "#part1"
document.location.user // "utilisateur"
document .location.password // "passed"
// Aller vers une autre URL
document.location.assign('http://www.google.com')
// Prioriser le rechargement depuis le server Load
document.location.reload(true)
// Prioriser le rechargement depuis le cache local (valeur par défaut)
document.location.reload(false)
// Passer à une autre URL, Mais le le document actuel n'est pas conservé dans l'objet historique,
// c'est-à-dire que vous ne pouvez pas utiliser le bouton Précédent pour revenir au document actuel
document.location.assign('http://www.google.com' )// changer l'emplacement L'objet est converti en chaîne, ce qui équivaut à document.location.href
document.location.toString()```

Bien que l'objet renvoyé par l'attribut location est en lecture seule, l'URL peut être attribuée à Avec cet attribut, la page Web passera automatiquement à l'URL spécifiée.
document.location = 'http://www.example.com';// Équivalent à document.location.href = 'http://www.example.com';

titre, jeu de caractères

l'attribut title renvoie le titre du document actuel, qui est accessible en écriture
l'attribut characterSet renvoie le jeu de caractères pour le rendu du document actuel

readyState

l'attribut readyState renvoie le actuel L'état du document, il y a trois valeurs possibles
chargement : phase de chargement du code HTML, l'analyse n'est pas encore terminée
interactif : phase de chargement des ressources externes
complet : tout le chargement est terminé

#### ###compatMode
L'attribut compatMode renvoie le mode dans lequel le navigateur traite les documents. Les valeurs possibles sont
BackCompat : mode de compatibilité ascendante, c'est-à-dire qu'aucun DOCTYPE n'est ajoutéCSS1Compat : mode strict, DOCTYPE
est ajouté

#######cookie

Le cookie est le texte stocké sur le client Plus tard, dans le chapitre sur le stockage du client, nous présenterons
<.>innerText

innerText est un attribut inscriptible, renvoie le contenu du texte contenu dans l'élément lorsqu'il y a plusieurs niveaux, le contenu sera épissé dans l'ordre des éléments superficiels aux éléments profonds

123 456

Le contenu renvoyé par innerText du div externe est "123456"

innerHTML, externalHTML

L'attribut innerHTML a une fonction similaire à innerText, mais il ne renvoie pas le contenu textuel de l'élément, mais renvoie la structure HTML de l'élément et le DOM est automatiquement construit lors de l'écriture de

<. ;div>

123 456

Le contenu de retour innerHTML du div externe est "

123456< /span>

"
Le contenu de retour externalHTML s'inclut également

##### ## Méthodes courantes des objets de document

open(), close()

La méthode document.open est utilisée pour créer un nouveau document pour que la méthode write puisse écrire du contenu. Cela équivaut en fait à effacer le document actuel et à réécrire le contenu

La méthode document.close est utilisée pour fermer le document créé par la méthode open. Une fois fermée, la méthode write ne peut pas écrire de contenu.

write()

La méthode document.write est utilisée pour écrire du contenu dans le document actuel. Tant que le document actuel n'a pas été fermé à l'aide de la méthode close, le contenu qu'il écrit sera ajouté au contenu existant.

document.open();document.write("hello");document.write("world");document.close();```

1. Si la page a été rendue , puis lorsque la méthode write est appelée, elle appellera d'abord la méthode open pour effacer tout le contenu du document actuel, puis l'écrira.

2. Si la méthode write est appelée lors du rendu de la page, la méthode open ne sera pas appelée.
Il convient de noter que bien que la méthode write ne puisse plus être utilisée pour écrire du contenu après avoir appelé la méthode close, les autres nœuds DOM de la page actuelle continueront à se charger.
#####*Sauf circonstances particulières, vous devriez essayer d'éviter d'utiliser la méthode document.write.


Cet article explique les problèmes liés aux minuteries. Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois.

Recommandations associées :

Explication détaillée du principe de fonctionnement d'AJAX et de ses avantages et inconvénients

N méthodes de JS obtention des éléments et leur discussion dynamique et statique

Résumé complet JavaScript des éléments DOM

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!