Element est la classe de base la plus générale à partir de laquelle tous les objets d'un Document héritent. Il n'a que des méthodes et des propriétés communes à tous les types d'éléments. Les classes plus spécifiques héritent d'Element. Par exemple, l'interface HTMLElement est l'interface de base pour les éléments HTML, tandis que l'interface SVGElement est la base de tous les éléments SVG. La plupart des fonctionnalités sont spécifiées plus bas dans la hiérarchie des classes.
Les langages en dehors du domaine de la plate-forme Web, comme XUL via l'interface XULElement, implémentent également Element.
<div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/fr/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/fr/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/fr/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a></svg></div>
a:hover text { fill: #0095DD; pointer-events: all;}
Propriétés
Hérite des propriétés de son interface parent Node et, par extension, du parent de cette interface EventTarget. Il implémente les propriétés de ParentNode, ChildNode, NonDocumentTypeChildNode et Animatable.
Element.attributesLecture seule- Retourne un objet
NamedNodeMapcontenant les attributs assignés de l'élément HTML correspondant. Element.classListLecture seule- Retourne une
DOMTokenListcontenant la liste des attributs de classe. Element.className- est une
DOMStringreprésentant la classe de l'élément. Element.clientHeightLecture seule- Retourne un
Numberreprésentant la hauteur intérieure de l'élément. Element.clientLeftLecture seule- Retourne un
Numberreprésentant la largeur de la bordure gauche de l'élément. Element.clientTopLecture seule- Retourne un
Numberreprésentant la largeur de la bordure haut de l'élément. Element.clientWidthLecture seule- Retourne un
Numberreprésentant la largeur intérieure de l'élément. Element.computedNameLecture seule- Retourne une
DOMStringcontenant l'étiquette affichée pour l'accessibilité. Element.computedRoleLecture seule- Retourne une
DOMStringcontenant le rôle ARIA qui a été appliqué à un élément particulier. Element.id- est une
DOMStringreprésentant l'id (identifiant) de l'élément. Element.innerHTML- Est une
DOMStringreprésentant la partie locale du nom qualifié de l'élément. Element.localNameLecture seule- une
DOMStringreprésentant la partie locale du nom qualifié de l'élément. Element.namespaceURILecture seule- L'URI d'espace de noms de l'élément, ou
nulls'il n'est pas un espace de noms.
Note : Dans Firefox 3.5 et versions antérieures, les éléments HTML ne sont pas dans un espace de noms. Dans les versions ultérieures, les éléments HTML se trouvent dans l'espace de noms http://www.w3.org/1999/xhtml dans les arborescences HTML et XML.
NonDocumentTypeChildNode.nextElementSiblingLecture seule- est un
Elementsuivant immédiatement dans l'arbre celui donné, ounulls'il n'y a pas de noeud frère. Element.outerHTML- Est une
DOMStringreprésentant le balisage de l'élément, y compris son contenu. 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. Element.prefixLecture seule- Une
DOMStringreprésentant le préfixe de l'espace de noms de l'élément, ounullsi aucun préfixe n'est spécifié. NonDocumentTypeChildNode.previousElementSiblingLecture seule- Est un
Element, celui précédant immédiatement dans l'arbre l'élément donné, ounulls'il n'y a pas d'élément frère. Element.scrollHeightLecture seule- Retourne un
Numberreprésentant la hauteur de vue de défilement d'un élément. Element.scrollLeft- Est un
Numberreprésentant le décalage de défilement gauche de l'élément. Element.scrollLeftMaxLecture seule- Retourne un
Numberreprésentant le décalage maximum de défilement gauche possible pour l'élément. Element.scrollTop- Est un
Numberreprésentant le décalage de défilement haut de l'élément. Element.scrollTopMaxLecture seule- Retourne un
Numberreprésentant le décalage maximum de défilement haut possible pour l'élément. Element.scrollWidthLecture seule- Retourne un
Numberreprésentant la largeur de vue de défilement de l'élément. Element.shadowRootLecture seule- Renvoie la racine shadow la plus jeune hébergée par l'élément.
Element.slot- Renvoie le nom de l'emplacement du DOM shadow attaché à l'élément. Un emplacement (slot) est un espace réservé dans un composant web que les utilisateurs peuvent remplir avec leur propre balisage.
Element.tabStop- Est un
Booleanindiquant si l'élément peut recevoir un focus d'entrée via la touche de tabulation. Element.tagNameLecture seule- Retourne une
Stringavec le nom de la balise pour l'élément donné. Element.undoManagerLecture seule- Retourne le
UndoManagerassocié à l'élément. Element.undoScope- Est un
Booleanindiquant si l'élément est un hôte de portée d'annulation, ou non.
Note : DOM niveau 3 définit namespaceURI, localName et prefix sur l'interface Node. Dans DOM4, ils ont été déplacés dans Element.
Ce changement est implémenté dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.
Propriété inclue dans "Slotable"
L'interface Element inclut la propriété suivante, définie sur le "mixin" Slotable.
Slotable.assignedSlotLecture seule- renvoie un
HTMLSlotElementreprésentant le<slot>sur lequel le noeud est inséré.
Gestionnaire d'événements
Element.ongotpointercapture- Retourne le gestionnaire d'événements pour le type d'événements
gotpointercapture. Element.onlostpointercapture- Retourne le gestionnaire d'événements pour le type d'événements
lostpointercapture
Gestionnaire d'événement obsolète
Element.onwheel- Retourne le code du gestionnaire d'événements pour l'événement
wheel. Il est maintenant implémenté dansGlobalEventHandlers.
Méthodes
Hérite des méthodes de son parent Node et de son propre parent EventTarget, et implémente celles de ParentNode, ChildNode , NonDocumentTypeChildNode et Animatable.
EventTarget.addEventListener()- enregistre sur l'élément un gestionnaire d'évènements propre à un type d'évènements.
Element.attachShadow()- Attache un arbre DOM shadow à l'élément spécifié et renvoie une référence à sa
ShadowRoot(racine). Element.animate()- Une méthode raccourcie pour créer et exécuter une animation sur un élément. Renvoie l'instance d'objet Animation créée.
Element.closest()- Retourne l'
Elementqui 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. Element.createShadowRoot()- Crée un shadow DOM sur l'élément, le transforme en un hôte shadow. Renvoie un
ShadowRoot. EventTarget.dispatchEvent()- Répartit un événement sur ce noeud dans le DOM et renvoie un
Booleanqui indique qu'au-moins un gestionnaire ne l'a pas annulé. Element.getAnimations()- Renvoie un tableau d'objets Animation actuellement actifs sur l'élément.
Element.getAttribute()- Retrouve la valeur de l'attribut nommé depuis le noeud courant et le retourne comme un
Object. Element.getAttributeNames()- Retourne un tableau des noms d'attribut de l'élément courant.
Element.getAttributeNS()- 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
Object. Element.getAttributeNode()- Retrouve la représentation du noeud de l'attribut nommé depuis le noeud courant et le retourne comme un
Attr. Element.getAttributeNodeNS()- 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
Attr. Element.getBoundingClientRect()- Retourne la taille d'un élément et ses positions relatives au "viewport".
Element.getClientRects()- Retourne une collection de rectangles qui indiquent les rectangles de délimitation pour chaque ligne de texte dans un client.
Element.getElementsByClassName()- Retourne une
HTMLCollectionqui contient tous les descendants de l'élément courant qui possèdent la liste des classes donnée dans le paramètre. Element.getElementsByTagName()- Renvoie une
HTMLCollectioncontenant tous les éléments descendants, d'un nom de tag particulier, de l'élément en cours. Element.getElementsByTagNameNS()- Renvoie une
HTMLCollectioncontenant tous les éléments descendants, d'un nom de balise particulier et d'un espace de nom, de l'élément en cours. Element.hasAttribute()- Retourne un
Booleanindiquant si l'élément a un attribut spécifié ou non. Element.hasAttributeNS()- Retourne un
Booleanindiquant si l'élément a un attribut spécifié, dans l'espace de noms spécifié, ou non. Element.hasAttributes()- Retourne un
Booleanindiquant si l'élément a un ou plusieurs attributs HTML présents. Element.insertAdjacentElement- Insère un noeud d'élément donné à la position donnée par rapport à l'élément sur lequel il a été invoqué.
Element.insertAdjacentHTML- Analyse le texte au format HTML ou XML et insère les nœuds résultants dans l'arborescence dans la position indiquée.
Element.insertAdjacentText- Insère un noeud de texte donné à la position donnée par rapport à l'élément qui l'invoque.
Element.matches()- Retourne un
Booleanindiquant si l'élément serait sélectionné ou non par la chaîne de sélection spécifiée. Element.querySelector()- Retourne le premier
Nodecorrespondant à la chaîne du sélecteur spécifiée par rapport à l'élément. Element.querySelectorAll- Retourne une
NodeListdes noeuds qui correspondent à la chaîne du sélecteur par rapport à l'élément. Element.releasePointerCapture- Relâche (arrête) la capture de pointeur précédemment définie pour un
événement pointeurspécifique. ChildNode.remove()- Supprime l'élément de la liste des enfants de son parent.
Element.removeAttribute()- Supprime l'attribut nommé du noeud courant.
Element.removeAttributeNS()- Supprime l'attribut avec le nom et l'espace de nom spécifiés du noeud actuel.
Element.removeAttributeNode()- Supprime la représentation du noeud de l'attibut nommé du noeud actuel.
EventTarget.removeEventListener()- Supprime un écouteur d'événement de l'élément.
Element.requestFullscreen()- Demande de manière asynchrone au navigateur de mettre l'élément en plein écran.
Element.requestPointerLock()- Permet de demander de manière asynchrone que le pointeur soit verrouillé sur l'élément donné.
Element.scrollIntoView()- Fait défiler la page jusqu'à ce que l'élément entre dans la vue.
Element.setAttribute()- Définit la valeur d'un attribut nommé du nœud actuel.
Element.setAttributeNS()- Définit la valeur de l'attribut avec le nom et l'espace de noms spécifiés, à partir du nœud actuel.
Element.setAttributeNode()- Définit la représentation de noeud de l'attribut nommé à partir du noeud actuel.
Element.setAttributeNodeNS()- 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.
Element.setCapture()- Configure la capture d'événements de souris, en redirigeant tous les événements de la souris vers cet élément.
Element.setPointerCapture()- Désigne un élément spécifique en tant que cible de capture des futurs événements de pointeur.
Evénements
Ecoute ces événements en utilisant addEventListener() ou en assignant un écouteur d'événement (event listener) au oneventname propriété de cette interface.
cancel- Déclenche sur
<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 Esc ou clique sur le bouton "Ferme le dialogue" qui fait partie de l'interface utilisateur du navigateur .
Aussi disponible via la propriétéoncancel. -
Clipboard events
copy- Déclenché lorsque l'utilisateur lance une action de copie via l'interface utilisateur du navigateur.
Aussi disponible via la propiétéoncopy. cut- Déclenché lorsque l'utilisateur lance une action de couper via l'interface utilisateur du navigateur.
Aussi disponible via la propriétéoncut. paste- Déclenché lorsque l'utilisateur lance une action de coller via l'interface utilisateur du navigateur.
Aussi disponible via la propriétéonpaste.
Spécifications
| Spécification | Statut | Commentaire |
|---|---|---|
| Web Animations | Version de travail | Ajoute la méthode getAnimations(). |
| UndoManager and DOMTransaction La définition de 'Element' dans cette spécification. |
Brouillon de l'éditeur | Ajoute les propriétés undoScope et undoManager. |
| Pointer Events – Level 2 La définition de 'Element' dans cette spécification. |
Version de travail | Ajoute les gestionnaires d'événements suivants : ongotpointercapture etonlostpointercapture.Ajoute les méthodes suivantes : setPointerCapture() et releasePointerCapture(). |
| Pointer Events La définition de 'Element' dans cette spécification. |
Recommendation | Ajoute les gestionnaires d'événements suivants : ongotpointercapture et onlostpointercapture.Ajoute les méthodes suivantes : setPointerCapture() et releasePointerCapture(). |
| Selectors API Level 1 La définition de 'Element' dans cette spécification. |
Obsolete | Ajoute les méthodes suivantes : querySelector() et querySelectorAll(). |
| Pointer Lock La définition de 'Element' dans cette spécification. |
Candidat au statut de recommandation | Ajoute la méthoderequestPointerLock(). |
| Fullscreen API La définition de 'Element' dans cette spécification. |
Standard évolutif | Ajoute la méthode requestFullscreen(). |
| DOM Parsing and Serialization La définition de 'Element' dans cette spécification. |
Version de travail | Ajoute les propriétés suivantes : innerHTML et outerHTML.Ajoute les méthodes suivantes : insertAdjacentHTML(). |
| CSS Object Model (CSSOM) View Module La définition de 'Element' dans cette spécification. |
Version de travail | Ajoute les propriétés suivantes : scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth et clientHeight.Ajoute les méthodes suivantes : getClientRects(), getBoundingClientRect() et scrollIntoView(). |
| Element Traversal Specification La définition de 'Element' dans cette spécification. |
Obsolete | Ajoute l'héritage de l'interface ElementTraversal. |
| DOM La définition de 'Element' dans cette spécification. |
Standard évolutif | Supprime les méthodes suivantes : closest(), setIdAttribute(), setIdAttributeNS(), et setIdAttributeNode().Supprime la propriété schemaTypeInfo.Modifie la valeur retournée de getElementsByTag() et getElementsByTagNS().Déplace hasAttributes() de l'interface Node ici.Insère insertAdjacentElement() et insertAdjacentText(). |
| Document Object Model (DOM) Level 3 Core Specification La définition de 'Element' dans cette spécification. |
Obsolete | Ajoute les méthodes suivantes : setIdAttribute(), setIdAttributeNS() et setIdAttributeNode(). Ces méthodes n'ont jamais été implémentées et ont été supprimées dans des spécifications ultérieures.Ajoute la propriété schemaTypeInfo. Cette propriété n'a jamais été implémentée et a été supprimée dans des spécificationq ultérieures. |
| Document Object Model (DOM) Level 2 Core Specification La définition de 'Element' dans cette spécification. |
Obsolete | La méthode normalize() a été déplacée vers Node. |
| Document Object Model (DOM) Level 1 Specification La définition de 'Element' dans cette spécification. |
Obsolete | Définition initiale. |
Compatibilité des navigateurs
Nous convertissons les données de compatibilité dans un format JSON.
Ce tableau de compatibilité utilise encore l'ancien format
car nous n'avons pas encore converti les données qu'il contient.
Vous pouvez nous aider en contribuant !
| Fonctionnalité | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Oui) | 1.0 (1.7 ou moins) | (Oui) | (Oui) | 1.0 |
children |
(Oui) | (Oui) | 3.0 (1.9) | 7.0 with a significant bug [1] 9.0 according to the spec |
(Oui) | Pas de support |
childElementCount, nextElementSibling, previousElementSibling |
(Oui) | (Oui) | 3.5 (1.9.1) | 9.0 | (Oui) | (Oui) |
firstElementChild, lastElementChild |
(Oui) | (Oui) | 3.0 (1.9) | 9.0 | (Oui) | (Oui) |
classList |
(Oui) | (Oui) | 3.6 (1.9.2) | (Oui) | (Oui) | |
outerHTML |
(Oui) | (Oui) | 11 (11) | (Oui) | (Oui) | (Oui) |
clientLeft, clientTop |
(Oui) | (Oui) | 3.5 (1.9.1) | (Oui) | (Oui) | (Oui) |
getBoundingClientRect(), getClientRects() |
(Oui) | (Oui) | 3.0 (1.9) | (Oui) | (Oui) | (Oui) |
querySelector(), querySelectorAll() |
1.0 | (Oui) | 3.5 (1.9.1) | 8.0 | 10.0 | 3.2 (525.3) |
insertAdjacentHTML() |
1.0 | (Oui) | 8 (8) | 4.0 | 7.0 | 4.0 (527) |
setCapture() |
Pas de support | Pas de support | 4.0 (2) | Pas de support | Pas de support | Pas de support |
oncopy, oncut, onpaste |
Pas de support | Pas de support | 3.0 (1.9) | (Oui) | Pas de support | |
onwheel |
Pas de support | (Oui) | 17 (17) | Pas de support | Pas de support | Pas de support |
ongotpointercapture, onlostpointercapture, setPointerCapture(), and releasePointerCapture() |
52.0 [4] | (Oui) | (Oui) [3] | 10.0 | Pas de support | Pas de support |
matches() |
(Oui) with the non-standard name webkitMatchesSelector |
(Oui) webkit ms | 3.6 (1.9.2) with the non-standard name mozMatchesSelector34 (34) with the standard name |
9.0 with the non-standard name msMatchesSelector |
11.5 with the non-standard name oMatchesSelector15.0 with the non-standard name webkitMatchesSelector |
5.0 with the non-standard name webkitMatchesSelector |
requestPointerLock() |
16.0 webkit, behind an about:flags 22.0 webkit (with special cases, progressively lifted see [2]) |
(Oui) | 14 (14)moz | Pas de support | Pas de support | Pas de support |
requestFullscreen() |
14.0 webkit | (Oui) | 10 (10) moz | 11.0 ms | 12.10 15.0 webkit |
5.1 webkit |
undoManager and undoScope |
Pas de support | Pas de support | (Oui) (behind the dom.undo_manager.enabled pref) |
Pas de support | Pas de support | Pas de support |
attributes |
? | Pas de support | 22 (22) Before this it was available via the Node interface that any element inherits. |
? | ? | ? |
scrollTopMax() and scrollLeftMax() |
Pas de support | Pas de support | 16 (16) | Pas de support | Pas de support | Pas de support |
closest() |
? | (Oui) | 35 (35) | ? | ? | ? |
hasAttributes() |
(Oui) | Pas de support | 1.0 (1.7 ou moins) (on the Node interface)35 (35) (on this interface |
(Oui) | (Oui) | (Oui) |
insertAdjacentElement(), insertAdjacentText() |
(Oui) | Pas de support | 48.0 (48.0) | ? | (Oui) | (Oui) |
assignedSlot, attatchShadow, shadowRoot, and slot |
53 | Pas de support | ? | ? | ? | ? |
computedRole and computedName |
41[4] | ? | ? | ? | 28[4] | ? |
| Fonctionnalité | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | 1.0 | (Oui) | 1.0 (1) | (Oui) | (Oui) | 1.0 | ||
scrollTopMax() and scrollLeftMax() |
Pas de support | Pas de support | 16.0 (16) | Pas de support | Pas de support | Pas de support | ||
closest() |
? | (Oui) | 35.0 (35) | ? | ? | ? | ||
hasAttributes() |
(Oui) | Pas de support | 1.0 (1.0) (on the Node interface)35.0 (35) (on this interface |
(Oui) | (Oui) | (Oui) | ||
insertAdjacentElement(), insertAdjacentText() |
(Oui) | (Oui) | 48.0 (48.0) | ? | (Oui) | (Oui) | ||
assignedSlot, attatchShadow, shadowRoot, and slot |
Pas de support | 53.0 | Pas de support | ? | ? | ? | ? | 53 |
computedRole and computedName |
Pas de support | Pas de support | ? | ? | ? | 28[4] | ? | Pas de support |
[1] Internet Explorer 7 et 8 retourne incorrectement les commentaires dans le cadre des enfants d'un élément. Ceci est corrigé dans Internet Explorer 9 et versions ultérieures.
[2] Chrome 16 permet webkitRequestPointerLock() uniquement en plein écran ; Chrome 21 pour un site web de confiance (permission demandée) ; Chrome 22 autorise par défaut pour tous les documents de même origine ; Chrome 23 autorise dans le bac à sable <iframe> si la valeur non-standard webkit-allow-pointer-lock est définie dans l'attribut sandbox.
[3] Implémentation retiré. Voir bug 1166347.
[4] Derrière une balise (flag).
Devrait figurer sur une page traitant de NodeList ; item: Retrouve un nœud dans une <code>NodeList</code> par son indice. (DOM Core, ne fait pas partie de l'interface <code>Element</code>) ?? ; supports: Teste si cette implémentation du DOM gère une fonctionnalité particulière. (DOM Core)