15 méthodes JavaScript pour la manipulation DOM pour les développeurs Web

var ele = document.querySelector (sélecteur);

est sélectionné avec le querySelector () méthode et sa couleur est changée en rouge.

 
paragraphe un
 
paragraphe deux
 
div un
 
paragraphe trois
 
div deux
 

 var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'red'; 

Démo interactive

Testez le querySelector () méthode dans la démo interactive suivante. Il suffit de taper un sélecteur correspondant à ceux que vous pouvez trouver à l'intérieur des cases bleues (par exemple. #Trois) et cliquez sur le bouton Sélectionner. Notez que si vous tapez .bloc, seulement sa première instance sera sélectionné.

2. querySelectorAll ()

contrairement à querySelector () qui renvoie uniquement la première instance de tous les éléments correspondants, querySelectorAll () retourne tous les éléments qui correspondent au sélecteur CSS spécifié.

Les éléments correspondants sont renvoyés sous forme de NodeList objet qui sera un objet vide si aucun élément correspondant n'est trouvé.

Syntaxe

var eles = document.querySelectorAll (sélecteur);

• Eles - UNE NodeList objet avec tous les éléments correspondants comme valeurs de propriété. L'objet est vide si aucune correspondance n'est trouvée.
• sélecteur - un ou plusieurs sélecteurs CSS, tels que "#fooId", ".fooClassName", ".class1.class2", ou ".class1, .class2"

Exemple de code

L'exemple ci-dessous utilise le même code HTML que le précédent. Cependant, dans cet exemple, tous les paragraphes sont sélectionnés avec querySelectorAll (), et sont colorés en bleu.

 
paragraphe un
 
paragraphe deux
 
div un
 
paragraphe trois
 
div deux
 

 var paragraphes = document.querySelectorAll ('p'); pour (var p des paragraphes) p.style.color = 'blue'; 

3. addEventListener ()

Événements faites référence à ce qui arrive à un élément HTML, tel que cliquer, faire la mise au point ou charger, auquel nous pouvons réagir avec JavaScript. Nous pouvons assigner des fonctions JS à écoute pour ces événements dans les éléments et faire quelque chose lorsque l'événement s'est produit.

Il y a trois façons de assigner une fonction à un certain événement.

Si foo () est une fonction personnalisée, vous pouvez l'enregistrer en tant qu'écouteur d'événements de clic (appelez-le lorsque vous cliquez sur l'élément bouton) de trois manières:

1.  Alerte

2.  var btn = document.querySelector ('bouton'); btn.onclick = foo;

3.  var btn = document.querySelector ('bouton'); btn.addEventListener ('click', foo);

La méthode addEventListener () (la troisième solution) a quelques pros; Il s'agit de la norme la plus récente - permettant l'affectation de plusieurs fonctions en tant qu'écouteurs d'événement à un événement - et propose un ensemble utile d'options..

Syntaxe

ele.addEventListener (evt, auditeur, [options]);

• ele - L'élément HTML que l'écouteur d'événements écoutera.
• evt - L'événement ciblé.
• auditeur - En règle générale, une fonction JavaScript.
• options - (optionnel) Un objet avec un ensemble de propriétés booléennes (listées ci-dessous).

Les options	Que se passe-t-il quand il est réglé sur vrai?
Capturer	Arrête la propagation des événements, c’est-à-dire empêche l’appel d’écouteurs d’événements pour le même type d’événement dans les ancêtres de l’élément. Pour utiliser cette fonctionnalité, vous pouvez utiliser 2 syntaxes: ele.addEventListener (evt, auditeur, true) ele.addEventListener (evt, auditeur, capture: true);
une fois que	Listener n'est appelé que la première fois que l'événement se produit, puis il est automatiquement détaché de l'événement et ne sera plus déclenché par celui-ci..
passif	L'action par défaut de l'événement ne peut pas être arrêtée avec la méthode preventDefault ().

Exemple de code

