Introduction détaillée aux connaissances DOM

DOM

Nous savons que JavaScript est composé de ECMAScript + DOM + BOM. ECMAScript est une syntaxe dans JS, et BOM est principalement un ensemble de connaissances connexes sur l'objet navigateur (fenêtre). Le DOM est un ensemble de connaissances liées aux objets document.

Nous savons que l'interaction entre HTML et JS se réalise via des événements. Le DOM est une API pour les documents HTML (XML). Par conséquent, si nous voulons interagir avec l'utilisateur, nous devons utiliser l'API fournie par le DOM pour obtenir l'élément HTML, puis lier l'événement correspondant à l'élément pour interagir avec l'utilisateur. Par conséquent, comprendre et maîtriser le DOM est très important.

Cet article est principalement basé sur les chapitres relatifs au DOM dans "JavaScript Advanced Programming (3)" pour trier les principales connaissances du DOM et intercaler une partie de ma compréhension personnelle.

Niveau nœud

Tous ceux qui ont écrit du code HTML doivent savoir que nous devons ajouter une indentation à chaque élément, puis écrire les balises et le contenu HTML pertinents, et enfin l'afficher sur la page Web. Ce code et ce contenu HTML imbriqués constituent donc la hiérarchie des nœuds.

Tous ceux qui comprennent ECMAScript doivent savoir que chaque objet dans JS est créé sur la base d'un type de référence, et que le type de référence peut être le type de référence fourni nativement par JS (Array, Function, RegExp, Object etc.), ou il peut s'agir d'un type de référence personnalisé (appelez le type de référence via le nouveau mot-clé (il peut également être appelé constructeur)). Tous les objets sont des objets d'instance d'Object et peuvent hériter des propriétés et méthodes sur Object.prototype

Et dans le DOM, il existe également un mécanisme similaire. Dans le DOM, le type de niveau supérieur est Type de nœud , et tous les autres nœuds peuvent hériter des propriétés et des méthodes sous le type Node. Le type Node est en fait équivalent au constructeur Object dans JS.

Dans ce cas, examinons les propriétés et les méthodes sous le type de nœud

Type de nœud

• Attributs (dans un certains nœuds spécifiques appellent les propriétés suivantes par héritage) >nodeValue

• ············

• childNodes (pointeur, pointant vers la NodeList objet)

• parentNodes

• nextSibling

• previousSibling

• firstChild

• lastChild

