Implémenter la composition de JavaScript (interprétation détaillée de BOM et DOM)

Maintenant, je vais vous proposer un article sur la façon d'implémenter JavaScript (explication détaillée de BOM et DOM). Maintenant, je le partage avec vous et le donne comme référence.

Nous savons qu'une implémentation JavaScript complète doit être composée de trois parties : ECMAScript (noyau), BOM (Browser Object Model) et DOM (Document Object Model).

BOM :

BOM fournit de nombreux objets pour accéder aux fonctions du navigateur qui n'ont rien à voir avec le contenu de la page Web (ce sont des DOM ), actuellement, BOM a été déplacé dans la spécification HTML5 par le W3C.

objet window :

Le noyau de BOM représente une instance du navigateur. C'est à la fois une interface pour accéder à la fenêtre du navigateur via javascript et un Global spécifié par ECMAScript. . L'objet, qui désigne tout objet, variable et fonction définie dans la page Web, a window comme objet global et a donc accès à des méthodes telles que paresinInt(). (Extrait de Hauteur Trois). De plus, si une page Web contient des frames, chaque frame possède son propre objet window et est stocké dans la collection frames (en commençant à l'index 0, ltr, ttb).

Tout d'abord, les variables et fonctions de l'environnement d'exécution global sont toutes des attributs et méthodes de l'objet window. Bien sûr, il existe une légère différence entre les variables globales et le type de propriété window directement défini (pour être précis, les variables globales explicitement déclarées) ne peuvent pas être supprimées, mais la propriété window peut. De plus, il y a un autre détail à noter. Essayer d'accéder à des variables non déclarées provoquera une erreur, mais il n'y a aucun problème lors de l'utilisation de l'objet fenêtre de requête.

Alors, quelles sont les propriétés ou méthodes courantes des fenêtres ?

1.name, chaque objet fenêtre a un attribut name, qui contient le nom du cadre. Généralement pour comprendre les relations et les cadres des fenêtres.

2. Méthode de positionnement de la fenêtre : moveTo (coordonnée x de la nouvelle position, coordonnée y de la nouvelle position), moveBy (déplacer x horizontalement, déplacer y verticalement). Ces deux méthodes ne sont pas applicables au framework.

3. Attributs de taille de la fenêtre : innerWidth/Height (taille de la zone d'affichage (moins la largeur de la bordure)/* IE, Safari, Firefox */), externalWidth/Height (renvoie la taille du navigateur window/* IE, Safari, Firefox */). Dans Chrome, l'intérieur et l'extérieur renvoient tous deux la taille de la zone d'affichage.

Bien sûr, vous pouvez modifier la taille de la fenêtre via resizeTo (nouvelle largeur de fenêtre, nouvelle hauteur de fenêtre), resizeBy (augmenter x que la largeur d'origine, augmenter y que la hauteur d'origine). Cette méthode de chant d’amour ne s’applique pas aux structures en ossature.

4.window.open (URL, cible de la fenêtre, chaîne d'attribut, booléen indiquant si la nouvelle page remplace la page actuellement chargée dans l'historique du navigateur) est utilisé pour accéder à une URL spécifique ou ouvrir une nouvelle fenêtre. Si une cible de fenêtre est spécifiée et que la cible de fenêtre est le nom d'une fenêtre ou d'un cadre existant, l'URL spécifiée sera chargée dans la fenêtre ou le cadre renommé. Sinon, la nouvelle fenêtre qui s'ouvre est nommée fenêtre cible. Bien entendu, les mots-clés pouvant être spécifiés pour la cible de la fenêtre incluent _self, _parent, _top et _blank.

<a href=http://www.jb51.net>click me</a>
  　　<script>
    var link=document.getElementsByTagName("a")[0];
      alert(link.nodeName);   
     window.onload=function(){
      
      link.onclick=function () {
        window.open(link.href,"good","width=400px,height=300px");
        return false;
    
      }  
    }
　　</script

Les paramètres spécifiques de la chaîne caractéristique ici ne seront pas décrits en détail. Ceux qui sont intéressés peuvent cliquer ici

5 En tant que langage monothread, js permet toujours le réglage. une valeur de délai d'attente (exécuter le code après l'événement spécifié) et la valeur d'intervalle (cycle à chaque heure spécifiée) pour planifier l'exécution du code à un moment spécifique.

Appel Timeout : setTimeout (chaîne de code js, durée en millisecondes). En tant que langage monothread, la file d'attente des tâches js ne peut exécuter qu'un seul morceau de code à la fois si la file d'attente des tâches est vide après l'ensemble. intervalle de temps, puis exécutez la chaîne de code, sinon attendez que l'exécution du code précédente soit terminée avant de l'exécuter.

var al=setTimeout(function () {
      alert("good");
    },5000);
    alert(al); //2

Ici, j'ai appelé une fonction anonyme pour afficher good après 5 secondes. Une boîte d'avertissement est apparue dans la fenêtre et affichée 2. On peut voir que la fonction setTimeout() renvoie un identifiant numérique, ce qui est unique. Ensuite, nous pouvons utiliser cet ID pour effacer l'appel de délai d'attente, et nous pouvons utiliser clearTimeout(ID) pour l'effacer.

Appel indirect : setInterval(), il accepte les mêmes paramètres que setTimeout(), et renvoie également un identifiant numérique, qui peut être effacé à l'aide de clearTimeout().

6. Les méthodes de la boîte de dialogue système : alert(), confirm(), prompt(), etc. sont écrites dans mon blog précédent, cliquez ici

objet de localisation

Plutôt que d'être un objet dans le BOM, il vaut mieux dire que Location est un attribut dans l'objet window Bien entendu, c'est aussi un attribut de l'objet document dans le DOM dont il sera question plus tard. , c'est-à-dire que window.location et document location font référence au même objet.

Liste des attributs des objets de localisation. La modification de ces attributs peut charger une nouvelle page et générer un nouvel enregistrement dans l'historique. L'utilisation de location.replace() ne générera pas de nouveaux enregistrements dans l'historique.

hash	"#contents"	返回url中的hash，没有为“”
host	"www.google.com"	返回服务器名和端口号（如果有）
hostname	"www.google.com"	返回不带端口号的服务器名称
href	"www.google.com"	返回当前页面的完整url,调用了assign()
pathname	''/wileyCDA/'	返回目录名称
port	"8080"	返回端口号，没有则返回空字符串
protocol	"http:"	返回页面使用的协议
search	"?=javascript"	返回查询字符串，以问号开头

Objet Navigator : Le standard de facto utilisé pour identifier les navigateurs. Ses propriétés et méthodes sont principalement utilisées pour détecter le type de navigateur.

Le reste, comme l'objet history (enregistrer les enregistrements historiques) et l'objet screen (indique les capacités du client), ne sont pas utiles dans la programmation en js, ils ne seront donc pas décrits en détail.

------------------------------------------------------ ------ ----------------------------------

DOM :

DOM est une API basée sur XML et étendue pour HTML qui repose sur l'expansion de l'arborescence des nœuds.

Tout d'abord, il faut préciser que le nœud de document est le nœud racine de chaque nœud. Le nœud de document a et n'a qu'un seul nœud enfant, qui est l'élément html (élément de document).

Type de nœud :

Une interface dans DOM1, implémentée par tous les types de nœuds du DOM (nœuds de texte, nœuds d'attribut, nœuds d'élément), cette interface est utilisée en js comme implémentation du type de nœud.

attribut nodeType, appartenant à chaque nœud. Représenté par 12 valeurs numériques, élément--1, attribut--2, texte--3...

attribut nodeName Pour les nœuds d'élément, la valeur de nodeName est le nom de l'étiquette.

Attribut nodeValue, pour les nœuds d'élément, la valeur de nodeValue est nulle.

Relation de nœud : chaque nœud possède un attribut childNodes et enregistre un objet NodeList (comme un objet tableau). Chaque nœud possède un attribut parentNode qui pointe vers le nœud parent. Les nœuds de childNodes ont le même parentNode. Les nœuds frères et sœurs sont accessibles à l’aide des propriétés previousSibling et nextSibling. En même temps, childNodes[0]==firstChild, childNodes[childNodes.length-1]==lastChild.

Noeud d'opération : appendChild(), poussez un nœud à la fin de NodeList et renvoyez le nœud nouvellement ajouté. insertBefore(), déplace un nœud vers la tête de NodeList et renvoie le nœud nouvellement ajouté. replaceChild(newChild,targetChild), remplace le nœud cible. Le nœud d'origine est toujours dans le document, mais n'a pas de position. RemoveChild(tragetChild), supprime les nœuds, a un effet similaire à replaceChild(). cloneChild(boolean), true signifie une copie complète (nœud entier et nœuds enfants), false signifie une copie de base.

Type de document :

représente un document. L'objet document est une instance de HTMLDDocument (hérité du type Document) et représente la page HTML entière. Dans le même temps, l'objet document est également une propriété de l'objet window, il est donc accessible en tant qu'objet global. document.firstChild==html. document.body==body document.doctype--->Référence à 1a309583e26acea4f04ca31122d8c535. document.title--->title document.url--->location.url.

Rechercher des éléments : getElementById(),getElementsByTagName(),getElementsByClassName().

Rédaction de documents Entrée : write(), writeln(), open(), close()

Type d'élément :

getAttribute(), pour obtenir les attributs de la classe, utilisez " class", au lieu de className, vous pouvez obtenir l'attribut class en utilisant element.className.

setAttribute(), définit l'attribut et le remplace s'il existe. Sinon, créez.

removeAttribute(), supprime complètement les attributs des éléments.

createElement(), crée un nouvel élément.

Type de texte :

createTextNode(), crée un nœud de texte si deux nœuds de texte sont des nœuds frères adjacents, les deux textes seront connectés sans espace.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Spécifications de base de JavaScript

Utilisation de base de Javascript

Exemple de code pour créer des effets spéciaux de feux d'artifice à l'aide de p5.js_javascriptTips

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!