Dans cet exemple, nous ajoutons un écouteur d’événement click appelé foo, au Balise HTML.

Cliquez moi

 var btn = document.querySelector ('bouton'); btn.addEventListener ('click', foo); fonction foo () alert ('hello'); 

Démo interactive

Attribuer le foo () fonction personnalisée en tant qu’écouteur d’événements pour l’un des trois événements suivants: contribution, Cliquez sur ou passer la souris & déclencher l'événement choisi dans le champ de saisie inférieur en le survolant, en cliquant ou en le saisissant.

4. removeEventListener ()

le removeEventListener () méthode détache un écouteur d'événement précédemment ajouté avec le addEventListener () méthode de l'événement, il écoute.

Syntaxe

ele.removeEventListener (evt, auditeur, [options]);

Utilise la même syntaxe que celle susmentionnée addEventListener () méthode (sauf pour le une fois que option qui est exclue). Les options sont utilisées pour être très spécifiques sur l'identification de l'auditeur à déconnecter.

Exemple de code

En suivant l'exemple de code que nous avons utilisé à addEventListener (), Ici, nous supprimons l'écouteur d'événements de clic appelé foo du élément.

 btn.removeEventListener ('click', foo);

5. createElement ()

le createElement () méthode crée un nouvel élément HTML en utilisant le nom de la balise HTML être créé, tel que 'p' ou 'div'.

Vous pouvez ensuite ajouter cet élément à la page Web en utilisant différents méthodes d'insertion DOM, tel que AppendChild () (voir plus tard dans ce post).

Syntaxe

document.createElement (tagName);

• tagName - Le nom de la balise HTML que vous souhaitez créer.

Exemple de code

Avec l'exemple suivant, vous pouvez créer un nouvel élément de paragraphe:

var pEle = document.createElement ('p')

6. appendChild ()

le appendChild () méthode ajoute un élément en tant que dernier enfant à l'élément HTML qui appelle cette méthode.

L’enfant à insérer peut être soit un élément nouvellement créé, ou un déjà existant. Dans ce dernier cas, il passera de sa position précédente à la position du dernier enfant.

Syntaxe

ele.appendChild (childEle)

• ele - L'élément HTML auquel enfant est ajouté comme dernier enfant.
• enfant - L'élément HTML ajouté en tant que dernier enfant de ele.

Exemple de code

Dans cet exemple, nous insérons un l'élément est comme l'enfant d'un

élément utilisant le appendChild () et le susdit createElement () les méthodes.

 var div = document.querySelector ('div'); var strong = document.createElement ('strong'); strong.textContent = 'Bonjour'; div.appendChild (fort);

Démo interactive

Dans la démo interactive suivante, des lettres de #une à #r sont les éléments enfants du # parent-one, # parent-deux, et # parent-trois sélecteurs d'identifiant.

Découvrez comment le appendChild () méthode fonctionne par en tapant un nom de sélecteur parent et un nom enfant dans les champs de saisie ci-dessous. Vous pouvez aussi choisir des enfants appartenant à un autre parent.

7. removeChild ()

le removeChild () méthode supprime un élément enfant spécifié à partir de l'élément HTML qui appelle cette méthode.

Syntaxe

ele.removeChild (childEle)

• ele - L'élément parent de enfant.
• enfant - L'élément enfant de ele.

Exemple de code

Dans cet exemple, nous supprimons le élément nous avons ajouté comme un enfant à la

balise à l'exemple de code pour la précédente appendChild () méthode.

div.removeChild (fort);

8. replaceChild ()

le replaceChild () méthode remplace un élément enfant par un autre appartenant à l'élément parent qui appelle cette méthode.

Syntaxe

ele.replaceChild (newChildEle, oldChileEle)

• ele - Elément parent dont les enfants doivent être remplacés.
• nouveauChildEle - Élément enfant de ele qui remplacera oldChildEle.
• oldChildEle - Élément enfant de ele, qui sera remplacé par nouveauChildEle.

