<p>
<p>
Le modèle objet de document (DOM) est une interface qui traite un document HTML ou XML comme une structure arborescente, où each Chaque nœud est un objet du document. DOM fournit également un ensemble de méthodes pour interroger l'arborescence, modifier la structure et le style.
<p>DOM utilise également le terme
élément (Element) qui est très similaire à un nœud. Alors, quelle est la différence entre les nœuds et les éléments DOM ?
1. Les nœuds DOM
<p>La clé pour comprendre la différence entre les nœuds et les éléments est de comprendre ce qu'est un nœud. est.
<p>D'un point de vue de haut niveau, un document DOM se compose d'une hiérarchie de nœuds. Chaque nœud peut avoir des parents et/ou des enfants.
<p>Regardez le document HTML suivant :
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<!-- Page Body -->
<h2>My Page</h2>
<p id="content">Thank you for visiting my web page!</p>
</body>
</html>Copier après la connexion
<p>Le document contient la hiérarchie de nœuds suivante : <p>
<p>
<html> est dans le document arbre d'un nœud. Il possède 2 nœuds enfants :
<head> et
<body>. <p>
<body> est un nœud avec 3 nœuds enfants : nœud de commentaire
<!-- Page Body -->, titre
<h2>, paragraphe
<p>. Le nœud parent du nœud
<body> est le nœud
<html>. <p>Une balise dans un document HTML représente un nœud. Fait intéressant, le texte normal est également un nœud. Le nœud de paragraphe
<p> a 1 nœud enfant : le nœud de texte
“Thank you for visiting my web page!”.
1.2 Types de nœuds
<p>Comment distinguer ces différents types de nœuds ? La réponse réside dans l'interface du DOM Node, en particulier dans l'attribut
Node.nodeType. <p>
Node.nodeType peut avoir l'une des valeurs suivantes représentant le type de nœud :
- Node.ELEMENT_NODE
- Node.ATTRIBUTE_NODE
- Node.TEXT_NODE
- Node.CDATA_SECTION_NODE
- Node.PROCESSING_INSTRUCTION_NODE
- Node.COMMENT_NODE
- Node.DOCUMENT_NODE
- Node.DOCUMENT_TYPE_NODE
La constante - Node.DOCUMENT_FRAGMENT_NODE
- Node.NOTATION_NODE
<p> indique de manière significative le type de nœud : par exemple,
Node.ELEMENT_NODE représente le nœud d'élément,
Node.TEXT_NODE représente le nœud de texte,
Node.DOCUMENT_NODE nœud de document, et ainsi de suite. <p>Par exemple, sélectionnons le nœud de paragraphe et visualisons son attribut
nodeType :
const paragraph = document.querySelector('p');
paragraph.nodeType === Node.ELEMENT_NODE; // => true
Copier après la connexion
<p>Le type de nœud qui représente l'ensemble de l'arborescence du document du nœud est
Node.DOCUMENT_NODE :
document.nodeType === Node.DOCUMENT_NODE; // => true
Copier après la connexion
2. Éléments DOM
<p>Après avoir maîtrisé la connaissance des nœuds DOM, il est maintenant temps de distinguer les nœuds et les éléments DOM. <p>Si vous comprenez la terminologie des nœuds, la réponse est évidente : les éléments sont des nœuds d'un type spécifique
element (Node.ELEMENT_NODE), ainsi que des types comme document, commentaire, texte, etc. <p>En bref, les éléments sont des nœuds écrits à l'aide du balisage dans un document HTML.
<html>,
<head>,
<title>,
<body>,
<h2>,
<p> sont tous des éléments tels qu'ils sont représentés par des balises. <p>Les nœuds de type document, commentaire, texte ne sont pas des éléments car ils ne sont pas écrits à l'aide de balises : <p>
Node est le constructeur du nœud et
HTMLElement est le constructeur de l'élément dans le JS-DOM. Un paragraphe est à la fois un nœud et un élément. C'est une instance à la fois de
Node et de
HTMLElementconst paragraph = document.querySelector('p');
paragraph instanceof Node; // => true
paragraph instanceof HTMLElement; // => true
Copier après la connexion
En termes simples, les éléments sont des sous-types de nœuds, tout comme les chats sont des sous-types d'animaux. <p>
3. Attributs DOM : nœuds et éléments
En plus de distinguer les nœuds et les éléments, il faut également distinguer les attributs DOM qui contiennent uniquement des nœuds ou uniquement éléments. <p>Les propriétés suivantes de type nœud sont évaluées à un nœud ou une collection de nœuds (<p>) :
NodeListnode.parentNode; // Node or null
node.firstChild; // Node or null
node.lastChild; // Node or null
node.childNodes; // NodeList
Copier après la connexion
Cependant, les propriétés suivantes sont des éléments ou des collections d'éléments (<p>) :
HTMLCollectionnode.parentElement; // HTMLElement or null
node.children; // HTMLCollection
Copier après la connexion
Puisque <p> et node.children renvoient une liste d'enfants, pourquoi avez-vous les deux propriétés ? Bonne question !
node.childNodesConsidérez l'élément de paragraphe suivant contenant du texte : <p>
<p>
<b>Thank you</b> for visiting my web page!
</p>
Copier après la connexion
Ouvrez la <p>démo
et regardez les propriétés et
childNodes du nœud de paragraphe :
childrenconst paragraph = document.querySelector('p');
paragraph.childNodes; // NodeList: [HTMLElement, Text]
paragraph.children; // HTMLCollection: [HTMLElement]
Copier après la connexion
La collection <p> contient 2 nœuds :
paragraph.childNodes, et le nœud texte
<b>Thank you</b> !
for visiting my web page!Cependant, la collection <p> ne contient qu'un seul article :
paragraph.children.
<b>Thank you</b>Puisque <p> ne contient que des éléments, le nœud de texte n'est pas inclus ici car son type est texte (
paragraph.children), pas élément (
Node.TEXT_NODE).
Node.ELEMENT_NODE
<p>Ayant à la fois
node.childNodes et
node.children, nous pouvons choisir l'ensemble d'enfants auxquels accéder : tous les nœuds enfants ou uniquement les enfants qui sont des éléments.
4. Résumé
<p> Un document DOM est une collection hiérarchique de nœuds, chaque nœud peut avoir des parents et/ou des enfants. Comprendre la différence entre les nœuds et les éléments DOM est facile si vous comprenez ce que sont les nœuds.
<p>Les nœuds ont des types, et les types d'éléments en font partie. Les éléments sont représentés par des balises dans les documents HTML.
<p>Adresse originale en anglais : https://dmitripautin.com/dom-node-element/
<p>Auteur : Shadeed
<p>Source : dmitripavlutin
<p>Pour plus de connaissances liées à la programmation, veuillez visiter :
Enseignement de la programmation ! !
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
