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

premier paragraphe
deuxième paragraphe
 div un 
paragraphe trois
 div deux 

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

Démo interactive

Testez la méthode querySelector() dans la démo interactive suivante. Tapez simplement un sélecteur correspondant à ceux que vous pouvez trouver dans les cases bleues (par exemple #three ), et cliquez sur le bouton Sélectionner. Notez que si vous tapez .block, seule sa première instance sera sélectionnée.

2. querySelectorAll()

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

Les éléments correspondants sont renvoyés en tant qu'objet NodeList qui sera un objet vide si aucun élément correspondant n'est trouvé.

Syntaxe

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

• eles - Un objet NodeList avec tous les éléments correspondants comme valeurs de propriété. L'objet est vide si aucune correspondance n'est trouvée.
• selector - 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 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.

premier paragraphe
deuxième paragraphe
 div un 
paragraphe trois
 div deux 

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

3. addEventListener()

Les événements se rapportent à ce qui arrive à un élément HTML, tel que cliquer, focaliser ou charger, auquel nous pouvons réagir avec JavaScript. Nous pouvons assigner des fonctions JS pour écouter ces événements dans les éléments et faire quelque chose quand l'événement s'est produit.

Vous pouvez attribuer une fonction à un événement particulier de trois manières différentes .

Si foo() est une fonction personnalisée, vous pouvez l'enregistrer en tant qu'écouteur d'événement click (appelez-le lorsque l'élément button est cliqué) de trois façons:

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 avantages ; c'est la dernière norme - permettant l'assignation de plus d'une fonction en tant qu'écouteurs d'événements à un événement - et est livré avec un ensemble d'options utiles.

Syntaxe

 ele.addEventListener (evt, écouteur, [options]); 

• ele - L'élément HTML que l'écouteur d'événement écoute.
• evt - L'événement ciblé.
• listener - 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).

Exemple de code

Dans cet exemple, nous ajoutons un écouteur d'événement click appelé foo à la balise HTML.

 Cliquez moi 

 var btn = document.querySelector ('bouton'); btn.addEventListener ('click', foo); function foo () {alert ('bonjour'); } 

Démo interactive

Affectez la fonction personnalisée foo() tant qu'écouteur d'événements à l'un des trois événements suivants: input, click ou mouseover et déclenchez l'événement choisi dans le champ de saisie inférieur en passant la souris ou en tapant dessus.

4. removeEventListener()

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

Syntaxe

 ele.removeEventListener (evt, écouteur, [options]); 