Exemple de code

Dans cet exemple, l'élément enfant appartenant à la

L'élément parent est remplacé par un élément nouvellement créé. étiquette.

 
 Bonjour 

 var em = document.createElement ('em'); var strong = document.querySelector ('strong'); var div = document.querySelector ('div'); em.textContent = 'hi'; div.replaceChild (em, fort);

9. cloneNode ()

Lorsque vous devez créer un nouvel élément qui doit être le identique à un élément déjà existant sur la page Web, vous pouvez simplement créer une copie de l'élément déjà existant en utilisant le cloneNode () méthode.

Syntaxe

var dupeEle = ele.cloneNode ([deep])

• dupeEle - Copie de la ele élément.
• ele - L'élément HTML à copier.
• Profond - (facultatif) Une valeur booléenne. Si c'est réglé sur vrai, dupeEle aura tous les éléments enfants ele a, s'il est réglé sur faux il sera cloné sans ses enfants.

Exemple de code

Dans cet exemple, nous créons une copie pour le élément avec cloneNode (), alors on l'ajoute au

tag comme élément enfant avec le susdit appendChild () méthode.

Par conséquent,

contiendra deux éléments, à la fois avec le Bonjour chaîne en tant que contenu.

 
 Bonjour 

 var strong = document.querySelector ('strong'); var copy = strong.cloneNode (true); var div = document.querySelector ('div'); div.appendChild (copie); 

dix. insertBefore ()

le insertBefore () méthode ajoute un élément enfant spécifié avant un autre élément enfant. La méthode est appelée par l'élément parent.

Si l'élément enfant référencé n'existe pas ou si vous passez explicitement nul à sa place, l'élément enfant à insérer est ajouté en tant que dernier enfant du parent (semblable à appendChild ()).

Syntaxe

ele.insertBefore (newEle, refEle);

• ele - Élément parent.
• newEle - Nouvel élément HTML à insérer.
• réfEle - Un élément enfant de ele devant lequel newEle sera inséré.

Exemple de code

Dans cet exemple, nous créons un nouveau élément avec du texte à l'intérieur, et l'ajouter avant la élément à l'intérieur du

élément parent.

 
 Bonjour 

 var em = document.createElement ('em'); var strong = document.querySelector ('strong'); var div = document.querySelector ('div'); em.textContent = 'hi'; div.insertBefore (em, fort); 

Démo interactive

