Résumé des points de connaissances JavaScript : DOM

1. Introduction à DOM

1.1 Qu'est-ce que DOM

Une implémentation complète de JavaScript se compose des 3 parties différentes suivantes :

• Core (ECMAScript) : La partie centrale du langage, qui décrit la syntaxe et les objets de base du langage.

• Modèle objet de document (DOM) : norme d'exploitation de documents de pages Web, décrivant les méthodes et les interfaces de traitement du contenu des pages Web.

• Modèle d'objet de navigateur (BOM) : base des opérations du client et de la fenêtre du navigateur, décrivant les méthodes et les interfaces permettant d'interagir avec le navigateur.

Document Object Model ( Document Object Model，简称DOM ) est une编程接口standard recommandée par l'organisation W3C pour le traitement du langage de balisage extensible (HTML ou XML).
Le W3C a défini une série d'interfaces DOM grâce auxquelles le contenu, la structure et le style des pages Web peuvent être modifiés.

Langue officielle : Document Object Model (DOM) est une interface de programmation standard recommandée par l'organisation W3C pour le traitement des langages de balisage extensibles. Il s'agit d'une interface de programmation d'application (API) indépendante de la plate-forme et du langage qui peut accéder dynamiquement aux programmes et aux scripts et mettre à jour leur contenu, leur structure et le style des documents www (les documents HTML et XML sont définis via des sections de description). Le document peut être traité ultérieurement et les résultats du traitement peuvent être ajoutés à la page actuelle. DOM est un document API arborescent qui nécessite que l'intégralité du document soit représentée en mémoire pendant le traitement. Une autre API simple est SAX basée sur les événements, qui peut être utilisée pour traiter de très gros documents XML. En raison de leur taille, ils ne conviennent pas au traitement de tous les documents en mémoire.

1.2 Arbre DOM

• Document : une page est un document. Le document est utilisé dans le DOM pour représenter
• des éléments : toutes les balises de la page sont des éléments, et l'élément est utilisé dans le DOM pour représenter
• des nœuds : tout le contenu de la page Web est des nœuds (étiquettes, attributs, texte, commentaires, etc.).Utiliser le noeud dans DOM pour représenter

DOM 把以上内容都看做是对象

des éléments2.1Comment

obtenir des éléments de pageDOM

est principalement utilisé pour faire fonctionner les éléments dans notre développement actuel.
Comment obtenir les éléments de la page ? Vous pouvez obtenir les éléments de la page des manières suivantes :

• Obtenir en fonction de l'ID
• Obtenir en fonction du nom de la balise
• Obtenir des éléments spéciaux
• via de nouvelles méthodes en HTML5
• 
  

2.2 Obtenir en fonction de l'ID

Utilisez la méthode getElementById() pour obtenir l'objet élément avec l'ID.

document.getElementById('id');

Utilisez console.dir() pour imprimer l'objet élément que nous avons obtenu et mieux visualiser les propriétés et les méthodes de l'objet.

2.3 Récupération basée sur le nom de balise

Utilisez la méthode getElementsByTagName() pour renvoyer une collection d'objets avec le nom de balise spécifié.

document.getElementsByTagName('tag name');

Remarque :

1. Comme ce que nous obtenons est une collection d'objets, nous devons parcourir si nous voulons faire fonctionner les éléments à l'intérieur.
2. L'obtention de l'objet élément est dynamique

2.4 Obtenir document.getElementsByClassName('class name') via la nouvelle méthode HTML5

; // Renvoie la collection d'objets élément selon le nom de classe document.querySelector('selector'); le sélecteur spécifié Le premier objet élément document.querySelectorAll('selector'); // Renvoie selon le sélecteur spécifié

注意：
Les sélecteurs dans querySelector et querySelectorAll doivent être marqués, par exemple : document.querySelector('#nav');

2.5 Récupérer des éléments spéciaux (body, html)

1. Récupérer l'élément body

doucumnet.body // Renvoie l'objet élément body

2. Récupérer l'élément html

document.documentElement // Renvoie l'objet élément html

3. Bases de l'événement

3.1 Présentation des événements

JavaScript permet nous pour créer des pages dynamiques, et les événements sont des comportements qui peuvent être détectés par JavaScript.
简单理解： 触发--- 响应机制。
Chaque élément de la page Web peut générer certains événements pouvant déclencher JavaScript. Par exemple, nous pouvons générer un événement lorsque l'utilisateur clique sur un bouton, puis effectuer certaines opérations.

3.2 Trois éléments d'événements :

1. source de l'événement (qui)
2. type d'événement (quel événement)
3. gestionnaire d'événement (que faire)

cas :

