Résumé des méthodes de fonctionnement du nœud DOM JavaScript

Il existe trois principaux types de nœuds: nœuds d'élément, nœuds d'attribut et nœuds de texte.

L'essentiel à propos de DOM est d'ajouter, de supprimer, de modifier et de vérifier les nœuds d'élément et d'attribuer les nœuds. Les éléments suivants introduiront les opérations sur les nœuds d'élément et les opérations sur les nœuds d'attribut respectivement.

Nœud d'élément

vérifier

Avant d'ajouter, de supprimer et de modifier le DOM, vous devez d'abord trouver l'élément correspondant. Les méthodes de recherche spécifiques sont les suivantes:

 getElementById () // Obtenez un seul nœud GetElementsByTagName () // Obtenez le tableau de nœud nodelist getElementsByName () // Obtenez le tableau de nœud nodelist

En même temps, vous pouvez également utiliser les attributs du nœud d'élément pour obtenir ses nœuds parent et enfants et nœuds de texte:

Nœuds d'enfants

 Node.ChildNodes // Obtenez la liste des nœuds enfants NodeList; Notez que les ruptures de ligne sont comptées comme des nœuds de texte dans le navigateur. Si vous obtenez la liste des nœuds de cette manière, le filtrage est requis Node.FirstChild // Renvoie le premier nœud enfant Node.LastChild // Renvoie le dernier nœud enfant

Nœud parent

 Node.parentNode // Renvoie le nœud parent Node.OwnerDocument // Renvoie le nœud d'ancêtre (l'ensemble du document)

Nœuds compatriotes

 Node.PreviousSibling // Renvoie le nœud précédent, sinon, return nullnode.nextsibling // renvoie le nœud suivant

augmenter

Pour ajouter un nouveau nœud, vous devez d'abord créer un nœud, puis insérer le nœud nouvellement créé dans le DOM. Par conséquent, ce qui suit est les méthodes de création de nœuds et d'insertion des nœuds, et la méthode de réplication des nœuds est également introduite dans la création de nœuds.

Créer un nœud

 createElement () // Créer un nouveau nœud d'élément en fonction du nom de balise spécifié

Créer des extraits de code (pour éviter un rafraîchissement fréquent du DOM, vous pouvez d'abord créer des extraits de code, puis les ajouter au DOM après avoir terminé toutes les opérations de nœud)

 CreatedocumentFragment ()

Nœud de réplication

 clonEdNode = node.clonenode (booléen) // Il n'y a qu'un seul paramètre, passe dans une valeur booléenne, vrai signifie copier tous les nœuds enfants sous le nœud; faux signifie copier uniquement le nœud

Insérer le nœud

 / * Insérer le nœud * / parentNode.appendChild (childNode); // Ajouter un nouveau nœud à la fin de la liste des nœuds enfants parentNode.insertBefore (newNode, TargetNode); // insérer newNode dans TargetNode / * insérer le code html * / node.insertadjacenthtml ('avantbegin', html); // insérer le code node.insertAdjacentHtml ('AftereBegin', html); // insérer le code node.insertAdjacentHtml ('AftereBegin', html); // Insérez le code node.insertAdjacentHtml ('AVANTEND', html); // insérer le code après le dernier élément enfant de l'élément node.insertAdjacentHtml ('Afterend', html); // insérer le code après l'élément

Remplacer les nœuds

 parentNode.replace (newNode, TargetNode); // remplacer TargetNode par NewNode

supprimer

Supprimer les nœuds

 parentNode.RemoveChild (childNode); // Retirez le nœud cible Node.parentNode.RemoveChild (nœud); // utilise sans connaître le nœud parent

Nœud d'attribut

Les nœuds d'attribut de fonctionnement sont à ajouter, supprimer, modifier et vérifier les styles DOM. Il existe différentes méthodes de fonctionnement pour les styles en ligne, les styles en ligne et les styles externes; Les styles obtenus par diverses méthodes sont également divisés en lisibles, écrivables et en lecture seule.

Obtenez les styles CSS directement

 node.style.color // lisible ou écrivain

Les propriétés et les méthodes de style elle-même

 Node.style.csstext // Obtenez la chaîne de style en ligne de nœud node.style.length // Obtenez le nombre de styles en ligne Node.style.item (0) // Obtenez le style en position spécifiée

Obtenez et modifiez les styles d'élément

HTML5 fournit un nouvel attribut pour les éléments: Classlist pour implémenter l'ajout, la suppression, la modification et la recherche des feuilles de style élément. L'opération est la suivante:

 node.classList.add (valeur); // Ajouter la classe spécifiée node.classList.Contains (valeur); // Déterminez si l'élément contient la classe spécifiée. S'il y a un truenode.classList.Remove (valeur); // supprime la classe spécifiée node.classList.toggle (valeur); // Supprimer s'il y a une certaine classe, et ajoutez la classe spécifiée s'il n'y en a pas.

Méthodes pour modifier les caractéristiques DOM

 Node.getAttribute ('id') // get node.setAttribute ('id') // définir node.removeaTtribute () // supprimer node.attributes // obtenez toutes les fonctionnalités DOM

Méthode en lecture seule

GetCompuledStyle est la méthode de la fenêtre. Il peut obtenir toutes les valeurs d'attribut CSS utilisées par les fins de l'élément actuel, mais sont en lecture seule. Il a deux paramètres, le premier est le nœud entrant, le second peut passer: Hover ,: Blur, etc. Pour obtenir son style de pseudo-classe, et sinon, Null sera transmis.

Cependant, IE ne prend pas en charge la méthode GetCompuledStyle, et CurrentStyle peut être utilisé pour maintenir la compatibilité:

 window.getcomputedStyle? window.getCompuledStyle (nœud, null): node.currentStyle

Le résumé ci-dessus des méthodes de fonctionnement du nœud DOM JavaScript est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.