---
title: element
slug: Web/API/Element
tags:
  - API
  - DOM
  - Elements
  - Interface
  - Reference
  - Web API
translation_of: Web/API/Element
---
<p>{{APIRef("DOM")}}</p>

<p><strong><code>Element</code></strong> est la classe de base la plus générale à partir de laquelle tous les objets d'un {{domxref("Document")}} héritent. <span>Il n'a que des méthodes et des propriétés communes à tous les types d'éléments.</span> <span>Les classes plus spécifiques héritent d'<code>Element</code>.</span> <span>Par exemple, l'interface {{domxref("HTMLElement")}} est l'interface de base pour les éléments HTML, tandis que l'interface {{domxref ("SVGElement")}} est la base de tous les éléments SVG.</span> <span>La plupart des fonctionnalités sont spécifiées plus bas dans la hiérarchie des classes.</span></p>

<p>Les langages en dehors du domaine de la plate-forme Web, comme XUL via l'interface <code>XULElement</code>, implémentent également <code>Element</code>.</p>

<p>{{InheritanceDiagram}}</p>

<h2 id="Propriétés">Propriétés</h2>

<p><em><span>Hérite des propriétés de son interface parent {{domxref("Node")}} et, par extension, du parent de cette interface {{domxref("EventTarget")}}.</span> <span>Il implémente les propriétés de {{domxref("ParentNode")}}, </span></em> <em>{{domxref("ChildNode")}},</em> <em><span> {{domxref("NonDocumentTypeChildNode")}} et {{domxref("Animatable")}}.</span></em></p>

<dl>
 <dt>{{domxref("Element.attributes")}} {{readOnlyInline}}</dt>
 <dd>Retourne un objet {{domxref("NamedNodeMap")}} contenant les attributs assignés de l'élément HTML correspondant.</dd>
 <dt>{{domxref("Element.classList")}} {{readOnlyInline}}</dt>
 <dd>Retourne une {{domxref("DOMTokenList")}} contenant la liste des attributs de classe.</dd>
 <dt>{{domxref("Element.className")}}</dt>
 <dd>est une {{domxref("DOMString")}} représentant la classe de l'élément.</dd>
 <dt>{{domxref("Element.clientHeight")}} {{experimental_inline}} {{readOnlyInline}}</dt>
 <dd>Retourne un {{jsxref("Number")}}  représentant la hauteur intérieure de l'élément.</dd>
 <dt>{{domxref("Element.clientLeft")}} {{readOnlyInline}}</dt>
 <dd>Retourne un {{jsxref("Number")}}  représentant la largeur de la bordure gauche de l'élément.</dd>
 <dt>{{domxref("Element.clientTop")}} {{readOnlyInline}}</dt>
 <dd>Retourne un {{jsxref("Number")}} représentant la largeur de la bordure haut de l'élément.</dd>
 <dt>{{domxref("Element.clientWidth")}} {{readOnlyInline}}</dt>
 <dd>Retourne un {{jsxref("Number")}} représentant la largeur intérieure de l'élément.</dd>
 <dt>{{domxref("Element.computedName")}} {{readOnlyInline}}</dt>
 <dd>Retourne une {{domxref("DOMString")}}  contenant l'étiquette affichée pour l'accessibilité.</dd>
 <dt>{{domxref("Element.computedRole")}} {{readOnlyInline}}</dt>
 <dd>Retourne une {{domxref("DOMString")}} contenant le rôle ARIA qui a été appliqué à un élément particulier.</dd>
 <dt>{{domxref("Element.id")}}</dt>
 <dd>est une {{domxref("DOMString")}} représentant l'id <em>(identifiant)</em> de l'élément.</dd>
 <dt>{{domxref("Element.innerHTML")}}</dt>
 <dd>Est une {{domxref("DOMString")}} représentant la partie locale du nom qualifié de l'élément.</dd>
 <dt>{{ domxref("Element.localName") }} {{readOnlyInline}}</dt>
 <dd>une {{domxref("DOMString")}} représentant la partie locale du nom qualifié de l'élément.</dd>
 <dt>{{domxref("Element.namespaceURI")}} {{readonlyInline}}</dt>
 <dd>L'URI d'espace de noms de l'élément, ou <code>null</code> s'il n'est pas un espace de noms.</dd>
