Navigateur : Document, Évènements, Interfaces

• Document

  • L'environnement du navigateur, spécifications

  • L'arbre DOM

  • Parcourir le DOM

    • Enfants DOM

    • La question des frères et sœurs

    • Sélectionner toutes les cellules diagonales

  • Recherches: getElement*, querySelector*

    • Recherche d'éléments

  • Propriétés de nœud : type, balise et contenu

    • Compter les descendants

    • Qu'y a-t-il dans le nodeType ?

    • Balise dans le commentaire

    • Où est le "document" dans la hiérarchie ?

  • Attributs et propriétés

    • Obtenez l'attribut

    • Rendre les liens externes orange

  • Modification du document

    • createTextNode vs innerHTML vs textContent

    • Effacer l'élément

    • Pourquoi "aaa" reste-t-il ?

    • Créer une liste

    • Créer un arbre à partir de l'objet

    • Afficher les descendants dans un arbre

    • Créer un calendrier

    • Horloge colorée avec setInterval

    • Insérez le HTML dans la liste

    • Trier le tableau

  • Styles et classes

    • Create a notification

  • Taille des éléments et défilement

    • Quel est le défilement à partir du bas ?

    • Quelle est la largeur de la barre de défilement ?

    • Placer la balle au centre du terrain

    • La différence: largeur CSS vs clientWidth

  • Tailles des fenêtres et défilement

  • Coordonnées

    • Trouver les coordonnées de la fenêtre du champ

    • Afficher une note près de l'élément

    • Afficher une note près de l'élément (absolute)

    • Positionnez la note à l'intérieur (absolute)

• Introduction to Events

  • Introduction to browser events

    • Hide on click

    • Hide self

    • Which handlers run?

    • Move the ball across the field

    • Create a sliding menu

    • Add a closing button

    • Carousel

  • Bubbling and capturing

  • Délégation d'événement

    • Masquer les messages avec délégation d'événement

    • Menu arborescent

    • Table triable

    • Comportement info-bulle

  • Actions par défaut du navigateur

    • Pourquoi "return false" ne fonctionne pas?

    • Capturer des liens dans l'élément

    • Galerie d'images

  • Distribution d'événements personnalisés

• UI Events

  • Evenements de la souris

    • Liste sélectionnable

  • Déplacer la souris : mouseover/out, mouseenter/leave

    • Improved tooltip behavior

    • Info-bulle "Intelligente"

  • Les évènements Glisser-Déposer de la souris

    • Barre de défilement

    • Glisser les superhéros à l’intérieur du terrain

  • Les événements de pointeur

  • Le Clavier: les évènements keydown et keyup

    • Raccourcis clavier étendus

  • Le Défilement

    • Page sans Fin

    • Bouton Up/down

    • Charger les images visibles

• Forms, controls

  • Propriétés de formulaire

    • Ajouter une option à un select

  • Focus: focus/blur

    • Div éditable

    • Modifier TD au clique

    • Souris dirigée par le clavier

  • Les événements: change, input, cut, copy, paste

    • Deposit calculator

  • Formulaires: l'événement et la méthode "submit"

    • Formulaire modal

• Chargement du document et des ressources

  • Page: DOMContentLoaded, load, beforeunload, unload

  • Les scripts: async, defer

  • Chargement des ressources: onload et onerror

    • Charger des images avec une fonction de rappel

• Miscellaneous

  • Mutation observer

  • Selection et Range

  • La boucle d'événement: les microtâches et les macrotâches

    • Quelle sera la sortie de ce code?