Skip to content

Latest commit

 

History

History
418 lines (369 loc) · 43.3 KB

File metadata and controls

418 lines (369 loc) · 43.3 KB
title slug
Element
Web/API/Element

{{APIRef("DOM")}}

Element est la classe de base la plus générique dont héritent tous les objets qui représentent des éléments d'un Document. Elle contient uniquement des méthodes et propriétés communes à l'ensemble des éléments. Des classes plus spécifiques héritent d'Element. Ainsi, l'interface HTMLElement correspond à l'interface de base pour les éléments HTML tandis que l'interface SVGElement représente la base pour les éléments SVG. La plupart des fonctionnalités sont définies dans les classes situées plus loin dans la hiérarchie.

Propriétés

Element hérite des propriétés de son interface parente : Node (et donc indirectement des propriétés du parent de celle-ci : EventTarget).

  • Element.assignedSlot{{readonlyInline}}

    • : Renvoie un objet HTMLSlotElement représentant l'emplacement (<slot>) dans lequel le nœud est inséré.
  • Element.attributes {{readOnlyInline}}

    • : Renvoie un objet NamedNodeMap contenant les attributs affectés de l'élément HTML correspondant.
  • Element.childElementCount {{readonlyInline}}

    • : Renvoie le nombre d'éléments enfants de cet élément.
  • Element.children {{readonlyInline}}

    • : Renvoie les éléments enfants de cet élément.
  • Element.classList {{readOnlyInline}}

    • : Renvoie un objet DOMTokenList contenant la liste des attributs de classe.
  • Element.className

    • : Une chaîne de caractères DOMString qui représente la classe de l'élément.
  • Element.clientHeight {{readOnlyInline}}

    • : Renvoie un nombre (Number) représentant la hauteur intérieure de l'élément.
  • Element.clientLeft {{readOnlyInline}}

    • : Renvoie un nombre (Number) représentant la largeur de la bordure gauche de l'élément.
  • Element.clientTop {{readOnlyInline}}

    • : Renvoie un nombre (Number) représentant la largeur de la bordure haute de l'élément.
  • Element.clientWidth {{readOnlyInline}}

    • : Renvoie un nombre (Number) représentant la largeur intérieure de l'élément.
  • Element.firstElementChild {{readonlyInline}}

    • : Renvoie le premier élément enfant de cet élément.
  • Element.id

    • : Une chaîne de caractères DOMString qui représente l'identifiant de l'élément.
  • Element.innerHTML

    • : Une chaîne de caractères DOMString qui représente le balisage du contenu de l'élément.
  • Element.lastElementChild {{readonlyInline}}

    • : Renvoie le dernier élément enfant de cet élément.
  • Element.localName {{readOnlyInline}}

    • : Une chaîne de caractères DOMString qui représente la partie locale pour le nom qualifié de l'élément.
  • Element.namespaceURI {{readonlyInline}}

    • : L'URI pour l'espace de noms de l'élément ou null s'il n'y en a pas.

      Note : Pour Firefox 3.5 et les versions antérieures, les éléments HTML ne sont pas situés dans un espace de noms. Dans les versions ultérieures, les éléments HTML s'inscrivent dans l'espace de noms http://www.w3.org/1999/xhtml tant pour les arbres HTML que XML.

  • Element.nextElementSibling {{readOnlyInline}}

    • : Un objet Element qui représente l'élément qui suit immédiatement l'élément courant dans l'arbre ou null si l'élément courant n'a pas de voisin.
  • Element.outerHTML

    • : Une chaîne de caractères DOMString qui représente le balisage de l'élément (incluant son contenu). Lorsque cette propriété est utilisée en modification, cela remplace l'élément avec les noeuds construits à partir de l'analyse de la chaîne de caractères fournie.
  • Element.part

    • : Représente les identifiants des parties de l'élément (c'est-à-dire ceux définis avec l'attribut part) sous la forme d'un objet DOMTokenList.
  • Element.prefix {{readOnlyInline}}

    • : Une chaîne de caractères DOMString qui représente le préfixe de l'espace de nom pour l'élément ou null si aucun préfixe n'est défini.
  • Element.previousElementSibling {{readOnlyInline}}

    • : Un objet Element qui représente l'élément qui précède immédiatement l'élément courant dans l'arbre ou null si l'élément courant n'a pas de voisin.
  • Element.scrollHeight {{readOnlyInline}}

    • : Renvoie un nombre (Number) représentant la hauteur de la vue de défilement pour l'élément.
  • Element.scrollLeft

    • : Un nombre (Number) qui représente le décalage à gauche de l'élément lié au défilement.
  • Element.scrollLeftMax {{Non-standard_Inline}} {{readOnlyInline}}

    • : Renvoie un nombre (Number) représentant le décalage à gauche maximal pour l'élément lors du défilement.
  • Element.scrollTop

    • : Un nombre (Number) qui représente le nombre de pixels dont on a fait défiler verticalement le haut de l'élément.
  • Element.scrollTopMax {{Non-standard_Inline}} {{readOnlyInline}}

    • : Renvoie un nombre (Number) représentant le décalage maximal depuis le haut de l'élément lors du défilement.
  • Element.scrollWidth {{readOnlyInline}}

    • : Renvoie un nombre (Number) représentant la largeur de la vue de défilement pour l'élément.
  • Element.shadowRoot{{readOnlyInline}}

    • : Renvoie la racine sombre ouverte (

      open shadow root

      ) hébergée par l'élément ou null si aucune racine sombre ouverte n'est présente.

  • Element.openOrClosedShadowRoot {{Non-standard_Inline}}{{readOnlyInline}}

    • : Renvoie la racine sombre hébergée par l'élément (qu'elle soit ouverte ou fermée). Uniquement disponible pour les WebExtensions.
  • Element.slot {{Experimental_Inline}}

    • : Renvoie le nom de l'emplacement du DOM sombre dans lequel l'élément est inséré.
  • Element.tagName {{readOnlyInline}}

    • : Renvoie une chaîne de caractères (String) qui est le nom de la balise pour l'élément courant.

