Lors du développement de sites Web modernes, les fonctionnalités JavaScript pour travailler avec DOM sont largement utilisées. Les scripts vous permettent d'afficher et de masquer les éléments à partir desquels les pages sont construites, de configurer les propriétés de ces éléments. Les objets DOM qui interagissent avec des programmes ont des propriétés et des méthodes. Pratiquement tous les programmeurs Web connaissent certains d'entre eux, selon l'auteur du matériel, dont nous publions la traduction aujourd'hui. Mais certains dont il veut parler ici sont beaucoup moins célèbres.
HTML et DOM
Tout d'abord, parlons de la différence entre HTML et DOM. Par exemple, un élément
<table< normal est évidemment du code HTML. Cet élément peut être utilisé dans des fichiers html; il possède un ensemble d'attributs qui détermine l'apparence et le comportement de la table créée avec son aide. À proprement parler, la
<table> elle-même n'a rien à voir avec JavaScript. La relation entre les éléments HTML présents dans le document et le code JavaScript est fournie par le DOM (Document Object Model). Le DOM permet d'interagir avec les éléments HTML du code JavaScript comme s'il s'agissait d'objets.
Tous les éléments HTML ont leurs propres «interfaces DOM» qui définissent les propriétés (elles sont généralement associées aux attributs des éléments HTML) et les méthodes. Par exemple, l'élément
<table> possède une interface appelée
HTMLTableElement .
Vous pouvez obtenir un lien vers un élément, par exemple, en utilisant la construction suivante:
const searchBox = document.getElementById('search-box');
Une fois le lien vers l'élément reçu, le programmeur a accès aux propriétés et méthodes de ces éléments. Par exemple, vous pouvez travailler avec la propriété
value d'un certain champ de texte, étant donné que le lien vers celui-ci est stocké dans la variable
searchBox à l'aide d'une structure du formulaire
searchBox.value . Vous pouvez placer le curseur dans ce champ de texte en appelant sa méthode
searchBox.focus() .
C'est peut-être là que nous pouvons terminer notre «cours sur le DOM» et aller, en fait, aux propriétés et méthodes peu connues des interfaces DOM des éléments HTML.
Si vous souhaitez lire et expérimenter tout de suite, ouvrez les outils de développement du navigateur. En particulier, afin d'obtenir un lien vers un certain élément de page, vous pouvez le sélectionner dans l'arborescence des éléments, puis utiliser la construction
$0 dans la
console . Pour afficher un élément en tant qu'objet, tapez
dir($0) dans la console. Et au fait, si vous tombez sur quelque chose de nouveau pour vous, essayez de l'explorer à l'aide de la console.
N ° 1: méthodes de tableau
L'élément
<table> modeste (qui occupe toujours la première place parmi les technologies utilisées dans le développement des mises en page Web) dispose d'un bon nombre de très bonnes méthodes qui simplifient considérablement le processus de construction des tables.
En voici quelques uns.
const tableEl = document.querySelector('table'); const headerRow = tableEl.createTHead().insertRow(); headerRow.insertCell().textContent = 'Make'; headerRow.insertCell().textContent = 'Model'; headerRow.insertCell().textContent = 'Color'; const newRow = tableEl.insertRow(); newRow.insertCell().textContent = 'Yes'; newRow.insertCell().textContent = 'No'; newRow.insertCell().textContent = 'Thank you';
Comme vous pouvez le voir, ici nous n'utilisons pas de commandes comme
document.createElement() . Et la méthode
.insertRow() , si vous l'appelez directement sur la table, fournira même l'ajout de
<tbody> . N'est-ce pas merveilleux?
# 2: méthode scrollIntoView ()
Vous savez probablement que si le lien a une construction comme
#something , après le chargement de la page, le navigateur
#something automatiquement jusqu'à l'élément avec l'
ID correspondant? La méthode est pratique, mais si l'élément qui nous intéresse est rendu après le chargement de la page, cela ne fonctionnera pas. Voici comment recréer vous-même ce modèle de comportement:
document.querySelector(document.location.hash).scrollIntoView();
N ° 3: propriété cachée
Ici, nous considérons une propriété, cependant, très probablement, lors de l'accès à cette propriété, un certain setter sera appelé, qui est une méthode. Dans tous les cas, rappelez-vous, avez-vous déjà utilisé le dessin ci-dessous pour masquer un élément?
myElement.style.display = 'none'
Si vous l'utilisez, vous ne devriez plus le faire. Pour masquer un élément, écrivez simplement
true dans sa propriété
hidden :
myElement.hidden = true
# 4: Méthode toggle ()
En fait, ce n'est pas une méthode d'un élément. Il s'agit d'une méthode de propriété d'élément. En particulier, cette méthode vous permet d'ajouter des classes à un élément et de les supprimer à l'aide de la construction suivante:
myElement.classList.toggle('some-class')
Soit dit en passant, si vous avez déjà ajouté des classes à l'aide de la construction
if , sachez que vous n'avez plus besoin de le faire, et oubliez cette construction. Le même mécanisme est implémenté à l'aide du deuxième paramètre de la méthode
toggle() . S'il s'agit d'une expression qui a la valeur
true , la classe passée à
toggle() sera ajoutée à l'élément.
el.classList.toggle('some-orange-class', theme === 'orange');
Probablement, ici, vous pouvez avoir des doutes sur l'adéquation de cette conception. Après tout, le nom de la méthode, «bascule», qui, étant donné que l'essence de l'action qu'elle accomplit y est cachée, peut être traduit par «commutateur», ne contient aucune mention que le «commutateur» implique l'accomplissement d'une certaine condition. Cependant, la conception décrite ci-dessus existe sous cette forme, bien que les développeurs d'Internet Explorer la considèrent probablement également étrange. Dans leur implémentation de
toggle() deuxième paramètre n'est pas fourni. Par conséquent, bien qu'il ait été dit ci-dessus que ceux qui connaissent
toggle() peuvent oublier la construction
if , l'oublier, néanmoins, ne le font pas.
# 5: Méthode querySelector ()
Vous connaissez certainement déjà l'existence de cette méthode, mais on soupçonne qu'exactement 17% d'entre vous ne savent pas qu'elle peut être utilisée en application à n'importe quel élément.
Par exemple, la construction
myElement.querySelector('.my-class') sélectionne uniquement les éléments qui ont la classe
my-class et sont en même temps des descendants de l'élément
myElement .
# 6: méthode la plus proche ()
Tous les éléments qui prennent en charge la recherche d'éléments parents ont cette méthode. C'est quelque chose comme l'inverse de
querySelector() . En utilisant cette méthode, par exemple, vous pouvez obtenir le titre de la section actuelle:
myElement.closest('article').querySelector('h1');
Ici, lors de la recherche, le premier élément parent
<article> détecté, puis le premier élément
<h1> entre.
# 7: méthode getBoundingClientRect ()
La méthode
getBoundingClientRect() renvoie un petit objet joliment décoré contenant des informations sur la taille de l'élément pour lequel cette méthode a été appelée.
{ x: 604.875, y: 1312, width: 701.625, height: 31, top: 1312, right: 1306.5, bottom: 1343, left: 604.875 }
Cependant, en utilisant cette méthode, il faut faire particulièrement attention à deux points:
- L'appel de cette méthode entraîne un nouveau tracé de la page. Selon le périphérique sur lequel la page est affichée et la complexité de la page, cette opération peut prendre plusieurs millisecondes. Considérez ceci si vous avez l'intention d'appeler cette méthode dans certains fragments de code répétitifs, par exemple, lors de l'exécution d'une animation.
- Tous les navigateurs ne prennent pas en charge cette méthode.
# 8: Méthode matches ()
Supposons que nous devons vérifier si un certain élément a une certaine classe.
Voici comment résoudre ce problème, apparemment de la manière la plus difficile:
if (myElement.className.indexOf('some-class') > -1) {
Voici une autre option, c'est mieux, mais aussi loin d'être idéal:
if (myElement.className.includes('some-class')) {
Et voici la meilleure façon de résoudre ce problème:
if (myElement.matches('.some-class')) {
# 9: Méthode insertAdjacentElement ()
Cette méthode est similaire à
appendChild() , mais donne un peu plus de pouvoir sur l'endroit où l'élément enfant sera ajouté.
Ainsi, la commande
parentEl.insertAdjacentElement('beforeend', newEl) similaire à la commande
parentEl.appendChild(newEl) , mais en utilisant la méthode
insertAdjacentElement() , en plus de l'argument
beforeend , vous pouvez lui passer des
beforebegin ,
afterbegin et
afterend , indiquant l'endroit où vous devez ajouter un élément.
N ° 10: méthode contains ()
Avez-vous déjà voulu savoir si un élément est à l'intérieur d'un autre? J'en ai besoin tout le temps. Par exemple, si pendant le traitement d'un événement de clic de souris vous avez besoin de savoir s'il s'est produit à l'intérieur ou à l'extérieur de la fenêtre modale (ce qui signifie qu'il peut être fermé), vous pouvez utiliser la construction suivante:
const handleClick = e => { if (!modalEl.contains(e.target)) modalEl.hidden = true; };
Ici
modalEl est un lien vers une fenêtre modale, et
e.target est n'importe quel élément sur lequel on clique. Fait intéressant, lorsque j'utilise cette technique, je n'arrive jamais à tout écrire correctement la première fois, même lorsque je me souviens que je me trompe constamment et que j'essaie de corriger les erreurs possibles à l'avance.
# 11: Méthode getAttribute ()
Cette méthode peut peut-être être considérée comme la plus inutile, mais il existe une situation dans laquelle elle peut certainement être utile.
Rappelez-vous, nous avons dit plus tôt que les propriétés des objets DOM sont généralement associées aux attributs des éléments HTML?
Un des cas où ce n'est pas le cas est représenté par l'attribut
href , par exemple, comme ici:
<a href="/animals/cat">Cat</a> .
La construction
el.href ne renverra pas, comme vous pouvez vous y attendre,
/animals/cat . En effet, l'élément
<a> implémente l'interface
HTMLHyperlinkElementUtils , qui possède de nombreuses propriétés d'assistance comme le
protocol et le
hash qui vous aident à comprendre les détails des liens.
L'une de ces propriétés d'assistance est la propriété
href , qui donne une URL complète qui inclut tout ce que l'URL relative n'a pas dans l'attribut.
Par conséquent, pour obtenir exactement ce qui est écrit dans l'attribut
href , vous devez utiliser la construction
el.getAttribute('href') .
N ° 12: trois méthodes de l'élément <dialog>
L'élément
<dialog> relativement nouveau a deux méthodes utiles, mais tout à fait ordinaires, et une méthode qui peut être appelée simplement merveilleuse. Ainsi, les méthodes
show() et
close() font exactement ce que vous pouvez en attendre, en affichant et en masquant la fenêtre. Nous les appelons utiles, mais ordinaires. Mais la méthode
showModal() affichera l'élément
<dialog> au-dessus de tout le reste, en l'affichant au centre de la fenêtre. En fait, un tel comportement est généralement attendu des fenêtres modales. Lorsque vous travaillez avec de tels éléments, vous n'avez pas besoin de penser à la propriété
z-index , d'ajouter manuellement un arrière-plan flou ou d'écouter l'événement d'appuyer sur la touche
Escape pour fermer la fenêtre correspondante. Le navigateur sait comment les fenêtres modales devraient fonctionner et s'assurera que tout fonctionne comme il se doit.
# 13: Méthode forEach ()
Parfois, lorsque vous obtenez un lien vers une liste d'éléments, vous pouvez
forEach() ces éléments à l'aide de la méthode
forEach() . Les boucles
for() sont hier. Supposons que nous devons répertorier tous les éléments
<a> de la page dans le journal. Si nous procédons comme indiqué ci-dessous, nous rencontrerons un message d'erreur:
document.getElementsByTagName('a').forEach(el => { console.log(el.href); });
Afin de résoudre ce problème, vous pouvez utiliser la construction suivante:
document.querySelectorAll('a').forEach(el => { console.log(el.href); });
Le point ici est que des méthodes comme
getElementsByTagName() retournent un objet de type
HTMLCollection et
querySelectorAll objet
querySelectorAll . C'est l'interface de l'objet
NodeList nous donne accès à la méthode
forEach() méthodes
keys() ,
values() et
entries() ).
En fait, il serait beaucoup mieux que de telles méthodes retournent simplement des tableaux normaux et ne nous offrent pas quelque chose qui a une sorte de méthodes apparemment utiles qui ne sont pas tout à fait comme des tableaux. Cependant, ne vous
Array.from() pas pour cette raison, car les gens intelligents de l'ECMA nous ont donné une excellente méthode -
Array.from() , qui nous permet de transformer tout ce qui ressemble à des tableaux en tableaux.
Par conséquent, vous pouvez écrire ce qui suit:
Array.from(document.getElementsByTagName('a')).forEach(el => { console.log(el.href); });
Et voici une jolie petite chose. En transformant en un tableau ce qui lui ressemblait, nous avons la possibilité d'utiliser de nombreuses méthodes de tableau, telles que
map() ,
filter() et
reduce() . Voici, par exemple, comment former un tableau de liens externes sur la page:
Array.from(document.querySelectorAll('a')) .map(el => el.origin) .filter(origin => origin !== document.origin) .filter(Boolean);
Soit dit en passant, j'aime vraiment la construction
.filter(Boolean) car lorsque je la rencontre dans le code que j'ai écrit il y a longtemps, je peux à peine comprendre immédiatement sa signification.
N ° 14: travailler avec des formulaires
Vous savez très probablement que l'élément
<form> a une méthode
submit() . Cependant, il est moins probable que vous sachiez que les formulaires ont une méthode
reset() et qu'ils ont une méthode
reportValidity() , qui est applicable lorsque la validation du remplissage des éléments du formulaire est utilisée.
Lorsque vous travaillez avec des formulaires, vous pouvez en outre utiliser leur propriété
elements , qui, via un point, vous permet d'accéder aux éléments de formulaire à l'aide de leurs attributs de
name . Par exemple, la construction
myFormEl.elements.email l'
myFormEl.elements.email <input name="email" /> appartenant au formulaire ("appartenance" ne signifie pas nécessairement "être un descendant").
Il convient de noter ici que la propriété
elements elle-même ne renvoie pas une liste d'éléments ordinaires. Il renvoie une liste de contrôles (et cette liste, bien sûr, n'est pas un tableau).
Voici un exemple. S'il y a trois boutons radio sur le formulaire et qu'ils ont tous le même nom (
animal ), la construction
formEl.elements.animal donnera un lien vers un ensemble de boutons radio (1 contrôle, 3 éléments HTML). Et si vous utilisez la conception
formEl.elements.animal.value , elle donnera la valeur du bouton radio sélectionné par l'utilisateur.
Si vous y pensez, alors tout cela semble assez étrange, alors examinons l'exemple précédent:
formEl est un élément.elements est un objet HTMLFormControlsCollection qui ressemble à un tableau mais ne l'est pas. Ses éléments ne sont pas nécessairement des éléments HTML.animal est un ensemble de plusieurs boutons radio, présentés comme un ensemble car ils ont tous le même attribut de name (il existe une interface RadioNodeList conçue spécifiquement pour travailler avec les boutons radio).value utilisé pour accéder à l'attribut value du bouton radio actif dans la collection.
# 15: Méthode Select ()
Peut-être qu'à la fin du document, il serait préférable de parler d'une méthode absolument incroyable, bien que cette méthode soit peut-être une révélation pour quelqu'un. Ainsi, la méthode
.select() vous permet de sélectionner du texte dans les champs de saisie pour lesquels il est appelé.
Résumé
Dans cet article, nous avons parlé de méthodes et de propriétés peu connues qui peuvent être utilisées pour travailler avec le contenu des pages Web. Nous espérons que vous avez trouvé ici quelque chose de nouveau pour vous-même, et peut-être pas seulement nouveau, mais aussi utile.
Chers lecteurs! Utilisez-vous des moyens d'interaction programmatique avec le contenu de pages Web peu connues?