</dl>

<div class="note">
<p><strong>Note :</strong> Dans Firefox 3.5 et versions antérieures, les éléments HTML ne sont pas dans un espace de noms. <span>Dans les versions ultérieures, les éléments HTML se trouvent dans l'espace de noms <code><a class="linkification-ext external external-icon" href="http://www.w3.org/1999/xhtml" title="Linkification: http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> <span lang="fr"><span> dans les arborescences HTML et XML. </span></span> {{gecko_minversion_inline("1.9.2")}}</span></p>
</div>

<dl>
 <dt>{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt>
 <dd>est un {{domxref("Element")}} suivant immédiatement dans l'arbre celui donné, ou <code>null</code> s'il n'y a pas de noeud frère.</dd>
 <dt>{{domxref("Element.outerHTML")}}</dt>
 <dd>Est une {{domxref("DOMString")}} représentant le balisage de l'élément, y compris son contenu. <span>Lorsqu'il est utilisé en tant qu'initiateur, remplace l'élément par des nœuds analysés à partir de la chaîne donnée.</span></dd>
 <dt>{{DOMxRef("Element.part")}}</dt>
 <dd>Représente le ou les identifiants <code>part</code> de l'élément (c'est-à-dire définis en utilisant l'attribut <code>part</code>), retournés dans un {{domxref("DOMTokenList")}}.</dd>
 <dt>{{domxref("Element.prefix")}} {{readOnlyInline}}</dt>
 <dd>Une {{domxref("DOMString")}} représentant le préfixe de l'espace de noms de l'élément, ou <code>null</code> si aucun préfixe n'est spécifié.</dd>
 <dt>{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt>
 <dd>Est un {{domxref("Element")}}, celui précédant immédiatement dans l'arbre l'élément donné, ou <code>null</code> s'il n'y a pas d'élément frère.</dd>
 <dt>{{domxref("Element.scrollHeight")}} {{readOnlyInline}}</dt>
 <dd>Retourne un {{jsxref("Number")}} représentant <span class="short_text" id="result_box" lang="fr"><span>la hauteur de vue de défilement d'un élément.</span></span></dd>
 <dt>{{domxref("Element.scrollLeft")}}</dt>
 <dd>Est un {{jsxref("Number")}} représentant <span class="short_text" id="result_box" lang="fr"><span>le décalage de défilement gauche de l'élément.</span></span></dd>
 <dt>{{domxref("Element.scrollLeftMax")}} {{non-standard_inline}} {{readOnlyInline}}</dt>
 <dd>Retourne un {{jsxref("Number")}}  représentant le décalage maximum de défilement gauche possible pour l'élément.</dd>
 <dt>{{domxref("Element.scrollTop")}}</dt>
 <dd>Est un {{jsxref("Number")}} représentant le décalage de défilement haut de l'élément.</dd>
 <dt>{{domxref("Element.scrollTopMax")}} {{non-standard_inline}} {{readOnlyInline}}</dt>
 <dd>Retourne un {{jsxref("Number")}} représentant le décalage maximum de défilement haut possible pour l'élément.</dd>
 <dt>{{domxref("Element.scrollWidth")}} {{readOnlyInline}}</dt>
 <dd>Retourne un {{jsxref("Number")}} représentant la largeur de vue de défilement de l'élément.</dd>
 <dt>{{domxref("Element.shadowRoot")}} {{readOnlyInline}}</dt>
 <dd>Renvoie la racine shadow la plus jeune hébergée par l'élément.</dd>
 <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt>
 <dd>Retourne la racine fantôme qui a l'élément pour hôte, qu'elle soit ouverte ou fermée. <strong>Disponible seulement pour les <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd>
 <dt>{{domxref("Element.slot")}} {{experimental_inline}}</dt>
 <dd>Renvoie le nom de l'emplacement du DOM shadow attaché à l'élément. <span>Un emplacement (<em>slot</em>) est un espace réservé dans un composant web que les utilisateurs peuvent remplir avec leur propre balisage.</span></dd>
 <dt>{{domxref("Element.tabStop")}} {{non-standard_inline}}</dt>
 <dd>Est un {{jsxref("Boolean")}} indiquant si l'élément peut recevoir un focus d'entrée via la touche de tabulation.</dd>
 <dt>{{domxref("Element.tagName")}} {{readOnlyInline}}</dt>
 <dd>Retourne une {{domxref("String")}} avec le nom de la balise pour l'élément donné.</dd>
 <dt>{{domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}</dt>
 <dd>Retourne le {{domxref("UndoManager")}} associé à l'élément.</dd>
 <dt>{{domxref("Element.undoScope")}} {{experimental_inline}}</dt>
 <dd>Est un {{jsxref("Boolean")}} indiquant si l'élément <span class="short_text" id="result_box" lang="fr"><span>est un hôte de portée d'annulation, ou non.</span></span></dd>
</dl>

<div class="note">
<p><strong>Note :</strong>  DOM niveau 3 définit <code>namespaceURI</code>, <code>localName</code> et <code>prefix </code>sur l'interface {{domxref("Node")}}. Dans DOM4, ils ont été déplacés dans <code>Element</code>.</p>

<p>Ce changement est implémenté dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.</p>
</div>

<h3 id="Propriété_inclue_dans_Slotable">Propriété inclue dans "Slotable"</h3>

<p><em>L'interface <code>Element</code> inclut la propriété suivante, définie sur le "mixin" </em> <em>{{domxref("Slotable")}}. </em></p>

<dl>
 <dt>{{domxref("Slotable.assignedSlot")}}{{readonlyInline}}</dt>
 <dd>renvoie un {{domxref("HTMLSlotElement")}} représentant le {{htmlelement("slot")}} sur lequel le noeud est inséré.</dd>
</dl>

<h2 id="M.C3.A9thodes" name="M.C3.A9thodes">Méthodes</h2>

<p><em>Hérite des méthodes de son parent {{domxref ("Node")}} et de son propre parent {{domxref ("EventTarget")}}, et implémente celles de {{domxref("ParentNode")}}, </em> <em><em>{{domxref("ChildNode")}}</em></em> <em><span lang="fr">, {{domxref("NonDocumentTypeChildNode")}} et {{domxref("Animatable")}}.</span></em></p>

<dl>
 <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
 <dd>enregistre sur l'élément un gestionnaire d'évènements propre à un type d'évènements.</dd>
 <dt>{{domxref("Element.attachShadow()")}}</dt>
 <dd>Attache un arbre DOM shadow à l'élément spécifié et renvoie une référence à sa {{domxref("ShadowRoot")}} (<em>racine</em>).</dd>
 <dt>{{domxref("Element.animate()")}} {{experimental_inline}}</dt>
 <dd>Une méthode raccourcie pour créer et exécuter une animation sur un élément. <span class="short_text" id="result_box" lang="fr"><span>Renvoie l'instance d'objet Animation créée.</span></span></dd>
 <dt>{{domxref("Element.closest()")}}</dt>
 <dd>Retourne l'{{domxref("Element")}} qui est l'ancêtre le plus proche de l'élément courant (ou l'élément courant lui-même) qui correspond aux sélecteurs donnés dans le paramètre.</dd>
 <dt>{{domxref("Element.createShadowRoot()")}} {{experimental_inline}} {{deprecated_inline()}}</dt>
 <dd>Crée un <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> sur l'élément, <span class="short_text" id="result_box" lang="fr"><span>le transforme en un hôte fantôme.</span> <span>Renvoie un </span></span> {{domxref("ShadowRoot")}}.</dd>
 <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt>
 <dd>Retourne une interface {{DOMxRef("StylePropertyMapReadOnly")}} fournissant une représentation en lecture seule d'un bloc de déclaration de règles CSS. Il s'agit d'une alternative à {{DOMxRef("CSSStyleDeclaration")}}.</dd>
 <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt>
 <dd>Répartit un évènement sur ce noeud dans le DOM et renvoie un {{jsxref("Boolean")}} qui indique qu'au-moins un gestionnaire ne l'a pas annulé.</dd>
 <dt>{{domxref("Element.getAnimations()")}} {{experimental_inline}}</dt>
 <dd>Renvoie un tableau d'objets Animation actuellement actifs sur l'élément.</dd>
 <dt>{{domxref("Element.getAttribute()")}}</dt>
 <dd>Retrouve la valeur de l'attribut nommé depuis le noeud courant et le retourne comme un {{jsxref("Object")}}.</dd>
 <dt>{{domxref("Element.getAttributeNames()")}}</dt>
 <dd>Retourne un tableau des noms d'attribut de l'élément courant.</dd>
 <dt>{{domxref("Element.getAttributeNS()")}}</dt>
 <dd>Retrouve la valeur de l'attribut avec le nom spécifié et l'espace de noms, depuis le noeud courant, et le retourne comme un {{jsxref("Object")}}.</dd>
 <dt>{{domxref("Element.getBoundingClientRect()")}}</dt>
 <dd>Retourne la taille d'un élément et ses positions relatives au "viewport".</dd>
 <dt>{{domxref("Element.getClientRects()")}}</dt>
 <dd>Retourne une collection de rectangles qui indiquent les rectangles de délimitation pour chaque ligne de texte dans un client.</dd>
 <dt>{{domxref("Element.getElementsByClassName()")}}</dt>
 <dd>Retourne une {{domxref("HTMLCollection")}} qui contient tous les descendants de l'élément courant qui possèdent la liste des classes donnée dans le paramètre.</dd>
 <dt>{{domxref("Element.getElementsByTagName()")}}</dt>
 <dd>Renvoie une {{domxref ("HTMLCollection")}} contenant tous les éléments descendants, d'un nom de tag particulier, de l'élément en cours.</dd>
 <dt>{{domxref("Element.getElementsByTagNameNS()")}}</dt>
 <dd>Renvoie une {{domxref ("HTMLCollection")}} contenant tous les éléments descendants, d'un nom de balise particulier et d'un espace de nom, de l'élément en cours.</dd>
 <dt>{{domxref("Element.hasAttribute()")}}</dt>
 <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un attribut spécifié ou non.</dd>
 <dt>{{domxref("Element.hasAttributeNS()")}}</dt>
 <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un attribut spécifié, dans l'espace de noms spécifié, ou non.</dd>
 <dt>{{domxref("Element.hasAttributes()")}}</dt>
 <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément a un ou plusieurs attributs HTML présents.</dd>
 <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt>
 <dd>Indique si l'élément sur lequel la méthode est invoquée a  une capture de pointeur pour le pointeur spécifié par son identifiant.</dd>
 <dt>{{domxref("Element.insertAdjacentElement")}}</dt>
 <dd>Insère un noeud d'élément donné à la position donnée par rapport à l'élément sur lequel il a été invoqué.</dd>
 <dt>{{domxref("Element.insertAdjacentHTML")}}</dt>
 <dd>Analyse le texte au format HTML ou XML et insère les nœuds résultants dans l'arborescence dans la position indiquée.</dd>
 <dt>{{domxref("Element.insertAdjacentText")}}</dt>
 <dd>Insère un noeud de texte donné à la position donnée par rapport à l'élément qui l'invoque.</dd>
 <dt>{{domxref("Element.matches()")}}</dt>
 <dd>Retourne un {{jsxref("Boolean")}} indiquant si l'élément serait sélectionné ou non par la chaîne de sélection spécifiée.</dd>
 <dt>{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}</dt>
 <dd>Retourne un {{DOMxRef("CSSPseudoElement")}} représentant les pseudo-élément enfants correspondant au sélecteur de pseudo-élément fourni.</dd>
 <dt>{{domxref("Element.querySelector()")}}</dt>
 <dd>Retourne le premier {{domxref("Node")}} correspondant à la chaîne du sélecteur spécifiée par rapport à l'élément.</dd>
 <dt>{{domxref("Element.querySelectorAll")}}</dt>
 <dd>Retourne une {{domxref("NodeList")}} des noeuds qui correspondent à la chaîne du sélecteur par rapport à l'élément.</dd>
 <dt>{{domxref("Element.releasePointerCapture")}}</dt>
 <dd>Relâche (arrête) la capture de pointeur précédemment définie pour un {{domxref("PointerEvent","évènement pointeur")}} spécifique.</dd>
 <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt>
 <dd>Supprime l'élément de la liste des enfants de son parent.</dd>
 <dt>{{domxref("Element.removeAttribute()")}}</dt>
 <dd>Supprime l'attribut nommé du noeud courant.</dd>
 <dt>{{domxref("Element.removeAttributeNS()")}}</dt>
 <dd>Supprime l'attribut avec le nom et l'espace de nom spécifiés du noeud actuel.</dd>
 <dt>{{domxref("EventTarget.removeEventListener()")}}</dt>
 <dd>Supprime un écouteur d'évènement de l'élément.</dd>
 <dt>{{domxref("Element.requestFullscreen()")}} {{experimental_inline}}</dt>
 <dd>Demande de manière asynchrone au navigateur de mettre l'élément en plein écran.</dd>
 <dt>{{domxref("Element.requestPointerLock()")}} {{experimental_inline}}</dt>
 <dd>Permet de demander de manière asynchrone que le pointeur soit verrouillé sur l'élément donné.</dd>
 <dt>{{domxref("Element.scroll()")}}</dt>
 <dd>Défile vers les coordonnées fournises au sein d'un élément.</dd>
 <dt>{{domxref("Element.scrollBy()")}}</dt>
 <dd>Défile au sein d'un élément d'autant de pixels que demandé.</dd>
 <dt>{{domxref("Element.scrollIntoView()")}} {{experimental_inline}}</dt>
 <dd>Fait défiler la page jusqu'à ce que l'élément entre dans la vue.</dd>
 <dt>{{domxref("Element.scrollTo()")}}</dt>
 <dd>Défile vers les coordonnées fournises au sein d'un élément.</dd>
 <dt>{{domxref("Element.setAttribute()")}}</dt>
 <dd>Définit la valeur d'un attribut nommé du nœud actuel.</dd>
 <dt>{{domxref("Element.setAttributeNS()")}}</dt>
 <dd>Définit la valeur de l'attribut avec le nom et l'espace de noms spécifiés, à partir du nœud actuel.</dd>
 <dt>{{domxref("Element.setCapture()")}} {{non-standard_inline}}</dt>
 <dd>Configure la capture d'évènements de souris, en redirigeant tous les évènements de la souris vers cet élément.</dd>
 <dt>{{domxref("Element.setPointerCapture()")}}</dt>
 <dd>Désigne un élément spécifique en tant que cible de capture des futurs <a href="https://developer.mozilla.org/fr/docs/Web/API/Pointer_events">évènements de pointeur</a>.</dd>
 <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt>
 <dd>Alterne un attribut booléen sur l'élément spécifié, le supprimant s'il est présent et l'ajoutant s'il est absent.</dd>
 <dt>
 <h3 id="Méthodes_obsolètes"><span lang="fr"><span>Méthodes obsolètes</span></span></h3>
 </dt>
 <dt>{{domxref("Element.getAttributeNode()")}}{{obsolete_inline}}</dt>
 <dd>Retrouve la représentation du noeud de l'attribut nommé depuis le noeud courant et le retourne comme un {{domxref("Attr")}}.</dd>
 <dt>{{domxref("Element.getAttributeNodeNS()")}}{{obsolete_inline}}</dt>
 <dd>Retrouve la représentation du noeud de l'attibut avec le nom spécifié et l'espace de noms, depuis le noeud courant, et le retourne comme un {{domxref("Attr")}}.</dd>
 <dt>{{domxref("Element.removeAttributeNode()")}} {{obsolete_inline}}</dt>
 <dd>Supprime la représentation du noeud de l'attibut nommé du noeud actuel.</dd>
 <dt>{{domxref("Element.setAttributeNode()")}} {{obsolete_inline}}</dt>
 <dd>Définit la représentation de noeud de l'attribut nommé à partir du noeud actuel.</dd>
 <dt>{{domxref("Element.setAttributeNodeNS()")}} {{obsolete_inline}}</dt>
 <dd>Synchronise la représentation du nœud de l'attribut avec le nom et l'espace de noms spécifiés, à partir du nœud actuel.</dd>
</dl>

<h2 id="Évènements">Évènements</h2>

<p><span class="tlid-translation translation" lang="fr"><span title="">Ecoute ces évènements en utilisant</span></span> <code>addEventListener()</code> ou en assignant un <span class="tlid-translation translation" lang="fr"><span title="">écouteur d'évènement</span></span> (event listener) au <code>on<em>eventname</em></code> propriété de cette interface.</p>

<dl>
 <dt>{{domxref("Element/cancel_event", "cancel")}}</dt>
 <dd>Déclenche sur {{HTMLElement("dialog")}} lorsque l'utilisateur indique au navigateur qu'il souhaite fermer la boîte de dialogue en cours. Pour exemple, le navigateur peut déclencher cet évènement lorsque l'utilisateur appuie sur la touche <kbd>Esc</kbd> ou clique sur le bouton "Ferme le dialogue" <span class="tlid-translation translation" lang="fr"><span title="">qui fait partie de l'interface utilisateur du navigateur</span></span> .<br>
 Aussi disponible via la propriété {{domxref("GlobalEventHandlers/oncancel", "oncancel")}}.</dd>
 <dt>{{domxref("Element/error_event", "error")}}</dt>
 <dd>Déclenché quand le chargement d'une ressource échoue, ou qu'elle ne peut pas être utilisée. Par exemple, il sera déclenché si un script contient une erreur d'exécution ou une image ne peut être trouvée ou est invalide.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onerror", "onerror")}}.</dd>
 <dt>{{domxref("Element/scroll_event", "scroll")}}</dt>
 <dd>Déclenché quand la vue du document un élément a été défilé.<br>
 Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}.</dd>
 <dt>{{domxref("Element/select_event", "select")}}</dt>
 <dd>Déclenché quand une portion de texte a été sélectionnée.<br>
 Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}}.</dd>
 <dt>{{domxref("Element/show_event", "show")}}</dt>
 <dd>Déclenché quand un évènement {{domxref("Element/contextmenu_event", "contextmenu")}} est lui-même déclenché et bouillonne jusqu'à un élément ayant un attribut <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/html/Global_attributes/contextmenu">contextmenu</a></code>. {{deprecated_inline}}<br>
 Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}}.</dd>
 <dt>{{domxref("Element/wheel_event","wheel")}}</dt>
 <dd>Déclenché quand l'utilisateur tourne une molette sur un appareil avec pointeur (typiquement, une souris).<br>
 Il est aussi disponible via la propriété {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}}.</dd>
 <dt>
 <h3 id="Évènements_du_presse-papiers">Évènements du presse-papiers</h3>
 </dt>
 <dt>{{domxref("Element/copy_event", "copy")}}</dt>
 <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de copie via l'interface utilisateur du navigateur.</span></span><br>
 Aussi disponible via la propiété {{domxref("HTMLElement/oncopy", "oncopy")}}.</dd>
 <dt>{{domxref("Element/cut_event", "cut")}}</dt>
 <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de couper via l'interface utilisateur du navigateur.</span></span><br>
 Aussi disponible via la propriété {{domxref("HTMLElement/oncut", "oncut")}}.</dd>
 <dt>{{domxref("Element/paste_event", "paste")}}</dt>
 <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché lorsque l'utilisateur lance une action de coller via l'interface utilisateur du navigateur.</span></span><br>
 Aussi disponible via la propriété {{domxref("HTMLElement/onpaste", "onpaste")}}.</dd>
 <dt>
 <h3 id="Évènements_de_composition">Évènements de composition</h3>
 </dt>
 <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt>
 <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché quand un système de composition de </span></span>texte tel qu'un {{glossary("input method editor")}} complète ou annule la session actuelle de composition.</dd>
 <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt>
 <dd><span class="tlid-translation translation" lang="fr"><span title="">Déclenché quand un système de composition de </span></span>texte tel qu'un {{glossary("input method editor")}} démarre une nouvelle session de composition.</dd>
 <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt>
 <dd>Déclenché quand un nouveau caractère est reçu dans le contexte d'une session de composition de texte contrôlée par un système de composition de texte tel qu'un {{glossary("input method editor")}}.</dd>
 <dt>
 <h3 id="Évènements_de_focale">Évènements de focale</h3>
 </dt>
 <dt>{{domxref("Element/blur_event", "blur")}}</dt>
 <dd>Déclenché quand un élément a perdu la focale.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onblur", "onblur")}}.</dd>
 <dt>{{domxref("Element/focus_event", "focus")}}</dt>
 <dd>Déclenché quand un élément a obtenu la focale.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onfocus", "onfocus")}}.</dd>
 <dt>{{domxref("Element/focusin_event", "focusin")}}</dt>
 <dd>Déclenché quand un élément est sur le point d'obtenir la focale.</dd>
 <dt>{{domxref("Element/focusout_event", "focusout")}}</dt>
 <dd>Déclenché quand un élément est sur le point de perdre la focale.</dd>
 <dt>
 <h3 id="Évènements_de_plein_écran">Évènements de plein écran</h3>
 </dt>
 <dt>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</dt>
 <dd>Envoyé à un {{domxref("Element")}} quand il transite vers ou depuis un état de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br>
 Il est aussi disponible via la propriété {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}.</dd>
 <dt>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</dt>
 <dd>Envoyé à un <code>Element</code> si une erreur survient en tentant de passer vers ou de quitter le <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide">plein écran</a>.<br>
 Il est aussi disponible via la propriété {{domxref("Element.onfullscreenerror", "onfullscreenerror")}}.</dd>
 <dt>
 <h3 id="Évènements_de_clavier">Évènements de clavier</h3>
 </dt>
 <dt><code>{{domxref("Element/keydown_event", "keydown")}}</code></dt>
 <dd>Déclenché quand une touche est pressée.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}}.</dd>
 <dt><code>{{domxref("Element/keypress_event", "keypress")}}</code></dt>
 <dd>Déclenché quand une touche produit un caractère est pressée. {{deprecated_inline}}<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}}.</dd>
 <dt><code>{{domxref("Element/keyup_event", "keyup")}}</code></dt>
 <dd>Déclenché quand une touche est relâchée.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}}.</dd>
 <dt>
 <h3 id="Évènements_de_souris">Évènements de souris</h3>
 </dt>
 <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt>
 <dd>Déclenché quand un bouton secondaire d'un appareil de pointage (par exemple, tout bouton d'une souris autre que le gauche) est pressé et relâché sur le même élément.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}}.</dd>
 <dt>{{domxref("Element/click_event", "click")}}</dt>
 <dd>Déclenché quand un bouton d'un appareil de pointage (par exemple, le clic gauche d'une souris) est pressé et relâché sur le même élément.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onclick", "onclick")}}.</dd>
 <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt>
 <dd>Déclenché quand l'utilisateur tente d'ouvrir un menu contextuel.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}}.</dd>
 <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt>
 <dd>Déclenché quand un bouton d'un appareil de pointage (par exemple, le clic gauche d'une souris) est cliqué deux fois sur le même élément.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}}.</dd>
 <dt>{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}</dt>
 <dd>Déclenché quand un élément est activé, par exemple, par le biais d'un clic de souris ou d'une pression de touche sur un clavier.</dd>
 <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt>
 <dd>Déclenché quand un bouton d'un appareil de pointage est pressé sur un élément.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}}.</dd>
 <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt>
 <dd>Déclenché quand un appareil de pointage (généralement une souris) est déplacé à l'intérieur de l'élément sur lequel l'écouteur est attaché.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}}.</dd>
 <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt>
 <dd>Déclenché quand un appareil de pointage est déplacé à l'extérieur de l'élément sur lequel l'écouteur est attaché.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}}.</dd>
 <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt>
 <dd>Déclenché quand un appareil de pointage est déplacé au sein de l'élément sur lequel l'écouteur est attaché.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}}.</dd>
 <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt>
 <dd>Déclenché quand un appareil de pointage est déplacé à l'extérieur de l'élément sur lequel l'écouteur est attaché ou sur un de ses enfants.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}}.</dd>
 <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt>
 <dd>Déclenché quand un appareil de pointage est déplacé au sein de l'élément sur lequel l'écouteur est attaché ou sur un de ses enfants.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}}.</dd>
 <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt>
 <dd>Déclenché quand un bouton d'un appareil de pointage est relâché sur un élément.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}}.</dd>
 <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt>
 <dd>Déclenché à chaque fois que le niveau de pression sur un écran tactile change.</dd>
 <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt>
 <dd>Déclenché après l'évènement de pression de bouton d'un appareil de pointage à la condition qu'une pression suffisante ait été produite pour la qualifier de "clic forcé".</dd>
 <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt>
 <dd>Déclenché avant l'évènement {{domxref("Element/mousedown_event", "mousedown")}}.</dd>
 <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt>
 <dd>Déclenché après l'évènement {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} à la condition qu'une pression suffisamment en baisse ait été observée pour mettre fin au "clic forcé".</dd>
 <dt>
 <h3 id="Évènements_de_toucher">Évènements de toucher</h3>
 </dt>
 <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt>
 <dd>Déclenché quand un ou plusieurs points de toucher ont été altérés d'une manière relative à l'implantation (par exemple, trop de points de contacts ont été créés).<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}}.</dd>
 <dt>{{domxref("Element/touchend_event", "touchend")}}</dt>
 <dd>Déclenché quand un ou plusieurs points de toucher sont retirés de la surface tactile.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}}</dd>
 <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt>
 <dd>Déclenché quand un ou plusieurs points de toucher sont déplacés sur la surface tactile.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}}</dd>
 <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt>
 <dd>Déclenché quand un plusieurs points de toucher sont placés sur la surface tactile.<br>
 Il est aussi disponible via la propriété {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}}.</dd>