Propriétés provenant d'ARIA

L'interface Element inclut les propriétés suivantes, définies sur le mixin ARIAMixin.

  • Element.ariaAtomic
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-atomic qui indique si des technologies d'assistance présenteront tout ou partie de la région modifiée selon les notifications définies par l'attribut aria-relevant.
  • Element.ariaAutoComplete
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-autocomplete qui indique si la saisie de texte peut déclencher l'affichage d'une ou plusieurs prédictions pour la valeur saisie par l'utilisateur à destination d'une liste de choix, d'une boîte de recherche ou d'une zone de texte. Elle indique également la façon dont les éventuelles prédictions seraient présentées.
  • Element.ariaBusy
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-busy qui indique d'un élément est en train d'être modifié. Les technologies d'assistance peuvent alors faire le choix d'attendre la fin de la modification avant d'exposer le contenu à l'utilisateur.
  • Element.ariaChecked
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-checked indiquant l'état coché (ou non) des cases à cocher, des boutons radio ou des autres éléments d'interface graphique qui peuvent être cochés.
  • Element.ariaColCount
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-colcount indiquant le nombre de colonnes d'un tableau, d'une grille ou d'une grille arborescente.
  • Element.ariaColIndex
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-colindex qui définit l'indice de la colonne d'un élément ou sa position par rapport au nombre total de colonnes d'un tableau, d'une grille ou d'une grille arborescente.
  • Element.ariaColIndexText
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-colindextext qui définit texte alternatif à aria-colindex qui soit compréhensible par un humain.
  • Element.ariaColSpan
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-colspan qui définit le nombre de colonnes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente.
  • Element.ariaCurrent
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-current qui indique l'élément représente l'objet courant dans un conteneur ou un ensemble d'éléments.
  • Element.ariaDescription
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-description qui définit la chaîne de caractères pour décrire ou annoter l'élément courant.
  • Element.ariaDisabled
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-disabled qui indique que l'élément est perceptible mais désactivé et qu'il ne peut être édité ou manipulé.
  • Element.ariaExpanded
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-expanded qui indique si un élément de groupement contrôlé par l'élément courant est développé ou replié.
  • Element.ariaHasPopup
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-haspopup qui indique la disponibilité et le type d'élément interactif visuel comme un menu ou une boîte de dialogue pouvant être généré par l'élément courant.
  • Element.ariaHidden
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-hidden qui indique si l'élément est exposé à une API d'accessibilité.
  • Element.ariaKeyShortcuts
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-keyshortcuts qui indique les raccourcis clavier implémentés spécifiquement pour activer ou fournir le focus à un élément.
  • Element.ariaLabel
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-label qui définit une chaîne de caractères étant un libellé pour l'élément courant.
  • Element.ariaLevel
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-level qui définit le niveau hiérarchique de l'élément au sein d'une structure.
  • Element.ariaLive
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-live qui indique que l'élément sera mis à jour et qui décrit les types de mises à jour qui peuvent être attendues par les agents utilisateur, les outils d'assistance et l'utilisateur.
  • Element.ariaModal
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-modal qui indique si un élément est modal lorsqu'il est affiché.
  • Element.ariaMultiline
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-multiline qui indique si une zone de texte accepte une saisie sur plusieurs lignes ou sur une seule ligne.
  • Element.ariaMultiSelectable
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-multiselectable qui indique que la personne peut choisir plus d'un élément parmi les éléments descendants qui peuvent être sélectionnés.
  • Element.ariaOrientation
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-orientation qui indique si l'orientation de l'élément est horizontale, verticale ou inconnue voire ambigüe.
  • Element.ariaPlaceholder
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-placeholder qui définit une indication courte destinée à aider l'utilisateur à saisir une valeur lorsque le contrôle ne possède pas de valeur.
  • Element.ariaPosInSet
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-posinset qui définit l'index ou la position de l'élément courant dans l'ensemble ou l'arbre d'éléments.
  • Element.ariaPressed
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-pressed qui indique l'état actif/pressé des boutons.
  • Element.ariaReadOnly
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-readonly qui indique que l'élément ne peut pas être édité mais qu'il peut être utilisé sinon.
  • Element.ariaRelevant
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-relevant qui indique les notifications qui seront déclenchées par l'agent utilisateur lorsque l'arbre d'accessibilité d'une région interactive sera modifié. Cette propriété est utilisée afin de décrire quels changements d'une région aria-live sont pertinents et devraient être annoncés.
  • Element.ariaRequired
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-required qui indique que la saisie d'une utilisatrice ou d'un utilisateur est requise sur l'élément avant qu'un formulaire puisse être envoyé.
  • Element.ariaRoleDescription
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-roledescription qui définit une description compréhensible par un humain, adaptée par l'autrice ou l'auteur du document pour le rôle de l'élément courant.
  • Element.ariaRowCount
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-rowcount qui définit le nombre total de lignes dans un tableau, une grille ou une grille arborescente.
  • Element.ariaRowIndex
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-rowindex qui définit l'index ou la position de la ligne de l'élément par rapport au nombre total de lignes dans le tableau, la grille ou la grille arborescente.
  • Element.ariaRowIndexText
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-rowindextext qui définit un libellé alternatif à aria-rowindex, compréhensible par un humain.
  • Element.ariaRowSpan
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-rowspan qui définit le nombre de lignes sur lesquelles s'étend une cellule dans un tableau, une grille ou une grille arborescente.
  • Element.ariaSelected
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-selected qui indique l'état de sélection pour les éléments qui peuvent être sélectionnés.
  • Element.ariaSetSize
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-setsize qui définit le nombre d'objets dans l'ensemble d'éléments d'une liste ou d'un arbre.
  • Element.ariaSort
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-sort qui indique si les objets d'un tableau ou d'une grille sont triés par ordre croissant ou décroissant.
  • Element.ariaValueMax
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-valueMax qui définit la valeur maximale autorisée pour un élément d'interface utilisateur décrivant un intervalle.
  • Element.ariaValueMin
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-valueMin qui définit la valeur minimale autorisée pour un élément d'interface utilisateur décrivant un intervalle.
  • Element.ariaValueNow
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-valueNow qui définit la valeur courante d'un élément d'interface utilisateur décrivant un intervalle.
  • Element.ariaValueText
    • : Une chaîne de caractères DOMString qui reflète l'attribut aria-valuetext qui définit une alternative textuelle à aria-valuenow compréhensible par un humain.

