Comment utiliser les attributs Dom

Cette fois je vais vous montrer comment utiliser l'attribut Dom et quelles sont les précautions lors de l'utilisation de l'attribut Dom Voici un cas pratique, jetons un coup d'oeil.

1. Les trois noyaux de javascript

1. Norme de grammaire d'ECMAScript js

2.DOM Document Modèle objet Le modèle d'objet de document fournit des méthodes qui permettent à js d'utiliser des balises HTML

　3. Modèle d'objet de navigateur BOM Le modèle d'objet de navigateur fournit des méthodes qui permettent à js d'utiliser des navigateurs

Remarque : 1. Le plus gros patron de js est window, le document est juste un objet sous window

1. document.documentElement peut être obtenu à partir de html

                document(在文档里，document是老大)
                       |
                      html
                      /  \
                     /    \
                    /      \
                   body    head
                   /       / | \
                  /       /  |  \
                 /       /   |   \
               / | \   meta title  style...
              /  |  \
             /   |   \
            p  p   ul...
            /
          /
          a

2. Attributs du DOM

js ---> html

　js exploite les balises html via DOM

1. childNodes renvoie tous les objets nœuds enfants sous l'objet actuel et renverra le nœud de texte

Remarque : sous ie8, seul le nœud d'élément de retour

1. nodeType Renvoie le type de nœud, le nœud d'élément renvoie 1 Le nœud de texte renvoie 3 Commentaire le nœud renvoie 8

2. enfants Renvoie tous les nœuds d'éléments enfants sous l'objet, et il n'y a aucun problème de compatibilité

3. firstChild renvoie le premier nœud enfant, qui se comporte de la même manière que childNodes dans IE8

1. lastChild renvoie le dernier nœud enfant comme ci-dessus

1. firstElementChild renvoie le dernier nœud élément, non compatible avec IE8

1. nextSibling Le nœud frère suivant dans les navigateurs grand public peut obtenir des nœuds autres que les nœuds d'élément Dans IE8, seuls les nœuds d'élément seront renvoyés. Si ce n'est pas le cas, renvoyez null<.>

2. previousSibling Le nœud frère précédent est le même que ci-dessus

3. nextElementSibling S'il n'y a pas de nœud d'élément frère suivant, renvoie null et il n'est pas compatible avec IE678

1. previousElementSibling PreviousElementSibling Idem que ci-dessus

2. parentNode * Renvoie le nœud parent sans compatibilité

3. offsetParent Renvoie le parent de positionnement si aucun des deux n'est trouvé, il reviendra finalement dans le corps. Il n'y a pas de problème de compatibilité

　13.nodeName Renvoie l'étiquette Nom de la balise du constructeur

Lettres majuscules

3. Certaines méthodes du DOM

createElement('p')

Voici la balise

Pour créer un nouveau nœud d'élément, vous devez accepter un paramètre, et le paramètre est l'étiquette qui doit être créée.

CreateTextNode()

Créer un nouveau nœud de texte

createComment()

Créer un nouveau nœud de commentaire

Opération de nœud

　Ajouter un nœud d'élément

　1. Parent.appendChild (nœud enfant)

　Ajoutez le nœud enfant au nœud parent et accédez à tous les nœuds d'éléments enfants du parent

Ajouter un nœud

　2. Parent.insertBefore(nœud enfant, nœud enfant spécifié)

　Ajouter devant le nœud spécifié

Parent.removeChild (nœud ​​qui doit être supprimé)
　1. Cloner le nœud cloneNode

　Cloner le nœud, cloner parent.cloneNode()

La fonction reçoit un paramètre, qui est une valeur booléenne. La valeur par défaut est false, copie superficielle, vrai pour la copie profonde

Copie superficielle : copiez uniquement l'étiquette

Copie approfondie : copiez les informations en ligne de certaines balises liées à cet objet de balise, et les attributs personnalisés dans js ne seront pas copiés.

Voici mes notes sur l'apprentissage du DOM. Si cela peut vous aider, j'en serai très heureux.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

DOM optimisé pour JavaScript

Comment implémenter une liaison de données bidirectionnelle dans l'applet WeChat
Comment utiliser les chaînes JavaScript

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!