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.
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
Attributs (dans un certains nœuds spécifiques appellent les propriétés suivantes par héritage) >nodeValue
················ ·······
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
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.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()
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
Attributs
données nodeValue (accéder au texte dans le nœud Texte )
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)
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.
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;
}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
};
}
}···················
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!
Introduction à l'utilisation du serveur FTP
Comment obtenir le numéro d'entrée en Java
Que sont les bases de données non relationnelles ?
Comment référencer CSS en HTML
Comment basculer entre les systèmes doubles Huawei
Utilisation de la commande zip de compression Linux
Les huit fonctions les plus couramment utilisées dans Excel
js obtient l'heure actuelle
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
