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émentRemplacer 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 DOMMé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.