Comment faire fonctionner DOM dans JS

DOM, le Document Object Model, est un standard du W3C (World Wide Web Consortium) qui définit le standard d'accès au HTML et au XML : le W3C Document Object Model (DOM) est une interface neutre en termes de plate-forme et de langage. permet un accès dynamique par programmes et scripts et met à jour le contenu, la structure et le style du document.

Le standard W3C Dom est divisé en 3 parties différentes : 1. Core DOM - un modèle standard pour tout document structuré 2. XML DOM - un modèle standard pour les documents XML 3. HTML DOM - pour les documents HTML Le standard modèle de

où dans le DOM HTML, tout est un nœud, et le DOM est du HTML traité comme un nombre de nœuds 1. Le document entier est un nœud de document 2. Chaque élément HTML est un nœud d'élément 3. . Le texte à l'intérieur d'un élément HTML est un nœud de texte 4. Chaque attribut HTML est un nœud d'attribut 5. Les annotations sont des nœuds de commentaires

HTML DOM traite les documents HTML comme une structure arborescente, appelée arborescence de nœuds HTML. DOM, tous les nœuds de l'arborescence sont accessibles via JavaScript, tous les nœuds HTML (éléments) peuvent être modifiés et les nœuds peuvent être créés ou supprimés.

Certaines méthodes HTML DOM couramment utilisées : 1.getElementById( id) -Obtenir le nœud (élément) avec l'identifiant spécifié 2.appendChid(node) -Insérer un nouveau nœud enfant (élément) 3.removeChild(node) -Supprimer le nœud enfant (élément)

Certains HTML couramment utilisés Attributs DOM : 1.innerHTML-la valeur texte du nœud (élément) 2.parentNode-le nœud parent du nœud (élément) 3.childNodes-le nœud enfant du nœud (élément) 4..attributes-le nœud d'attribut du nœud (élément)

Opération DOM

Créer un élément

var newp = document.createElement("p"); ; définir l'ID

newp.id = "first";Définir la couleur d'arrière-plan newp.style.background = "red";Ajouter une zone d'élément dans le corps

Obtenir l'élément à ajouter en premier

var body = document.getElementsByTagName("body")[0];var box = document.getElementsByClassName("box")[0];body.appendChild(newp);//Il y a deux contenus dans body, l'un est newp et l'autre est box //La situation actuelle est d'insérer le contenu de newp derrière la boîte

Si vous souhaitez insérer le contenu de p devant la boîte, ce qui suit est comme suit : body.insertBefore(newp, box); supprimer l'élément body.removeChild( box);//Supprimer l'étiquette de la boîte box.remove();Attribut DOM

nœud : déclaration d'annotation de texte d'étiquette (doctype)

Vous pouvez obtenir tous les nœuds de l'ordre des éléments via la méthode suivante : console log(box.childNodes); Obtenez le nœud enfant du type d'étiquette, et le nœud obtenu est une étiquette console.log(box. cheildren[0]); Taille et position console.log(newp.offsetWidth);//La largeur d'impression inclut la console de bordure .log(newp.clientWidth);//Ne contient pas de bordures ni de barres de défilement (zone visible) de la console. log(newp.scrollHeight);//C'est aussi la distance de défilement verticale/horizontale de l'élément, ou le défilement de l'élément Parcourez la partie invisible du débordement et traitez la partie excédentaire. Visible est visible par défaut overflow:scroll; La position de la barre de défilement apparaît par rapport à la position du parent de positionnement console.log(newp.offsetTop); console.log(newp.offsetLeft) ;La distance à laquelle l'élément enfant défile vers le haut À l'exception de scrollTop, les éléments ci-dessus sont lus. -only console.log(newp.scrollTop)

Timer

Timer unique, qui ne peut être utilisé qu'une seule fois

