D'après un traducteur: David Gilbertson est un auteur bien connu qui écrit sur les technologies Web et de crypto-monnaie. Il a pu réunir un large public de lecteurs, qui raconte toutes sortes de trucs et de domaines intéressants.
Petite introductionDiscutons de la différence entre HTML et DOM.
Par exemple, prenez l'élément
table de HTML. Vous pouvez l'utiliser dans un fichier avec l'extension .html. Dans ce document, nous indiquons un ensemble d'attributs qui déterminent l'apparence et le "comportement" de la page.
Et c'est tout, il n'y a rien à voir avec JavaScript.
Le DOM est quelque chose qui vous permet de combiner votre code JavaScript avec des éléments HTML dans un document afin que vous puissiez interagir avec eux en tant qu'objets.
Il s'agit d'un modèle de document dans l'objet.
Tout type d'élément en HTML possède sa propre interface "DOM", qui définit les propriétés et les méthodes. Par exemple, la
table a une interface appelée
HTMLTableElement .
Vous pouvez obtenir un lien vers un élément spécifique en écrivant quelque chose comme ceci:
Vous avez accès à toutes les propriétés et méthodes disponibles pour un type d'élément particulier. Par exemple, vous pouvez accéder aux propriétés de la valeur à l'aide de searchBox.value ou placer le curseur sur une position spécifique à l'aide de searchBox.focus ().
Voyons maintenant une autre chose importante: la plupart des éléments n'ont pas de méthodes intéressantes, il est donc facile de manquer quelque chose d'important si vous ne vous attardez pas sur ce problème exprès.
Mais, heureusement, le souci du détail et une étude des spécifications est mon point fort. Par conséquent, j'ai fait tout ce qui était nécessaire et j'écris les résultats dans cet article.
Si vous voulez essayer de gérer le DOM vous-même, vous devez utiliser les outils du navigateur pour apprendre certains éléments. Pour ce faire, sélectionnez l'un d'eux dans l'arborescence des éléments et tapez $ 0 dans la console. Cela vous donnera un lien vers l'élément que vous avez sélectionné. Pour le convertir en objet, tapez dir ($ 0).
Il y a beaucoup de choses que
vous pouvez faire dans la console .
Skillbox recommande: Cours en ligne pour les développeurs Web
Nous vous rappelons: Pour tous les lecteurs de Habr - une remise de 10 000 roubles lors de l'inscription à un cours Skillbox en utilisant le code promotionnel Habr.
N ° 1. Méthodes de table
Il existe de nombreuses méthodes pratiques qui vous permettent d'assembler des tables comme des meubles dans Ikea.
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';
Ici, vous voyez non seulement document.createElement (). Par exemple, la méthode .insertRow ()
alignera le
corps si vous organisez un appel à cet élément directement dans l'arborescence. N'est-ce pas génial?
N ° 2. scrollIntoView ()
Vous savez que si vous avez #quelque chose dans l'URL, alors lorsque la page se charge, le navigateur défile jusqu'à l'élément avec cet ID?
Cela aide généralement beaucoup, mais cela ne fonctionne pas si vous restituez cet élément après le chargement de la page. Afin de profiter de l'opportunité décrite ci-dessus, il suffit de prescrire document.querySelector (document.location.hash) .scrollIntoView ();
Numéro 3. caché
Eh bien, oui, c'est un peu comme une méthode, mais comme il y a un setter (méthode pour définir une propriété), alors il peut être considéré comme une méthode.
Quoi qu'il en soit, avez-vous déjà utilisé myElement.style.display = 'none' pour masquer un élément? Si c'est le cas, ne faites pas cela.
Où il vaut mieux utiliser myElement.hidden = true.
Numéro 4. bascule ()
Nous pouvons utiliser cette méthode pour ajouter ou supprimer une classe d'élément à l'aide de myElement.classList.toggle ('some-class').
Et si vous avez déjà ajouté une classe en utilisant if, alors pensez: peut-être devriez-vous essayer autre chose?
Par exemple, vous pouvez simplement utiliser le deuxième paramètre pour la méthode de basculement. Vous devez le passer à la méthode de commutation. Si cela se produit, votre classe sera ajoutée à l'élément:
el.classList.toggle('some-orange-class', theme === 'orange');
Oui, je comprends ce que vous pensez en ce moment: ce n'est pas ce que signifie le mot "toogle" lui-même. Ceux derrière Internet Explorer? d'accord avec cela et exprimer leur protestation sans utiliser le deuxième paramètre du tout.
Mais revenons-en. Liberté d'options!
N ° 5. querySelector ()
Eh bien, vous devez certainement le savoir, mais je soupçonne qu'environ 17% des lecteurs ne savent pas comment cette méthode peut être utilisée conjointement avec des éléments.
Exemple: myElement.querySelector ('. My-class') montrera la correspondance des éléments qui ont la classe my-class et les "enfants" de myElement.
N ° 6. le plus proche
Cette méthode est disponible pour tous les éléments qui affichent l'arborescence d'éléments. C'est un peu l'inverse de querySelector (). Par conséquent, nous pouvons utiliser le titre de la section actuelle de cette façon:
myElement.closest('article').querySelector('h1');
Nous commençons par l'
article et finissons par le premier
h1 .
Numéro 7. getBoundingClientRect ()
La méthode renvoie un objet avec des informations détaillées sur l'élément que nous avons spécifié.
{ x: 604.875, y: 1312, width: 701.625, height: 31, top: 1312, right: 1306.5, bottom: 1343, left: 604.875 }
Mais attention: cet exemple provoque un redessin. Selon l'appareil et la complexité de votre page, cela peut prendre plusieurs millisecondes. Par conséquent, gardez cela à l'esprit si vous l'appelez à plusieurs reprises, par exemple dans une animation.
Tous les navigateurs ne renvoient pas toutes ces valeurs.
Numéro 8. matches ()
Je voudrais vérifier si un certain élément appartient à une certaine classe.
Difficulté maximale:
if (myElement.className.indexOf('some-class') > -1) { // do something } , : if (myElement.className.includes('some-class')) { // do something }
Ce dont vous avez besoin:
if (myElement.matches('.some-class')) {
N ° 9. insertAdjacentElement ()
Je l'ai découvert aujourd'hui! Ceci est similaire à appendChild (), mais donne un peu plus de contrôle dans le processus d'ajout d'enfant.
parentEl.insertAdjacentElement ('beforeend', newEl) fait la même chose que parentEl.appendChild (newEl), mais vous pouvez spécifier beforebegin, afterbegin ou afterend pour le mettre à la place indiquée par ces noms.
Quel contrôle!
N ° 10. contient ()
Avez-vous déjà voulu savoir s'il y a un élément à l'intérieur d'un autre? Je veux savoir ça tout le temps.
Par exemple, si je gère un clic de souris et que je veux comprendre s'il s'est produit à l'intérieur ou à l'extérieur (afin de pouvoir le fermer), je fais ceci:
const handleClick = e => { if (!modalEl.contains(e.target)) modalEl.hidden = true; };
Ici, modal El est une référence à la fenêtre modale, et e.target est l'élément sur lequel cliquer.
C'est drôle, mais je fais souvent des erreurs de logique lorsque j'essaie d'utiliser la méthode la première fois. Et puis quand j'essaye de corriger l'erreur, je me trompe à nouveau. Et cette méthode aide à y faire face immédiatement.
N ° 11. getAttribute ()
L'une des méthodes d'éléments les plus inutiles, mais pas dans ce cas particulier.
Vous souvenez-vous que les propriétés se réfèrent généralement aux attributs?
Parfois, ce n'est pas le cas, par exemple, lorsque href est un attribut d'un élément, par exemple un href = "/ animals / cat"> Cat </ a.
el.href ne nous donnera pas / animaux / chat, comme vous pouvez vous y attendre. C'est parce que l'élément implémente l'interface HTMLHyperlinkElementUtils, qui est un tas de propriétés d'assistance comme le protocole et le hachage qui pointent vers l'objet lien.
Il s'agit de l'une des propriétés href utiles qui donnera le L complet, et non l'URL relative dans l'attribut.
Vous devez donc utiliser el.getAttribute ('href') si vous avez besoin d'une chaîne littérale à l'intérieur de l'attribut href.
N ° 12. dialogue
L'élément de
dialogue relativement nouveau a deux bonnes méthodes et un idéal. show () et close () font exactement ce que l'on attend d'eux. Et c'est bien, je suppose.
Mais showModal () affichera une
boîte de
dialogue au-dessus de tout autre élément placé sur la page. Il n'est pas nécessaire de z-index, ni d'ajouter manuellement un fond sombre, ni de suivre la pression du bouton Échap. Le navigateur sait comment fonctionnent les fenêtres modales et fera tout pour vous. Et c'est super.
N ° 13. forEach ()
Parfois, lorsque vous avez besoin d'une référence à une liste d'éléments, vous pouvez utiliser forEach ().
Mais que faire si vous devez enregistrer toutes les URL pour tous les liens de page? Vous pouvez le faire et voir l'erreur.
document.getElementsByTagName('a').forEach(el => { console.log(el.href); });
Ou faites ceci:
document.querySelectorAll('a').forEach(el => { console.log(el.href); });
Le fait est que getElementsByTagName et d'autres méthodes get ... retournent un HTMLCollection, mais querySelectorAll renvoie un NodeList.
Et l'interface NodeList nous donne la méthode forEach () (avec les clés (), les valeurs () et l'entrée ()).
Les bons gars d'ECMA nous ont donné Array.from (), qui transforme tout ce qui ressemble à un tableau dans le tableau lui-même.
Array.from(document.getElementsByTagName('a')).forEach(el => { console.log(el.href); });
Bonus! Lors de la création d'un tableau, vous pouvez utiliser map () et filter () et réduire (), ou toute autre méthode. Par exemple, renvoyer un tableau de liens externes:
Array.from(document.querySelectorAll('a')) .map(el => el.origin) .filter(origin => origin !== document.origin) .filter(Boolean);
J'aime vraiment prescrire .filter (booléen), car sans cela, je devrais me gratter la tête à l'avenir, en essayant de me rappeler ce que c'est et comment cela fonctionne.
N ° 14. Formulaires
Le formulaire , comme vous le savez probablement déjà, a une méthode submit (). Il est un peu moins probable que vous sachiez que les formulaires ont une méthode reset () et que vous pouvez signaler une valeur Validity () si vous utilisez la validation sur vos éléments de formulaire.
Vous pouvez également utiliser la propriété de notation par points des éléments de formulaire pour faire référence à un élément par son attribut de nom. Par exemple, myFormEl.elements.email renverra l'
entrée nom = "email" / élément qui appartient au
formulaire ("appartient" ne signifie pas nécessairement qu'il s'agit de son "descendant").
Et maintenant j'ai menti. Le fait est que les éléments ne renvoient pas une liste d'éléments. Il renvoie une liste de contrôles (et, bien sûr, ce n'est pas un tableau).
Exemple: si vous avez trois boutons radio, chacun avec le même nom que animal, alors formEl.elements.animal vous donnera un lien vers cet ensemble de boutons radio (1 contrôle, 3 éléments).
Et formEl.elements.animal.value renverra la valeur du bouton radio sélectionné.
C'est une étrange syntaxe, si vous y réfléchissez. Décomposez-le les gars: formEl est un élément, les éléments sont un HTMLFormControlsCollection, pas tout à fait un tableau, où chaque élément n'est pas nécessairement un élément HTML. Animal a plusieurs commutateurs combinés uniquement parce qu'ils ont le même attribut de nom (il existe une interface RadioNodeList pour cela), et la valeur examine l'attribut value de n'importe quel commutateur de la collection.
Numéro 15. sélectionnez ()
La méthode .select () sélectionnera tout le texte dans n'importe quelle entrée que vous appelez.
Merci d'avoir lu, j'espère que tout cela vous sera utile. Vérifiez toujours les capacités de votre navigateur, afin que plus tard, cela ne soit pas atrocement douloureux.
Pratique de Skillbox , qui aidera un programmeur débutant à devenir un spécialiste recherché: