Introduction détaillée au DOM, aux nœuds, aux attributs et aux méthodes de recherche de nœuds

Ce qui suit est une introduction au DOM, ainsi qu'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.

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

DOM définit des méthodes de représentation et de modification des documents, la feuille de style CSS ne peut pas être modifiée. Utiliser la méthode DOM dans js pour modifier le style CSS de l'élément revient essentiellement à ajouter un style interligne à 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 ——>

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 distinguent pas la taille de l'identifiant value Écrivez et faites correspondre la valeur de l'attribut name 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 1Nœ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

Nombre de nœuds traversés :

parentNode est le nœud parent du nœud enfant, et 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 nœud enfants, les autres sont IE9 et les suivants sont incompatibles ) nœud d'élément parent de l'élément parentElement, 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 premier élément enfant nœud

lastElementChild dernier élément enfant nœud

nextElementSibling, previousElemnetSibling

quatre nœuds Attributs :

nodeName À l'exception des nœuds d'éléments, les résultats renvoyés ont un « # » devant eux, 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.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

js

Implémentation du transfert mutuel de code Json entre le front et le backend

Service $http Explication détaillée du passage de la méthode Post
js

sur le cas des paramètres

Quelles sont les erreurs courantes commises par les utilisateurs novices de JS

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!