Méthode d'écriture 1 : var time = setTimeout(function (){ console.log("Minuteur unique"); },1000); Méthode d'écriture 2 : function f1(){ console.log("Minuterie unique") Timer"); } setTimeout(f1,1000 ); Effacer le minuteur unique clearTimeout(time); Minuteur de boucle, de temps en temps, la fonction sera exécutée

Écrit 1 : var timer = setInterval (funtion(){ console.log("Loop timer"); })var timer = setInterval(f2, 1000); Effacer la boucle timer clearInterval(timer); DOM est une structure de document HTML, qui sert en fait à permettre à JS de faire fonctionner des éléments HTML. Selon une spécification formulée, la racine du DOM est l'objet document.Cet objet a de nombreux attributs et méthodes, tels que la création de nœuds, la copie de nœuds, la suppression de nœuds, la modification d'attributs, etc. L'émergence des objets DOM est de faciliter l'utilisation des balises HTML par JavaScript. Le modèle d'objet (Document Object Model) est également basé sur des documents HTML. Il est fourni à Javascript pour modifier dynamiquement (comme les événements de clic) le statut du document. Par conséquent, l'exploitation du DOM consiste à exploiter l'objet du document HTML (chaque balise).

CSS n'est qu'un style de document HTML, et JavaScript peut combiner HTML et CSS, ce qui était auparavant appelé DHTML (Dynamic HTML)

DOM consiste à définir les nœuds en XML (ou HTML ) en une base unifiée Les données de l'objet peuvent fournir des spécifications techniques contrôlées par un langage de programmation (tel que javascript)

Vous pouvez utiliser le langage javascript pour faire fonctionner le DOM afin de modifier la page Web. vous devez indiquer à Javascript quel nœud utiliser. Il s'agit de faire fonctionner le DOM

La manipulation du DOM vous permet de modifier le mode d'interaction des pages Web. Toutes les interactions de pages Web reposent sur cette technologie DOM. utiliser d'autres langages pour manipuler DOM

DOM est un arbre, les valeurs​​et les feuilles sont numérotées Vous indiquez à un script une fonction pour trouver quelle feuille sur cette branche et quels changements doivent être apportés. fait sur cette feuille

Lorsque vous saisissez des données dans la barre de recherche de Zhihu À ce moment, Javascript capture votre entrée, utilise une requête asynchrone sur le serveur et affiche dynamiquement les résultats de la recherche

.Lorsque vous glissez vers le bas, Javascript capture la distance parcourue et utilise la distance pour déterminer si le DOM a changé, puis permet à la barre de navigation supérieure de défiler avec la fenêtre du navigateur, vous évitant ainsi de regarder en arrière

. Lorsque vous cliquez sur le bouton Modifier, javascript capture l'événement de clic de souris sur ce bouton et vous renvoie une réponse modifiable

Javascript ne peut pas vraiment changer le DOM, il modifie uniquement le contenu présenté. Lorsque vous actualisez, vous trouverez. que le contenu présenté disparaît.

Mais vous pouvez transmettre ces modifications à l'interface du langage back-end sous forme de requêtes, et le langage back-end PHP Python Java Node, etc. effectuera les opérations ultérieures. Après avoir reçu votre demande, modifiez les données du serveur, afin que les modifications prennent effet et ne disparaissent pas après actualisation

Cependant, il n'est pas nécessaire que le serveur se mélange aux interactions des utilisateurs telles que le glissement des fenêtres pop-up et changer de couleur, etc. L'interaction n'est utilisée que temporairement et deviendra la valeur par défaut. Elle n'a pas besoin d'être enregistrée sur le serveur. Assurez-vous simplement qu'il y a des commentaires pendant l'interaction. structure statique (les éléments de base de la page Web et les fonctions de base de chaque élément) Quelle signification peut être générée par les fonctions de base des éléments et quel type de contenu cette signification peut-elle générer)

CSS présente l'embellissement hiérarchique (attributs de base et spéciaux des éléments, forme, statut des éléments, disposition des éléments)

Javascript est responsable de l'interaction dynamique (fonctionnement du DOM en AJAX pour l'actualisation asynchrone et l'interaction avec le serveur). mauvais https://www.zhihu.com/question/34219998/answer/58211568DOM est l'interface permettant à Javascript de faire fonctionner les pages Web, le nom complet est Document Object Model. Sa fonction est de convertir la page Web en un objet javascript. , afin que les scripts Javascript puissent être utilisés pour effectuer diverses opérations (telles que l'ajout et la suppression d'éléments, etc.)

Le navigateur, basé sur le modèle DOM, analysera la structure documentée (telle que HTML ou XML, etc.) en une série de nœuds, puis analyser ces nœuds dans une structure arborescente (Dom Tree). Tous les nœuds et la structure arborescente finale ont des interfaces externes standardisées, de sorte que le DOM peut être compris comme une interface de programmation pour les pages Web. normes internationales standard.Nous utilisons actuellement DOM3

À proprement parler, DOM n'appartient pas à Javascript, mais les opérations DOM sont les tâches les plus courantes de Javascript, et les tâches les plus courantes de Javascript sont les langages de manipulation DOM les plus courants. .

DOM

DOM, le Document Object Model, est un standard du W3C (World Wide Web Consortium)

DOM définit un standard d'accès au HTML et XML : W3C Document Object Model (DOM ) est une interface neutre en termes de plate-forme et de langage, qui permet aux programmes et aux scripts d'accéder et de mettre à jour dynamiquement le contenu, la structure et le style du document

La norme DOM du W3C est divisée en 3 parties différentes : 1. Core DOM - pour tout document structuré Modèle standard 2.XML DOM - Modèle standard pour les documents XML 3.HTML DOM - Modèle standard pour les documents HTML

Parmi eux, dans HTML DOM, tout est un nœud, et DOM est considéré comme le nombre de nœuds HTML.1. Le document entier est un nœud de document 2. Chaque élément HTML est un nœud d'élément 3. Le texte à l'intérieur d'un élément HTML est un nœud de texte 4. Chaque attribut HTML est un nœud d'attribut 5. Les commentaires sont des nœuds de commentaire

HTML DOM traite les documents HTML comme une structure arborescente. Cette structure est appelée une arborescence de nœuds. Grâce à HTML DOM, tous les nœuds de l'arborescence sont accessibles via JavaScript. . Ou supprimez un nœud.

Certaines méthodes HTML DOM couramment utilisées : 1.getElementById(id) - obtenez le nœud (élément) avec l'identifiant spécifié 2.appendChid (node) - insérez un nouveau nœud enfant (élément). ) 3 .removeChild(node) -Supprimer les nœuds enfants (éléments)

Certains attributs HTML DOM couramment utilisés : 1.innerHTML-la valeur texte du nœud (élément) 2.parentNode-le nœud parent du nœud (élément) 3.childNodes -Nœud enfant 4..attributs du nœud (élément) -Nœud d'attribut du nœud (élément)

Opération DOM

Créer un élément

var newp = document.createElement(" p");Définissez le nom de la classe newp.className = "item";Définissez l'ID

newp.id = "first";Définissez la couleur d'arrière-plan newp.style.background = " red";Ajouter la zone d'élément dans le corps

Obtenir l'élément à ajouter en premier

var body = document.getElementsByTagName("body")[0];var box = document.getElementsByClassName ("box")[0];body. appendChild(newp);//Il y a actuellement deux contenus dans le corps, l'un est newp et l'autre est box//La situation actuelle est d'insérer le contenu de newp derrière la boîte

Si vous souhaitez insérer le contenu de p dans Le devant de la boîte est le suivant : body.insertBefore(newp, box); supprimez l'élément body.removeChild(box);//supprimez l'étiquette de la boîte; box.remove(); Attribut DOM

nœud : instruction d'annotation de texte d'étiquette ( doctype)

Vous pouvez obtenir tous les nœuds de l'ordre des éléments via la méthode suivante : console.log(box. childNodes); Récupère le nœud enfant du type d'étiquette, et le nœud obtenu est une étiquette console.log(box.cheildren[0 ]); Taille position console.log(newp.offsetWidth); //La largeur d'impression inclut la bordure console. log(newp.clientWidth); //N'inclut pas de bordure ou de barre de défilement (zone visible) console.log(newp. scrollHeight);//C'est aussi la distance à laquelle l'élément a défilé verticalement/horizontalement, ou la partie invisible de l'élément déplacé par le processus de débordement. La partie excédentaire est visible par défaut overflow:scroll; //La position de la barre de défilement apparaît par rapport au positionnement parent. ; console.log(newp.offsetLeft); une distance lorsque l'élément enfant défile vers le haut. À l'exception de scrollTop, les éléments ci-dessus sont en lecture seule console.log(newp.scrollTop)

Timer

Minuteur unique, ne peut être utilisé qu'une seule fois

Méthode d'écriture 1 : var time = setTimeout(function(){ console.log("One-time timer") ; },1000);Méthode d'écriture 2 : function f1(){ console.log("One-time timer"); } setTimeout(f1,1000);Effacer la minuterie unique clearTimeout(time);Minuterie en boucle, chaque Après un certain temps, la fonction

sera exécuté une fois. Méthode d'écriture 1 : var timer = setInterval(funtion(){ console.log("Loop timer"); })var timer = setInterval(f2, 1000); clear Loop timer clearInterval; (timer); DOM est une structure de document HTML. Il s'agit en fait d'une spécification formulée pour permettre à JS de faire fonctionner des éléments HTML. La racine du DOM est l'objet du document. Cet objet possède de nombreux attributs et méthodes de placement, tels que la création de nœuds et la copie de nœuds. , et la suppression des nœuds. L'émergence d'objets DOM tels que la modification des attributs vise à faciliter le fonctionnement des balises HTML par JavaScript. DOM est un modèle d'objet de document (Document Object Model), qui est également basé sur des documents HTML. (comme les événements de clic) modifient l'état du document, donc exploiter le DOM revient à exploiter l'objet du document HTML (chaque balise)

CSS stylise simplement le document HTML, et javascript peut combiner HTML et CSS, ce qui est ce qu'on appelait auparavant DHTML (HTML dynamique)

DOM définit les nœuds en XML (ou HTML) comme des données d'objet fondamentalement unifiées et peut fournir des spécifications techniques contrôlées par un langage de programmation (tel que javascript)

Vous pouvez utiliser le langage javascript pour faire fonctionner le DOM. Afin de modifier la page Web, vous devez indiquer à Javascript quel nœud manipuler le DOM, vous pouvez également utiliser d'autres langages pour faire fonctionner le DOM.

DOM est un arbre, les valeurs​​et les feuilles sont numérotées, vous dites à un script une fonction pour trouver quelle feuille de cette branche, pour cela Quels changements Ye Zi devrait-il apporter

Lorsque vous saisissez des données dans la barre de recherche de Zhihu, Javascript capture votre saisie, utilise des requêtes asynchrones sur le serveur et affiche dynamiquement les résultats de la recherche.

Lorsque vous glissez vers le bas, Javascript capture la distance parcourue et utilise la distance pour déterminer si le DOM a changé, puis permet à la barre de navigation supérieure de défiler avec la fenêtre du navigateur, vous évitant ainsi de regarder en arrière

. Lorsque vous cliquez sur le bouton Modifier, javascript capture l'événement de clic de souris sur ce bouton et vous renvoie une réponse modifiable

Javascript ne peut pas vraiment changer le DOM, il modifie uniquement le contenu présenté. Lorsque vous actualisez, vous trouverez. que le contenu présenté disparaît.

Mais vous pouvez transmettre ces modifications à l'interface du langage back-end sous forme de requêtes, et le langage back-end PHP Python Java Node, etc. effectuera les opérations ultérieures. Après avoir reçu votre demande, modifiez les données du serveur, afin que les modifications prennent effet et ne disparaissent pas après actualisation

Cependant, il n'est pas nécessaire que le serveur se mélange aux interactions des utilisateurs telles que le glissement des fenêtres pop-up et changer de couleur, etc. L'interaction n'est utilisée que temporairement et deviendra la valeur par défaut. Elle n'a pas besoin d'être enregistrée sur le serveur. Assurez-vous simplement qu'il y a des commentaires pendant l'interaction. structure statique (les éléments de base de la page Web et les fonctions de base de chaque élément) Quelle signification peut être générée par les fonctions de base des éléments et quel type de contenu cette signification peut-elle générer)

CSS présente l'embellissement hiérarchique (attributs de base et spéciaux des éléments, forme, statut des éléments, disposition des éléments)

Javascript est responsable de l'interaction dynamique (fonctionnement du DOM en AJAX pour l'actualisation asynchrone et l'interaction avec le serveur). mauvais https://www.zhihu.com/question/34219998/answer/58211568DOM est l'interface permettant à Javascript de faire fonctionner les pages Web, le nom complet est Document Object Model. Sa fonction est de convertir la page Web en un objet javascript. , afin que les scripts Javascript puissent être utilisés pour effectuer diverses opérations (telles que l'ajout et la suppression d'éléments, etc.)

Le navigateur, basé sur le modèle DOM, analysera la structure documentée (telle que HTML ou XML, etc.) en une série de nœuds, puis analyser ces nœuds dans une structure arborescente (Dom Tree). Tous les nœuds et la structure arborescente finale ont des interfaces externes standardisées, de sorte que le DOM peut être compris comme une interface de programmation pour les pages Web. normes internationales standard.Nous utilisons actuellement DOM3

À proprement parler, DOM n'appartient pas à Javascript, mais les opérations DOM sont les tâches les plus courantes de Javascript, et les tâches les plus courantes de Javascript sont les langages de manipulation DOM les plus courants. .

相关推荐：

js中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!