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 ounull
(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
querySelector()
et sa couleur est changée en rouge.premier paragraphe
deuxième paragraphe
div unparagraphe 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 objetNodeList
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 unparagraphe 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:
var btn = document.querySelector ('bouton'); btn.onclick = foo;
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).
Options | Que 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:
|
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 auquelchildEle
est ajouté en tant que dernier enfant.childEle
- L'élément HTML ajouté en tant que dernier enfant deele
.
Exemple de code
Dans cet exemple, nous insérons un élément est comme l'enfant d'un
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 dechildEle
.childEle
- L'élément enfant deele
.
Exemple de code
Dans cet exemple, nous supprimons l'élément que nous avons ajouté en tant qu'enfant à
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 deele
qui remplaceraoldChildEle
.oldChildEle
- Elément enfant deele
, qui sera remplacé parnewChildEle
.
Exemple de code
Dans cet exemple, l'élément enfant appartenant à
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émentele
.ele
- L'élément HTML à copier.deep
- (optionnel) Une valeur booléenne. Si elle est définie surtrue
,dupeEle
aura tous les éléments enfantsele
, si elle est définie surfalse
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
appendChild()
précitée.Par conséquent,
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 deele
devant lequelnewEle
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
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
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
- ObjetCSSStyleDeclaration
renvoyé par la méthode. Il contient toutes les propriétés CSS et leurs valeurs de l'élémentele
.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
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
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
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
Bonjour
var div = document.querySelector ('div'); div.removeAttribute ('contenteditable');
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
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