var btn = document.getElementById('btn');
btn.onclick = fonction() {
 alert('Comment vas-tu'); 
};

3.3 Étapes pour exécuter les événements :

1. obtenir la source de l'événement,
2. enregistrer l'événement (événement de liaison)
3. , ajouter un gestionnaire d'événements (sous forme d'affectation de fonction)

3.3 Événements de souris courants

注：以下图片的事件只是常见的并不代表所有

3.4 Analyser les trois éléments

des événements :
1. Source d'événement (sur quoi voulez-vous opérer)

2. Événement (que voulez-vous faire pour obtenir l'effet d'interaction souhaité)

3. Fonction de traitement (à quoi voulez-vous que la cible ressemble après le déroulement de l'événement)

4 .Élément d'opération

Les opérations JavaScript DOM peuvent modifier le contenu, la structure et le style des pages Web. Nous pouvons utiliser des éléments d'opération DOM pour modifier le contenu, les attributs, etc. Notez que les éléments suivants sont tous des attributs

4.1. Modifiez le contenu de l'élément

element.innerText

de la position de départ à la position de fin, mais cela supprime la balise html. En même temps, les espaces et les sauts de ligne supprimeront également

tout le contenu du début. position à la position finale de

element.innerHTML

4.2 Opérations courantes sur les attributs d'élément

innerText et innerHTML pour modifier le contenu de l'élément
src, href
id, alt, title

4.3 Opérations sur les attributs des éléments de formulaire

Vous pouvez utiliser DOM pour exploiter les attributs des éléments de formulaire suivants :

type, valeur, vérifié, sélectionné, désactivé

4.4 Opérations sur les attributs de style

Nous pouvons modifier la taille, la couleur, la position et d'autres styles d'éléments via JS.

1. element.style Opération de style en ligne
2. element.className Opération de style de nom de classe

注意：
1.JS 里面的样式采取驼峰命名法比如fontSize、 backgroundColor
2.JS 修改style 样式操作，产生的是行内样式，CSS 权重比较高

les éléments opérationnels constituent le contenu principal du DOM.

4.5 Pensée d'exclusion

S'il existe le même groupe d'éléments et que nous voulons qu'un certain élément implémente un certain style, nous devons utiliser l'algorithme exclusif de boucle :

1. effacer les styles de tous les éléments (tuer d'autres personnes)
2. et définir le style de l'élément actuel ( me laissant seul).
3. Notez que l'ordre ne peut pas être inversé, tuez d'abord d'autres personnes, puis définissez-vous.

4.6 Fonctionnement des attributs personnalisés

1. Obtenez la valeur de l'attribut

• element.property Obtenez la valeur de l'attribut.
• element.getAttribute('attribute');

Différence :

• element.attribute obtient la valeur de l'attribut intégré (l'attribut fourni avec l'élément lui-même)
• element.getAttribute('attribute') obtient principalement les attributs personnalisés (standard) personnalisés par nos programmeurs Propriété

2. Définissez la valeur de la propriété

• element.property = 'value' Définissez la valeur de la propriété intégrée.
• element.setAttribute('Attribute', 'Value');

Différence :

• element.Attribute définit la valeur de l'attribut intégré
• element.setAttribute('Attribute'); Définit principalement les attributs personnalisés (standard)

3. Supprimer les attributs

• element.removeAttribute(' Propriétés) ');

4.7 Propriétés personnalisées H5

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

Les attributs personnalisés sont obtenus via getAttribute('attribute').
Cependant, certains attributs personnalisés peuvent facilement provoquer une ambiguïté et il est difficile de déterminer s'il s'agit d'attributs intégrés ou d'attributs personnalisés de l'élément.

H5 nous a ajouté de nouveaux attributs personnalisés :

1. Définir les attributs personnalisés H5

. H5 stipule que le début des données d'attribut personnalisé doit être utilisé comme nom d'attribut et lui attribuer une valeur.

Ou utilisez JS pour définir

element.setAttribute('data-index', 2)

2. Obtenez les attributs personnalisés H5 <br/> Compatibilité Get element.getAttribute('data-index');
H5 a ajouté element.dataset.index ou element.dataset['index'], qui n'est pris en charge que dans IE 11.

5. Les opérations de nœud

utilisent généralement deux méthodes pour obtenir des éléments :
1. Utilisez les méthodes fournies par DOM pour obtenir les éléments

• document.getElementById()
• document.getElementsByTagName()
• document.querySelector, etc.  La logique n'est pas solide et lourde

• Utilisez

la relation hiérarchique des nœuds pour obtenir les éléments.

• -Relation nœud enfant-frère pour obtenir des éléments.
• La logique est forte, mais légèrement moins compatible.

Les deux méthodes peuvent obtenir des nœuds d'éléments, qui seront utilisés plus tard, mais les opérations sur les nœuds sont plus simples.

5.2 Présentation des nœuds

Tout le contenu d'une page Web est un

nœud (étiquette, attribut, texte, commentaire, etc.). Dans le DOM, un nœud Utiliser un nœud pour représenter.
Tous les nœuds de l'arborescence HTML DOM sont accessibles via JavaScript et tous les éléments HTML (nœuds) peuvent être modifiés, créés ou supprimés.

Généralement, les nœuds ont au moins trois attributs de base : nodeType (type de nœud), nodeName (nom du nœud) et nodeValue (valeur du nœud).

• Le nœud d'élément nodeType est 1,
• le nœud d'attribut nodeType est 2
• et le nœud de texte nodeType est 3 (les nœuds de texte incluent le texte, les espaces, les sauts de ligne, etc.)

我们在实际开发中，节点操作主要操作的是元素节点

5.3 Node

Le niveau

utilise l'arborescence DOM pour diviser les nœuds. Pour différentes relations hiérarchiques, la plus courante est父子兄层级关系

1. Nœud parent

node.parentNode

parentNode

peut

• renvoyer le nœud parent d'un certain nœud. Notez qu'il s'agit du nœud parent le plus récent.
• Si le nœud spécifié n'a pas de nœud parent, null sera renvoyé.

childNodes (standard)

parentNode.childNodes renvoie include Une collection de nœuds enfants du nœud spécifié, qui est une collection immédiatement mise à jour.
Remarque : La valeur de retour contient tous les nœuds enfants, y compris les nœuds d'élément, les nœuds de texte, etc.
Si vous souhaitez uniquement insérer les nœuds d'éléments à l'intérieur, vous devez les gérer spécialement. Par conséquent, nous ne préconisons généralement pas l'utilisation de childNodes

var ul = document. querySelector('ul');for(var i = 0; i < ul.childNodes.length;i++) {if (ul.childNodes[i]. Type de nœud == 1 ) {
 // ul.childNodes[i] est le nœud d'élément console.log(ul.childNodes[i]);}}

2. parentNode.children (non standard)

parentNode.children est une propriété en lecture seule qui renvoie tous les nœuds d'élément enfant. Il renvoie uniquement les nœuds d'éléments enfants, et les autres nœuds ne sont pas renvoyés (c'est ce sur quoi nous nous concentrons).
Bien que children ne soit pas un standard, il est pris en charge par divers navigateurs, nous pouvons donc utiliser en toute sécurité

3. parentNode.firstChild

firstChild pour renvoyer le premier nœud enfant, ou null s'il n'est pas trouvé. De même, tous les nœuds sont inclus.

4. parentNode.lastChild

lastChild renvoie le dernier nœud enfant, ou null s'il n'est pas trouvé. De même, il contient également tous les nœuds

5. parentNode.firstElementChild

firstElementChild renvoie le premier nœud d'élément enfant, s'il n'est pas trouvé, renvoie null.

6. parentNode.lastElementChild

lastElementChild renvoie le dernier nœud d'élément enfant, ou null s'il n'est pas trouvé.
注意：这两个方法有兼容性问题，IE9 以上才支持

Dans le développement réel, firstChild et lastChild contiennent d'autres nœuds, ce qui n'est pas pratique à utiliser. Et firstElementChild et lastElementChild ont des problèmes de compatibilité. nœud d'élément ou qu'en est-il du dernier nœud d'élément enfant ?
Solution :

1. Si vous souhaitez le premier nœud d'élément enfant, vous pouvez utiliser parentNode.chilren[0]
2. Si vous souhaitez le dernier nœud d'élément enfant, vous pouvez utiliser

parentNode.chilren[parentNode.chilren.length - 1]

Modèle d'objet de document

récapitulatif

Le modèle objet (DOM en abrégé) est une interface de programmation standard recommandée par l'organisation W3C pour le traitement du langage de balisage extensible (HTML ou XML).

Le W3C a défini une série d'interfaces DOM grâce auxquelles le contenu, la structure et le style des pages Web peuvent être modifiés.

Pour JavaScript, afin de permettre à JavaScript d'exploiter HTML, JavaScript possède son propre ensemble d'interfaces de programmation DOM.

Pour HTML, DOM fait en sorte que HTML forme un arbre DOM.

L'élément DOM qui contient des documents, des éléments et des nœuds est un objet, c'est pourquoi on l'appelle le modèle objet de document

. Concernant les opérations DOM, nous nous concentrons principalement sur le fonctionnement des éléments. Inclut principalement la création, l'ajout, la suppression, la modification, la requête, l'opération d'attribut et l'opération d'événement.