DOM en JavaScript

Modèle objet de document (DOM)

L'API DOM est une interface de programmation pour les documents Web. Il représente une page permettant aux programmes de modifier la structure, le style et le contenu du document.

Le DOM représente un document comme une arborescence d'objets ; chaque objet représente une partie de la page.

Opérations DOM en JavaScript

Lors de l'implémentation du DOM en JavaScript, nous pouvons prendre en compte les connaissances de base suivantes

 ;

1. querySelector : Il s'agit d'un sélecteur gourmand. Il sélectionne le premier élément spécifié.

Par exemple :

querySelector("h1")

Cela localisera le premier élément h1 dans tout le document HTML

2. querySelectorAll : Ceci ciblera tous les éléments h3 du document HTML.

Par exemple :

querySelectorAll("h3")

Ceux-ci seront affichés sous forme de liste de nœuds dans la console.

Remarque : La liste de nœuds ressemble à un tableau, mais il y a une grande différence

Les listes de nœuds sont des API de navigateur et les tableaux sont des API JavaScript. En bref, les listes de nœuds n'ont pas leur place dans JavaScript, les boucles ne peuvent donc pas y être implémentées.

De plus, getElementbyTagName() et querySelectorAll ne sont pas des méthodes JavaScript, mais des API de navigateur.

innerHTML et innerText

Il est recommandé d'utiliser innerHTML au lieu d'innerText car cela empêchera les autres de modifier votre script.

Méthodes pour positionner les éléments

• Nous disposons de nombreuses façons de localiser ou de sélectionner les éléments sur lesquels opérer dans un document.

Ces méthodes incluent :

Par pièce d'identité par nom par classe par balise Par nom de tag

Remarque : Nous n'utilisons jamais ID et Class pour sélectionner quoi que ce soit dans le navigateur.

Par conséquent, nous utilisons querySelector.

Concepts clés en JavaScript.

a) Levage : Utilisons un exemple pour illustrer ce point,

Par exemple :

1. console.log(a);
2. var a;
3. a=5;
4. console.log(a);

Lorsqu'il est exécuté dans la console, un en ligne 1 sera affiché comme non défini.

Cela signifie que même si nous n'avons pas déclaré explicitement un a au début, il a été déclaré "magiquement" dans le navigateur, ce qui s'appelle le levage.

Normalement, pour la ligne 4, la sortie serait 5 car a a été explicitement initialisé.

b) Fermeture : Une fermeture est créée à chaque fois qu'une fonction est créée.

c) Contexte d'exécution global  : Le contexte d'exécution global est l'environnement dans lequel le code JavaScript s'exécute lorsqu'il n'est dans aucune fonction.

d) Call Stack : Lorsqu'un script appelle une fonction, l'interpréteur l'ajoute à la pile et commence à exécuter la fonction.

Mon lien GitHub LinkedIn

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!