Gestionnaires d'évènements

  • Element.onfullscreenchange
    • : Un gestionnaire d'évènement pour l'évènement fullscreenchange qui est envoyé lorsque l'élément passe en mode plein écran ou sort de celui-ci. Cet évènement peut être utilisé pour surveiller les transitions entre les deux modes mais aussi pour surveiller les modifications inattendues comme lorsque l'application s'exécute en arrière-plan.
  • Element.onfullscreenerror
    • : Un gestionnaire d'évènement pour fullscreenerror qui est envoyé lorsqu'une erreur se produit lors du passage au mode plein écran.

Méthodes

Element hérite des méthodes fournit par la classe parente Node et de sa classe parente avant elle : EventTarget.

Évènements

On peut écouter ces évènements en utilisant la méthode addEventListener() ou en affectant un gestionnaire d'évènement à la propriété onnomevenement de cette interface.

  • cancel

    • : Déclenché sur un élément <dialog> lorsque la personne indique au navigateur le souhait de fermer la boîte de dialogue courante. Un navigateur pourra par exemple déclencher cet évènement lors d'un appui sur la touche

      Echap

      ou lors d'un clic sur le bouton « Fermer cette boîte de dialogue » fourni par le navigateur. Également disponible via la propriété oncancel.

  • error

    • : Déclenché lors de l'échec du chargement d'une ressource ou lorsque celle-ci ne peut être utilisée. Cet évènement sera par exemple déclenché lors d'une erreur d'exécution d'un script ou lorsqu'une image ne peut être trouvée ou est invalide. Également disponible via la propriété onerror.
  • scroll

    • : Déclenché lors du défilement de la vue du document ou d'un élément. Également disponible via la propriété onscroll.
  • select

    • : Déclenché lors de la sélection de texte. Également disponible via la propriété onselect.
  • show

    • : Déclenché lorsqu'un évènement contextmenu a été déclenché ou a bouillonné sur un élément qui dispose de l'attribut contextmenu attribute. {{deprecated_inline}} Également disponible via la propriété onshow.
  • wheel

    • : Déclenché lorsque l'utilisateur fait tourner la molette d'un appareil de pointage (généralement une souris). Également disponible via la propriété onwheel.