Cette démo interactive fonctionne de la même manière que notre précédente démo du groupe appendChild () méthode. Ici, il vous suffit de taper les sélecteurs id de deux éléments enfants (de #une à #r) dans les zones de saisie et vous pouvez voir comment insertBefore () méthode déplace le premier enfant spécifié avant la deuxième.

11. createDocumentFragment ()

le createDocumentFragment () Cette méthode peut ne pas être aussi connue que les autres de cette liste, mais elle est néanmoins importante, surtout si vous voulez insérer plusieurs éléments en vrac, comme l'ajout de plusieurs lignes à une table.

Il crée un DocumentFragment objet, qui est essentiellement un nœud DOM qui ne fait pas partie de l'arborescence DOM. C'est comme un tampon où nous pouvons d'abord ajouter et stocker d'autres éléments (par exemple plusieurs lignes) avant de les ajouter au noeud souhaité dans l'arborescence DOM (par exemple dans une table)..

Pourquoi ne pas simplement ajouter des éléments directement à l'arborescence DOM? Parce que l'insertion DOM provoque des changements de mise en page, et c'est un processus de navigateur coûteux étant donné que plusieurs insertions conséquentes d’éléments entraîneront davantage de modifications de la présentation.

D'autre part, l'ajout d'éléments à un DocumentFragment objet ne provoque aucune modification de la mise en page, afin que vous puissiez ajouter autant d'éléments que vous le souhaitez avant de les transmettre à l'arborescence DOM, ce qui ne modifiera la présentation qu'à ce stade.

Syntaxe

document.createDocumentFragment ()

Exemple de code

Dans cet exemple, nous créons plusieurs lignes de tableau et cellules avec le createElement () méthode, puis ajoutez-les à un DocumentFragment objet, enfin ajouter ce fragment de document à un fichier HTML

en utilisant le appendChild () méthode.

En conséquence, cinq lignes, chacune contenant une cellule avec un nombre compris entre 1 et 5, seront insérées dans le tableau..

 var table = document.querySelector ("table"); var df = document.createDocumentFragment (); pour (var i = 0; i<5; i++)  var td = document.createElement("td"); var tr = document.createElement("tr"); td.textContent = i; tr.appendChild(td) df.appendChild(tr);  table.appendChild(df); 

12. getComputedStyle ()

Parfois tu veux vérifier les valeurs de la propriété CSS d'un élément avant d'apporter des modifications. Vous pouvez utiliser le ele.style propriété de faire la même chose, mais le getComputedStyle () méthode a été faite juste à cet effet, il renvoie les valeurs calculées en lecture seule de toutes les propriétés CSS d'un élément HTML spécifié.

Syntaxe

var style = getComputedStyle (ele, [pseudoEle])

• style - UNE CSSStyleDeclaration objet renvoyé par la méthode. Il contient toutes les propriétés CSS et leurs valeurs du ele élément.
• ele - L'élément HTML dont les valeurs de propriété CSS sont extraites.
• pseudoEle - (facultatif) Une chaîne représentant un pseudo-élément (par exemple, ':après'). Si cela est mentionné, les propriétés CSS du pseudo-élément spécifié associé à ele sera retourné.

Exemple de code

Dans cet exemple, nous obtenons et alertons le calcul largeur valeur d'un

élément en utilisant le getComputedStyle () méthode.

 var style = getComputedStyle (document.querySelector ('div')); alerte (style.width); 

13. setAttribute ()

le setAttribute () méthode soit ajoute un nouvel attribut à un élément HTML, ou met à jour la valeur d'un attribut qui existe déjà.

Syntaxe

ele.setAttribute (nom, valeur);

• ele - L'élément HTML auquel un attribut est ajouté ou dont l'attribut est mis à jour.
• prénom - Le nom de l'attribut.
• valeur - La valeur de l'attribut.

Exemple de code

Dans cet exemple, nous ajoutons le contenteditable attribuer à un

en utilisant le setAttribute () méthode, qui rendra son contenu éditable.

Bonjour

 var div = document.querySelector ('div'); div.setAttribute ('contenteditable', ") 

14. getAttribute ()

le getAttribute () méthode renvoie la valeur d'un attribut spécifié appartenant à un certain élément HTML.

Syntaxe

ele.getAttribute (nom);

• ele - L'élément HTML dont l'attribut est demandé.
• prénom - Le nom de l'attribut.

Exemple de code

Dans cet exemple, nous alertons la valeur de contenteditable attribut appartenant à la

élément à l'aide du getAttribute () méthode.

Bonjour

 var div = document.querySelector ('div'); alert (div.getAttribute ('contenteditable')) 

15. removeAttribute ()

le removeAttribute () méthode supprime un attribut donné d'un élément HTML spécifique.

Syntaxe

ele.removeAttribute (nom);

• ele - L'élément HTML dont l'attribut doit être supprimé.
• prénom - Le nom de l'attribut.

Exemple de code

Dans cet exemple, nous supprimons le contenteditable attribut de la

élément. En conséquence, le

ne sera plus éditable.

Bonjour

 var div = document.querySelector ('div'); div.removeAttribute ('contenteditable'); 

15 leçons L'art de la guerre vous apprend à gagner des batailles de vies

15 bibliothèques Lightbox pour une réactivité mobile

15 idées pour acheter ou construire votre bureau permanent parfait

Article suivant

15 plugins jQuery pour créer des éléments intelligents

Article précédent

15 vidéos de présentation de démarrage inspirantes pour les entrepreneurs