element

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.attributes Lecture seule

Retourne un objet NamedNodeMap contenant les attributs assignés de l'élément HTML correspondant.

Element.classList Lecture seule

Retourne une DOMTokenList contenant la liste des attributs de classe.

Element.className

est une DOMString représentant la classe de l'élément.

Element.clientHeight Lecture seule

Retourne un Number  représentant la hauteur intérieure de l'élément.

Element.clientLeft Lecture seule

Retourne un Number  représentant la largeur de la bordure gauche de l'élément.

Element.clientTop Lecture seule

Retourne un Number représentant la largeur de la bordure haut de l'élément.

Element.clientWidth Lecture seule

Retourne un Number représentant la largeur intérieure de l'élément.

Element.computedName Lecture seule

Retourne une DOMString  contenant l'étiquette affichée pour l'accessibilité.

Element.computedRole Lecture seule

Retourne une DOMString contenant le rôle ARIA qui a été appliqué à un élément particulier.

Element.id

est une DOMString représentant l'id (identifiant) de l'élément.

Element.innerHTML

Est une DOMString représentant la partie locale du nom qualifié de l'élément.

Element.localName Lecture seule

une DOMString représentant la partie locale du nom qualifié de l'élément.

Element.namespaceURI Lecture seule

L'URI d'espace de noms de l'élément, ou null s'il n'est pas un espace de noms.

NonDocumentTypeChildNode.nextElementSibling Lecture seule

est un Element suivant immédiatement dans l'arbre celui donné, ou null s'il n'y a pas de noeud frère.

Element.outerHTML

Est une DOMString repré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.prefix Lecture seule

Une DOMString représentant le préfixe de l'espace de noms de l'élément, ou null si aucun préfixe n'est spécifié.

NonDocumentTypeChildNode.previousElementSibling Lecture seule

Est un Element, celui précédant immédiatement dans l'arbre l'élément donné, ou null s'il n'y a pas d'élément frère.

Element.scrollHeight Lecture seule

Retourne un Number représentant la hauteur de vue de défilement d'un élément.

Element.scrollLeft

Est un Number représentant le décalage de défilement gauche de l'élément.

Element.scrollLeftMax Lecture seule

Retourne un Number  représentant le décalage maximum de défilement gauche possible pour l'élément.

Element.scrollTop

Est un Number représentant le décalage de défilement haut de l'élément.

Element.scrollTopMax Lecture seule

Retourne un Number représentant le décalage maximum de défilement haut possible pour l'élément.

Element.scrollWidth Lecture seule

Retourne un Number représentant la largeur de vue de défilement de l'élément.

Element.shadowRoot Lecture 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 Boolean indiquant si l'élément peut recevoir un focus d'entrée via la touche de tabulation.

Element.tagName Lecture seule

Retourne une String avec le nom de la balise pour l'élément donné.

Element.undoManager Lecture seule

Retourne le UndoManager associé à l'élément.

Element.undoScope

Est un Boolean indiquant si l'élément est un hôte de portée d'annulation, ou non.

Propriété inclue dans "Slotable"

L'interface Element inclut la propriété suivante, définie sur le "mixin" Slotable.

Slotable.assignedSlot Lecture seule

renvoie un HTMLSlotElement repré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é dans GlobalEventHandlers.

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'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.

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 Boolean qui 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 HTMLCollection qui 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 HTMLCollection contenant tous les éléments descendants, d'un nom de tag particulier, de l'élément en cours.

Element.getElementsByTagNameNS()

Renvoie une 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.

Element.hasAttribute()

Retourne un Boolean indiquant si l'élément a un attribut spécifié ou non.

Element.hasAttributeNS()

Retourne un Boolean indiquant si l'élément a un attribut spécifié, dans l'espace de noms spécifié, ou non.

Element.hasAttributes()

Retourne un Boolean indiquant 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 Boolean indiquant si l'élément serait sélectionné ou non par la chaîne de sélection spécifiée.

Element.querySelector()

Retourne le premier Node correspondant à la chaîne du sélecteur spécifiée par rapport à l'élément.

Element.querySelectorAll

Retourne une NodeList des 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 pointeur spé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

Compatibilité des navigateurs

[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)