Comment calculer la profondeur de l'arbre DOM?

1. Qu'est-ce que DOM (Document Object Model (Document Object Model))

Le standard DOM W3C est divisé en 3 parties différentes:

Modèle standard DOM de base pour tout document structuré
Modèle standard DOM XML pour les documents XML
Modèle HTML DOM-Standard pour les documents HTML

Qu'est-ce que HTML DOM?

Modèle d'objet standard HTML
Interface de programmation standard HTML
Norme W3C

HTML DOM définit les objets et les attributs de tous les éléments HTML, ainsi que les méthodes pour y accéder.

2. Qu'est-ce qu'un nœud DOM

** Selon la norme HTML DOM du W3C, tout le contenu d'un document HTML est un nœud: ** Selon la définition du livre rouge: DOM peut décrire tout document HTML ou XML comme une structure composée de plusieurs couches de nœuds.

Le document entier est un nœud de document
Chaque élément HTML est un nœud d'élément
Le texte à l'intérieur de l'élément HTML est un nœud de texte
Chaque attribut HTML est un nœud d'attribut
Le commentaire est un nœud de commentaire

Voici l'arborescence des nœuds HTML DOM:
Insérez la description de l'image ici

3. Types de nœuds DOM courants

Type de nœud
- Chaque nœud a un attribut nodeType, utilisé pour indiquer le type de nœud
- Vous pouvez utiliser les deux attributs nodeName et nodeValue pour comprendre les informations spécifiques du nœud
- Chaque nœud a un attribut childNodes, qui contient un objet NodeList. NodeList est un objet de type tableau utilisé pour stocker un ensemble de nœuds ordonnés
- Chaque nœud a un attribut parentNode
- Méthodes couramment utilisées pour faire fonctionner les nœuds, appendChild () removeChild () etc.
Le type Document
js représente un document via le type Document; dans le navigateur, l'objet document est une instance de HTMLDocument, représentant la page HTML entière , et l'objet document est un attribut de l'objet window, il est donc accessible en tant qu'objet global.
- Le raccourci pour accéder aux nœuds enfants du nœud Document documentElement: cet attribut pointe toujours vers l'élément dans la page HTML; childNodesaccès à l'élément document via la liste.document.documentElement === document.childNodes[0] // true(两者都指向<html>元素)
- document.body , Pointe vers l'élément
- DOM: applications communes éléments: Trouvez getElementById(),getElementsByTagName()
- Le courant de sortie est écrit dans la page: write(), writeIn()(différence entre les deux est que le premier sera écrit tel quel, ce qui ajoute une extrémité d'alimentation de ligne de la chaîne (\ n-))
Type d'élément
- Le type d'élément est utilisé pour représenter des éléments XML et HTML, donnant accès aux noms de balises d'élément, aux nœuds enfants et aux caractéristiques

var div = document.getElementById("myDiv");
alert(div.id)  //  "myDiv"
div.id = "someOtherId"

Chaque élément a une ou plusieurs caractéristiques . Les principales méthodes DOM pour les caractéristiques de fonctionnement sont les suivantes:getAttribute() setAttribute() removeAttribute()

var div = document.getElementById("myDiv");
alert(div.getAttribute("id"))  //  "myDiv"

Le type d'élément est attributesle seul type de nœud DOM qui utilise des attributs. attributesL'attribut contient un NameNodeMap, qui est similaire à la NodeList. Chaque fonctionnalité de l'élément est représentée par un nœud Attr et chaque nœud est stocké dans le NameNodeMap. L'objet NameNodeMap a quelques méthodes: getNameItem(name)retourne le nœud removeNameItem(name)dont l'attribut nodeName est égal au nom;: supprime le nœud dont l'attribut nodeName est égal au nom de la liste

var id = element.attributes.getNameItem("id").nodeValues;

Vous pouvez créer de nouveaux éléments via la méthode document.createElement ()

Écrivez ici temporairement.

4. Comment calculer la profondeur de l'arborescence DOM

Référence: JS natif recherchant la profondeur maximale de l'arborescence DOM

<html lang="en">
  <body>
    <div>
      <div>
        <p>
          <span><span></span></span>
        </p>
        <p></p>
        <p><span></span></p>
      </div>
    </div>
  </body>
</html>

<script>
   // 求dom树的最大深度
    const getDepth = (node => {
      if (!node.childNodes || node.childNodes.length === 0) {
        return 1;
      }
    const maxChildrenDepth = [...node.childNodes].map(v => getDepth(v));
    return 1 + Math.max(...maxChildrenDepth);
    })
    console.log(getDepth(document.documentElement));
  </script>

Supplément: la différence entre children et childNodes