</dl>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaire</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("Web Animations", '', '')}}</td>
   <td>{{Spec2("Web Animations")}}</td>
   <td>Ajoute la méthode <code>getAnimations()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
   <td>{{Spec2('Undo Manager')}}</td>
   <td>Ajoute les propriétés <code>undoScope</code> et <code>undoManager</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td>
   <td>{{Spec2('Pointer Events 2')}}</td>
   <td>Ajoute les gestionnaires d'évènements suivants : <code>ongotpointercapture</code> et<code>onlostpointercapture</code>.<br>
    Ajoute les méthodes suivantes : <code>setPointerCapture()</code> et <code>releasePointerCapture()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
   <td>{{Spec2('Pointer Events')}}</td>
   <td>Ajoute les gestionnaires d'évènements suivants : <code>ongotpointercapture</code> et <code>onlostpointercapture</code>.<br>
    Ajoute les méthodes suivantes : <code>setPointerCapture()</code> et <code>releasePointerCapture()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
   <td>{{Spec2('Selectors API Level 1')}}</td>
   <td>Ajoute les méthodes suivantes : <code>querySelector()</code> et <code>querySelectorAll()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
   <td>{{Spec2('Pointer Lock')}}</td>
   <td>Ajoute la méthode<code>requestPointerLock()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
   <td>{{Spec2('Fullscreen')}}</td>
   <td>Ajoute la méthode <code>requestFullscreen().</code></td>
  </tr>
  <tr>
   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
   <td>{{Spec2('DOM Parsing')}}</td>
   <td>Ajoute les propriétés suivantes : <code>innerHTML</code> et <code>outerHTML</code>.<br>
    Ajoute les méthodes suivantes : <code>insertAdjacentHTML()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
   <td>{{Spec2('CSSOM View')}}</td>
   <td>Ajoute les propriétés suivantes : <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code> et <code>clientHeight</code>.<br>
    Ajoute les méthodes suivantes : <code>getClientRects()</code>, <code>getBoundingClientRect()</code> et <code>scrollIntoView()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
   <td>{{Spec2('Element Traversal')}}</td>
   <td>Ajoute l'héritage de l'interface {{domxref("ElementTraversal")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Supprime les méthodes suivantes : <code>closest()</code>, <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, et <code>setIdAttributeNode()</code>.<br>
    Supprime la propriété <code>schemaTypeInfo</code>.<br>
    Modifie la valeur retournée de <code>getElementsByTag()</code> et <code>getElementsByTagNS()</code>.<br>
    Déplace <code>hasAttributes()</code> de l'interface <code>Node</code> ici.<br>
    Insère<code>insertAdjacentElement()</code> et <code>insertAdjacentText()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}</td>
   <td>{{Spec2('DOM3 Core')}}</td>
   <td>Ajoute les méthodes suivantes : <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code> et <code>setIdAttributeNode()</code>. Ces méthodes n'ont jamais été implémentées et ont été supprimées dans des spécifications ultérieures.<br>
    Ajoute la propriété <code>schemaTypeInfo</code>. Cette propriété n'a jamais été implémentée et a été supprimée dans des spécificationq ultérieures.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}</td>
   <td>{{Spec2('DOM2 Core')}}</td>
   <td>La méthode <code>normalize()</code> a été déplacée vers {{domxref("Node")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("api.Element")}}</p>