Utilise la même syntaxe que la méthode addEventListener() susmentionnée (sauf pour l'option once exclue). Les options sont utilisées pour être très spécifiques sur l'identification de l'écouteur à détacher.

Exemple de code

En suivant l'exemple de code que nous avons utilisé à addEventListener(), nous addEventListener() ici l'écouteur d'événement click appelé foo de l'élément.

 btn.removeEventListener ('click', foo); 

5. createElement()

La méthode createElement() crée un nouvel élément HTML en utilisant le nom de la balise HTML à créer, par exemple 'p' ou 'div' .

Vous pouvez ensuite ajouter cet élément à la page Web en utilisant différentes méthodes d'insertion de DOM, telles que AppendChild() (voir plus loin dans cet article).

Syntaxe

 document.createElement (tagName); 

• tagName - Le nom de la balise HTML que vous voulez 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()

La méthode appendChild() 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éé, soit un élément déjà existant . Dans ce dernier cas, il sera déplacé de sa position précédente à la position du dernier enfant.

Syntaxe

 ele.appendChild (childEle) 

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

Exemple de code

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

élément utilisant appendChild() et les méthodes createElement() susmentionnées.

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

Démo interactive

Dans la démo interactive suivante, les lettres de #a à #r sont les éléments enfants des sélecteurs #parent-one, #parent-two et #parent-three .

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

7. removeChild()

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

Syntaxe

 ele.removeChild (childEle) 

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

Exemple de code

Dans cet exemple, nous supprimons l'élément que nous avons ajouté en tant qu'enfant à

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

 div.removeChild (fort); 

8. replaceChild()

La méthode replaceChild() remplace un élément enfant par un autre élément 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.
• newChildEle - Elément enfant de ele qui remplacera oldChildEle .
• oldChildEle - Elément enfant de ele, qui sera remplacé par newChildEle .

Exemple de code

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

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

 Bonjour 

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

9. cloneNode()

Lorsque vous devez créer un nouvel élément qui doit être 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 à l'aide de la méthode cloneNode() .

Syntaxe

var dupeEle = ele.cloneNode([deep])

• dupeEle - Copie de l'élément ele .
• ele - L'élément HTML à copier.
• deep - (optionnel) Une valeur booléenne. Si elle est définie sur true, dupeEle aura tous les éléments enfants ele, si elle est définie sur false elle sera clonée sans ses enfants.

Exemple de code

Dans cet exemple, nous créons une copie pour l'élément avec cloneNode(), puis nous l'ajoutons au

tag en tant qu'élément enfant avec la méthode appendChild() précitée.

Par conséquent,

contiendra deux éléments, les deux avec la chaîne hello comme contenu.

 Bonjour 

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

10. insertBefore()

La méthode insertBefore() 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 que vous passez explicitement la valeur null à sa place, l'élément enfant à insérer est ajouté en tant que dernier enfant du parent (similaire à appendChild() ).

Syntaxe

 ele.insertBefore (newEle, refEle); 

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

Exemple de code

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

élément parent.

 Bonjour 

 var em = document.createElement ('em'); var strong = document.querySelector ('fort'); var div = document.querySelector ('div'); em.textContent = 'salut'; 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 appartenant à la méthode appendChild() . Ici, vous n'avez qu'à taper les sélecteurs d'identifiant de deux éléments enfants (de #a à #r ) dans les zones de saisie, et vous pouvez voir comment la méthode insertBefore() déplace le premier enfant spécifié avant le second.

11. createDocumentFragment()

La createDocumentFragment() n'est peut-être pas aussi connue que les autres dans cette liste, mais elle est importante, surtout si vous voulez insérer plusieurs éléments en masse, comme ajouter plusieurs lignes à une table.

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

Pourquoi ne pas simplement ajouter des éléments directement dans l'arbre DOM? Parce que l'insertion DOM provoque des changements de mise en page, et c'est un processus de navigateur coûteux car plusieurs insertions d'éléments conséquents entraîneront plus de changements de mise en page.

D'un autre côté, l'ajout d'éléments à un objet DocumentFragment n'entraîne aucune modification de disposition . Vous pouvez donc lui ajouter autant d'éléments que vous le souhaitez avant de les transmettre à l'arborescence DOM, ce qui ne provoque un changement de disposition qu'à ce stade.

Syntaxe

 document.createDocumentFragment () 

Exemple de code

Dans cet exemple, nous créons plusieurs lignes et cellules de table avec la méthode createElement(), puis les ajoutons à un objet DocumentFragment, pour enfin ajouter ce fragment de document à un HTML

en utilisant la méthode appendChild() .

Par conséquent, cinq lignes - chacune contenant une cellule avec un nombre compris entre 1 et 5 comme contenu - seront insérées à l'intérieur de la table.

 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, vous voulez vérifier les valeurs de propriété CSS d'un élément avant d'apporter des modifications. Vous pouvez utiliser la propriété ele.style pour faire la même chose, mais la méthode getComputedStyle() a été faite juste à cet effet, elle 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 - Objet CSSStyleDeclaration renvoyé par la méthode. Il contient toutes les propriétés CSS et leurs valeurs de l'élément ele .
• ele - Elément HTML dont les valeurs de propriété CSS sont extraites.
• pseudoEle - (optionnel) Une chaîne qui représente un pseudo-élément (par exemple, ':after' ). Si cela est mentionné, les propriétés CSS du pseudo-élément spécifié associé à ele seront renvoyées.

Exemple de code

Dans cet exemple, nous obtenons et alertons la valeur de width calculée d'un

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

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

13. setAttribute()

La méthode setAttribute() ajoute un nouvel attribut à un élément HTML ou met à jour la valeur d'un attribut déjà existant.

Syntaxe

 ele.setAttribute (nom, valeur); 

• ele - Elément HTML auquel un attribut est ajouté ou de quel attribut est mis à jour.
• name - Le nom de l'attribut.
• value - La valeur de l'attribut.

Exemple de code

Dans cet exemple, nous ajoutons l'attribut contenteditable à un

en utilisant la méthode setAttribute(), qui rendra son contenu modifiable.

 Bonjour 

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

14. getAttribute()

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

Syntaxe

 ele.getAttribute (nom); 

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

Exemple de code

Dans cet exemple, nous alertons la valeur de l'attribut contenteditable appartenant au

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

 Bonjour 

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

15. removeAttribute()

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

Syntaxe

ele.removeAttribute(name);

• ele - L'élément HTML de l'attribut à supprimer.
• name - Le nom de l'attribut.

Exemple de code

Dans cet exemple, nous supprimons l'attribut contenteditable de la

élément. En conséquence, le

ne sera plus modifiable.

 Bonjour 

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

Comment décharger CSS inutile avec Grunt

L'utilisation d'un framework, comme Bootstrap et Foundation, est l'un des moyens les plus rapides de créer un site Web réactif. Ces frameworks ont tous les éléments nécessaires, y compris les composants Grid et Interface utilisateur pour construire un site web décent et fonctionnel.Mais,

(Conseils techniques et de conception)

10 meilleurs outils vidéo pour réaliser facilement des vidéos convaincantes

Une image parle plus fort que les mots, mais ce qui parle encore plus fort qu'une image est une vidéo convaincante. Que vous ayez besoin de créer des vidéos animées pour monter votre entreprise ou que vous souhaitiez réaliser un montage vidéo pour le mariage de vos amis, inutile d'embaucher un professionnel tant que vous disposez d'outils de création de vidéos sympas.Il exis

(Conseils techniques et de conception)



Des Articles Intéressants

5 Texte Expanding Apps pour Windows - Best of

Vitrine des GIF animés impressionnants

Cliquez pour trouver un schéma de couleurs avec ColourCode

10 meilleurs plugins de galerie photo pour votre site WordPress