Évènements du presse-papiers

  • copy
    • : Déclenché lorsque l'utilisateur initie une action de copie via l'interface du navigateur. Également disponible via la propriété oncopy.
  • cut
    • : Déclenché lorsque l'utilisateur initie une action de coupe via l'interface du navigateur. Également disponible via la propriété oncut.
  • paste
    • : Déclenché lorsque l'utilisateur initie une action pour coller via l'interface du navigateur. Également disponible via la propriété onpaste.

Évènements de composition

Évènements pour le focus

  • blur
    • : Déclenché lorsqu'un élément a perdu le focus. Également disponible via la propriété onblur.
  • focus
    • : Déclenché lorsqu'un élément reçoit le focus. Également disponible via la propriété onfocus.
  • focusin
    • : Déclenché lorsqu'un élément s'apprête à recevoir le focus.
  • focusout
    • : Déclenché lorsqu'un élément s'apprête à perdre le focus.

Évènements relatifs au plein écran

Évènements relatifs au clavier

  • keydown
    • : Déclenché lors de l'appui sur une touche du clavier. Également disponible via la propriété onkeydown.
  • keypress
    • : Déclenché lorsqu'une touche produit un caractère lorsqu'elle est pressée. {{deprecated_inline}} Également disponible via la propriété onkeypress.
  • keyup
    • : Déclenché lorsqu'une touche est relâchée. Également disponible via la propriété onkeyup.