• ownDocument (chaque nœud ne peut appartenir qu'à un seul nœud Document)

• Méthode (appeler la méthode suivante par héritage sur un nœud spécifique)
• ··· Rechercher un nœud·· ·

La méthode pour rechercher des éléments se trouve dans le type Document

• ················ ·······

• ··· Insérer un nœud···

• appendChild(ele)

• insertBefore(ele, target)

• ·······················

• ··· Supprimer le nœud···

• removeChild(ele)

• ·· ··· ················

• ··· Remplacer le nœud···

• replaceChild(ele, cible)

• ······················

• ··· Copier le nœud···

• cloneNode(boolean) true : signifie une copie approfondie, false : signifie une copie superficielle

• ······················

• ··· Traitement des nœuds de documents·· · Rarement utilisé ~

• normalize()

• Il n'y a qu'un nombre limité de propriétés et de méthodes sur le type Node Encore une fois, toutes. d'entre eux D'autres nœuds peuvent hériter des propriétés et des méthodes du type Node

Type de document

• JS représente les documents via le type Document. L'objet document est une instance de HTMLDocument et représente la page HTML entière. Dans le même temps, l'objet document est également une propriété sous l'objet window, il est donc accessible en tant qu'objet global.

• Attributs

document.documentElement (représentant des éléments HTML), et l'élément HTML peut être obtenu via document.childNodes[1 ]

document.body (indiquant l'élément de corps)

• document.head (indiquant l'élément de tête)

• document.compatMode (indique la méthode de rendu utilisée par le navigateur, 'CSS1Compat' signifie mode standard, 'BackCompat' signifie mode mixte)

• document.charset (indique la méthode de rendu réelle utilisé dans le jeu de caractères du document, peut également être utilisé pour spécifier un nouveau jeu de caractères)

• document.dataset (indique l'accès aux propriétés personnalisées via un ensemble de données, tel que document.dataset.myname)

• document.docType (représente l'élément), il y a des problèmes de compatibilité avec le navigateur

• document.title (représente l'élément < title >)

• ··· Demande de page Web···

• document.URL (obtenir l'adresse URL)

• document.domain (obtenir l'URL du nom de domaine dans , chemin)

• document.attributes (récupère les attributs d'un nœud et renvoie un objet NamedNodeMap, similaire à NodeList)

• méthode

• ··· Rechercher l'élément···

• document.getElementById(id) Renvoie l'élément

• document.getElementsByTagName(classname) renvoie un objet HTMLCollection contenant zéro ou plusieurs éléments, similaire à un objet NodeList

• document.getElementsByName(ele) renvoie un élément avec un attribut de nom donné, Renvoie également l'objet HTMLCollection

• document.getElementsByClassName(className) renvoie tous les objets NodeList correspondants (Cette méthode peut être appelée sur le type de document et le type d'élément)

• le sélecteur document.querySelector(selector) signifie que le sélecteur CSS renvoie le premier élément qui correspond au modèle. S'il n'est pas trouvé, renvoie null (Type de document, type DocumentFragment, type d'élément sont tous vous. peut appeler cette méthode )

• le sélecteur document.querySelectorAll(selector) indique que le sélecteur CSS renvoie un objet NodeList correspondant avec succès (Type de document, type DocumentFragment, type d'élément Cette méthode peut être appelée )

• ··· Créer des éléments···

• document.createElement() (créé L'élément est dans un état libre et doit être inséré via appendChild)

• ··· Créer un nœud de texte···

• document.createTextNode( ) (Les éléments Create Good sont dans un état libre et doivent être insérés via appendChild)

• ··· Déterminer la taille de l'élément···

• document.getBoundingClientRect()

Type d'élément

• Attributs

• id

• titre

• lang

• className

• Méthode

• getAttribute(ele) Obtenir un attribut

• setAttribute(name, value) Définir un l'attribut

• removeAttribute(ele) supprime un attribut

• getElementsByTagName(ele) récupère l'élément avec le nom de balise ele

Type de texte

• Attributs

• données nodeValue (accéder au texte dans le nœud Texte )

Type DocumentFragment

Objectif : fonctionnement hors ligne des éléments DOM pour éviter un réarrangement et un redessin massif des nœuds DOM, provoquant des problèmes de performances

• Méthode

• document.createDocumentFragment() (indique la création d'un fragment de document)

NodeList object

Comprendre NodeList et ses "proches parents" NamedNodeMap et HTMLCollection est la clé d'une compréhension approfondie du DOM dans son ensemble. Les trois collections sont « dynamiques », c'est-à-dire qu'elles sont mises à jour à chaque fois que la structure du document change. Par conséquent, ils détiennent toujours les informations les plus récentes et les plus précises. Essentiellement, tous les objets NodeList sont des requêtes qui s'exécutent en temps réel lors de l'accès au document DOM.

Taille de l'élément

Dimension de décalage

Pour connaître le décalage d'un élément sur la page, comparez les offsetLeft et offsetTop de l'élément avec son offsetParent En ajoutant les mêmes attributs et en bouclant comme ceci jusqu'à l'élément racine, une valeur fondamentalement précise peut être obtenue. Les deux fonctions suivantes peuvent être utilisées pour obtenir respectivement les décalages gauche et supérieur de l'élément.

function getElementLeft(element){
 var actualLeft = element.offsetLeft;
 var current = element.offsetParent;
 while (current !== null){
 actualLeft += current.offsetLeft;
 current = current.offsetParent;
 }
 return actualLeft;
}

function getElementTop(element){
 var actualTop = element.offsetTop;
 var current = element.offsetParent;
 while (current !== null){
 actualTop += current. offsetTop;
 current = current.offsetParent;
 }
 return actualTop;
}

Dimension client (dimension client)

Pour déterminer la taille de la fenêtre d'affichage du navigateur, vous pouvez utiliser clientWidth et document.documentElement ou document.body (dans les versions antérieures à IE7) clientHeight.

function getViewport(){
 if (document.compatMode == "BackCompat"){
 return {
 width: document.body.clientWidth,
 height: document.body.clientHeight
 };
 } else {
 return {
 width: document.documentElement.clientWidth,
 height: document.documentElement.clientHeight
 };
 }
}

Dimension de défilement (dimension de défilement)

···················

Déterminer la méthode element size

document.getBoundingClientRect() renvoie un objet rectangulaire. Contient 4 attributs : gauche, haut, droite et bas. Ces propriétés donnent la position de l'élément sur la page par rapport à la fenêtre.

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!