hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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

En tant que développeur Web, vous devez souvent manipuler le DOM, le modèle objet utilisé par les navigateurs pour spécifier la structure logique des pages Web, et basé sur cette structure pour afficher les éléments HTML à l'écran .

HTML définit la structure DOM par défaut . Cependant, dans la plupart des cas, vous voudrez peut-être manipuler ceci avec JavaScript, généralement afin d' ajouter des fonctionnalités supplémentaires à un site.

Dans cet article, vous trouverez une liste de 15 méthodes JavaScript de base qui facilitent la manipulation DOM . Vous utiliserez probablement ces méthodes fréquemment dans votre code, et vous les rencontrerez également dans nos tutoriels JavaScript.

1. querySelector()

La méthode querySelector() renvoie le premier élément qui correspond à un ou plusieurs sélecteurs CSS . Si aucune correspondance n'est trouvée, elle renvoie null .

Avant l' querySelector(), les développeurs utilisaient largement la méthode getElementById() qui récupère un élément avec une valeur d' id spécifiée .

Bien que getElementById() soit toujours une méthode utile, mais avec les nouvelles querySelector() et querySelectorAll(), nous sommes libres de cibler des éléments basés sur n'importe quel sélecteur CSS, donc nous avons plus de flexibilité.

Syntaxe
 var ele = document.querySelector (sélecteur); 
  • ele - Premier élément correspondant ou null (si aucun élément ne correspond aux sélecteurs)
  • selector - un ou plusieurs sélecteurs CSS, tels que "#fooId", ".fooClassName", ".class1.class2" ou ".class1, .class2"
Exemple de code

Dans cet exemple, le premier

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

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.   
  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).
OptionsQue se passe-t-il quand il est réglé sur true ?
capture

Arrête le bouillonnement d'événements, c'est-à-dire empêche l'appel d'un écouteur d'événement 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:

  1. ele.addEventListener(evt, listener, true)
  2. ele.addEventListener(evt, listener, {capture:true});
once

L'écouteur est appelé seulement 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.

passive

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 à la balise HTML.

  
 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'); 

6 tâches essentielles (mais ennuyeuses) Freelancers Hate Doing

6 tâches essentielles (mais ennuyeuses) Freelancers Hate Doing

La chose avec freelance, c'est que c'est une entreprise. Vous pouvez être graphiste, rédacteur ou développeur Web par profession, mais puisque vous faites des affaires, il y a toujours des tâches ennuyeuses mais essentielles, vous savez, comme l'organisation de listes de tâches écrasantes ou le dépôt de taxes dégoûtantes. Néanmoin

(Conseils techniques et de conception)

Code Typage des animations de texte avec jQuery TypeIt

Code Typage des animations de texte avec jQuery TypeIt

Le combo de jQuery et de texte n'a pas de limite sur le web. Vous pouvez construire presque n'importe quoi avec un peu de créativité et les bonnes bibliothèques JavaScript.Une telle bibliothèque est TypeIt, construite comme un plugin jQuery gratuit. Il vous permet de créer des animations de typage dynamique incroyablement réalistes. Vous

(Conseils techniques et de conception)