Évènements relatifs à la souris

  • auxclick
    • : Déclenché lorsqu'un bouton non primaire d'un appareil de pointage (c'est-à-dire tout bouton de la souris en dehors du bouton gauche) a été pressé puis relâché sur un élément. Également disponible via la propriété onauxclick.
  • click
    • : Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été pressé puis relâche sur un élément. Également disponible via la propriété onclick.
  • contextmenu
    • : Déclenché lorsqu'un utilisateur tente d'ouvrir un menu contextuel. Également disponible via la propriété oncontextmenu.
  • dblclick
    • : Déclenché lorsqu'un bouton d'un appareil de pointage (par exemple le bouton gauche de la souris) a été utilisé pour un double-clic sur un élément. Également disponible via la propriété ondblclick.
  • DOMActivate {{Deprecated_Inline}}
    • : Se produit lorsqu'un élément est activé, par exemple avec un clic de souris ou l'appui d'une touche.
  • mousedown
    • : Déclenché lorsqu'un bouton d'un appareil de pointage est pressé sur un élément. Également disponible via la propriété onmousedown.
  • mouseenter
    • : Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé pour arriver sur l'élément disposant du gestionnaire d'évènement. Également disponible via la propriété onmouseenter.
  • mouseleave
    • : Déclenché lorsque le pointeur d'un appareil de pointage (généralement une souris) est déplacée en dehors de l'élément qui dispose du gestionnaire d'évènement. Également disponible via la propriété onmouseleave.
  • mousemove
    • : Déclenché lorsqu'un appareil de pointage (généralement une souris) est déplacé sur un élément. Également disponible via la propriété onmousemove.
  • mouseout
    • : Déclenché lorsqu'un appareil de pointage (généralement une souris) se déplace pour quitter l'élément qui dispose du gestionnaire d'évènement (ou lorsque le pointeur quitte l'un des enfants de cet élément). Également disponible via la propriété onmouseout.
  • mouseover
    • : Déclenché lorsqu'un appareil de pointage arrive sur l'élément (ou l'un de ses enfants) qui dispose du gestionnaire d'évènement. Également disponible via la propriété onmouseover.
  • mouseup
    • : Déclenché lorsque le bouton d'un appareil de pointage est relâché pour un élément. Également disponible via la propriété onmouseup.
  • webkitmouseforcechanged
    • : Déclenché à chaque fois que la quantite dé pression change sur le pavé ou l'écran tactile.
  • webkitmouseforcedown
    • : Déclenché après l'évènement mousedown dès que suffisamment de pression a été appliquée pour qualifier ce clic de clic forcé.
  • webkitmouseforcewillbegin
    • : Déclenché avant l'évènement mousedown.
  • webkitmouseforceup
    • : Déclenché après l'évènement webkitmouseforcedown dès que suffisamment de pression a été relâchée pour terminer le clic forcé.

Évènements tactiles

  • touchcancel
    • : Déclenché lorsqu'un ou plusieurs points de toucher ont été perturbés de façon spécifique à l'implémentation (par exemple lorsque trop de points de toucher ont été créés). Également disponible avec la propriété ontouchcancel.
  • touchend
    • : Déclenché lorsqu'un ou plusieurs points de toucher sont retirés de la surface tactile. Également disponible via la propriété ontouchend.
  • touchmove
    • : Déclenché lorsqu'un ou plusieurs points de toucher se déplacent sur la surface tactile. Également disponible via la propriété ontouchmove.
  • touchstart
    • : Déclenché lorsqu'un ou plusieurs points de toucher sont placés sur la surface tactile. Également disponible via la propriété ontouchstart.

Spécifications

{{Specifications}}

Compatibilité des navigateurs

{{Compat}}