Introduction au DOM et aux nœuds, attributs et nœuds de recherche

Cet article partage principalement avec vous une introduction détaillée au DOM, aux nœuds, aux attributs et aux méthodes de recherche de nœuds. Il a une très bonne valeur de référence. Suivez l'éditeur pour y jeter un œil. J'espère que cela pourra être utile à tout le monde.

Interface de programmation DOM (Document Object Model) pour exploiter les documents

DOM définit des méthodes pour représenter et modifier les documents. Les feuilles de style CSS ne peuvent pas être modifiées. Utilisez les méthodes DOM dans js pour changer le style CSS. elements , ajoutant essentiellement des styles en ligne à l’élément.

L'objet DOM est l'objet hôte, qui est utilisé pour faire fonctionner une collection d'objets fonctionnels HTML et XML. xml——>xhtml——>html4.0——>html5

La différence entre HTML et XML : il n'y a fondamentalement aucune différence sauf que XML peut personnaliser les balises XML est remplacé par JSON.

document, lorsqu'il est écrit seul, il représente le document entier, implicitement écrit une couche au-dessus de la balise html, qui n'est que la balise racine du document.

Remarque : les éléments groupés BOM et DOM ressemblent à des tableaux, pas à des tableaux.

Méthodes pour obtenir des éléments :

getElementById();

Les navigateurs inférieurs à IE8 ne font pas la distinction entre les valeurs d'identification majuscules et minuscules et correspondent à la valeur d'attribut du nom de l'élément. Étant donné que la valeur de l'identifiant sera modifiée en arrière-plan, essayez de ne pas l'utiliser ou de l'utiliser moins.

getElementsByTagName(); nom de la balise, tous les navigateurs prennent en charge

getElementsByClassName(); les navigateurs IE8 et inférieurs ne prennent pas en charge

getElementsByName(); de la balise qui peut soumettre la demande prendra effet (formulaire, élément de formulaire, img, iframe)

document.querySelector(); le sélecteur css, IE7 et inférieur ne sont pas compatibles et ne sont pas en temps réel.

document.querySelectAll();

Type de nœud :

Nœud d'élément 1

Nœud d'attribut 2

Nœud de texte 3 // Le texte, les espaces, les retours chariot, etc. sont tous des nœuds de texte

Nœud de commentaire 8

nœud de document 9

fragment de document 11

parcours Nombre de nœuds :

parentNode est le nœud parent du nœud enfant. Le nœud parentNode final est le nœud du document.

childNodes Tous les nœuds enfants du nœud parent, nœuds d'élément, nœuds de commentaire, nœuds de texte

firstChild premier nœud enfant

lastChild dernier nœud enfant

nextSibling nœud frère suivant

previousSibling nœud frère précédent

Nombre de nœuds d'éléments traversés : (sauf les nœuds enfants, les autres sont incompatibles avec IE9 et versions antérieures)

parentElement Le nœud d'élément parent de l'élément. Le nœud d'élément parent final est l'élément HTML et le document est un nœud autonome.

les enfants sont les nœuds enfants de l'élément sous l'élément parent.

node.childElementCount === node.children.length Le nombre de nœuds enfants d'élément du nœud enfant actuel. Utilisez enfants.longueur.

firstElementChild Le nœud enfant du premier élément

lastElementChild Le nœud enfant du dernier élément

nextElementSibling, previousElemnetSibling

Les quatre attributs du nœud :

nodeName En plus des nœuds d'éléments, les résultats renvoyés sont précédés d'un « # », et les nœuds d'éléments renvoient des noms de balises en majuscules, et les types sont en lecture seule.

nodeValue n'est utilisé que pour les nœuds de texte et les nœuds de commentaires, et peut être lu et écrit.

nodeType renvoie un nombre qui représente le type de nœud correspondant.

attributs en lecture seule La collection d'attributs du nœud d'élément.

La méthode node.hasChildNodes() détermine s'il y a des nœuds enfants dans le nœud parent et le résultat renvoyé est une valeur booléenne.

Recommandations associées :

Plusieurs façons de trouver du dom avec jQuery

React exploite le vrai DOM pour obtenir une succion dynamique du fond

Exemple de partage d'exercices sur le sélecteur JQuery et le fonctionnement des nœuds DOM

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!