Objet Element HTML DOM

Objet Element

Dans HTML DOM, l'objet Element représente un élément HTML, comme P, DIV, A, TABLE ou tout autre élément HTML.

Attributs et méthodes

Les attributs et méthodes suivants peuvent être utilisés pour tous les éléments HTML :

Attribut / Méthode Description
accessKey Définir ou retourner la valeur de l'attribut accesskey de l'élément.
addEventListener() Attacher un gestionnaire d'événement à l'élément.
appendChild() Ajouter (attacher) un nouveau noeud enfant à l'élément.
attributes Retourne la carte des attributs de l'élément.
blur() Retirer le focus de l'élément.
childElementCount Retourne le nombre d'éléments enfants de l'élément.
childNodes Retourne la liste des noeuds enfants de l'élément.
children Retourne la collection HTML des éléments enfants de l'élément.
classList Retourne le nom de la classe de l'élément.
className Définir ou retourner la valeur de l'attribut class de l'élément.
click() Simuler un clic de souris sur l'élément.
clientHeight Retourne la hauteur de l'élément, y compris les marges internes.
clientLeft Retourne la largeur de la bordure gauche de l'élément.
clientTop Retourne la largeur de la bordure supérieure de l'élément.
clientWidth Retourne la largeur de l'élément, y compris les marges internes.
cloneNode() Cloner un élément.
closest() Recherche de l'élément le plus proche dans l'arbre DOM correspondant au sélecteur CSS.
compareDocumentPosition() Compare la position documentaire de deux éléments.
contains() Retourne true si le nœud est un descendant du nœud.
contentEditable Définit ou renvoie si le contenu de l'élément est éditable.
dir Définit ou renvoie la valeur de l'attribut dir de l'élément.
firstChild Retourne le premier enfant de l'élément.
firstElementChild Retourne le premier élément enfant de l'élément.
focus() Fait obtenir le focus à l'élément.
getAttribute() Retourne la valeur de l'attribut de l'élément.
getAttributeNode() Retourne le nœud d'attribut.
getBoundingClientRect() Retourne la taille de l'élément et sa position par rapport à la fenêtre de visualisation.
getElementsByClassName() Retourne la collection des éléments enfants ayant la classe donnée.
getElementsByTagName() Retourne la collection des éléments enfants ayant le nom de balise donné.
hasAttribute() Retourne true si l'élément a l'attribut donné.
hasAttributes() Retourne true si l'élément a des attributs.
hasChildNodes() Retourne true si l'élément a des enfants.
element.id Définit ou renvoie la valeur de l'attribut id de l'élément.
innerHTML Définit ou renvoie le contenu de l'élément.
innerText Définir ou renvoyer le contenu texte des noeuds et de leurs descendants.
insertAdjacentElement() Insère un nouvel élément HTML à la position relative de l'élément.
insertAdjacentHTML() Insère du texte HTML à la position relative de l'élément.
insertAdjacentText() Insère du texte à la position relative de l'élément.
insertBefore() Insère un nouvel élément enfant avant un enfant existant.
isContentEditable Retourne true si le contenu de l'élément est éditable.
isDefaultNamespace() Retourne true si l'URI de l'espace de nom fourni est la valeur par défaut.
isEqualNode() Vérifie si deux éléments sont égaux.
isSameNode() Vérifie si deux éléments sont le même nœud.
isSupported() Déprécié.
lang Définit ou renvoie la valeur de l'attribut lang de l'élément.
lastChild Renvoie le dernier élément enfant de l'élément.
lastElementChild Retourne le dernier élément enfant de l'élément.
matches() Retourne true si l'élément correspond au sélecteur CSS donné.
namespaceURI Retourne l'URI de l'espace de nom de l'élément.
nextSibling Retourne le noeud suivant à la même couche de noeuds dans l'arbre de noeuds.
nextElementSibling Retourne l'élément suivant à la même couche de noeuds dans l'arbre de noeuds.
nodeName Retourne le nom du noeud.
nodeType Retourne le type de noeud du noeud.
nodeValue Définit ou retourne la valeur du noeud.
normalize() Fusionne les noeuds de texte adjacents dans l'élément et supprime les noeuds de texte vides.
offsetHeight Retourne la hauteur de l'élément, y compris les marges internes, les bordures et les barres de défilement.
offsetWidth Retourne la largeur de l'élément, y compris les marges internes, les bordures et les barres de défilement.
offsetLeft Retourne la position horizontale de l'élément.
offsetParent Retourne le conteneur décalé de l'élément.
offsetTop Retourne la position verticale de l'élément.
outerHTML Définit ou retourne le contenu de l'élément (y compris les balises de début et de fin).
outerText Définit ou retourne le contenu texte externe du noeud et de ses descendants.
ownerDocument Retourne l'élément racine (objet document).
parentNode Retourne le noeud parent de l'élément.
parentElement Retourne le noeud parent de l'élément.
previousSibling Retourne le noeud précédent à la même couche de noeuds dans l'arbre de noeuds.
previousElementSibling Retourne l'élément précédent à la même couche de noeuds dans l'arbre de noeuds.
querySelector() Retourne le premier élément enfant correspondant au sélecteur CSS.
querySelectorAll() Retourne tous les éléments enfants correspondant au sélecteur CSS.
remove() Retire l'élément du DOM.
removeAttribute() Retire les attributs de l'élément.
removeAttributeNode() Retire le noeud attribut et renvoie le noeud supprimé.
removeChild() Retire le noeud enfant de l'élément.
removeEventListener() Supprime le gestionnaire d'événement attaché avec la méthode addEventListener().
replaceChild() Remplace les noeuds enfants de l'élément.
scrollHeight Renvoie la hauteur totale de l'élément, y compris les marges internes.
scrollIntoView() Faire défiler l'élément dans la zone visible de la fenêtre du navigateur.
scrollLeft Définir ou renvoyer le nombre de pixels de défilement horizontal du contenu de l'élément.
scrollTop Définir ou renvoyer le nombre de pixels de défilement vertical du contenu de l'élément.
scrollWidth Renvoyer la largeur totale de l'élément, y compris les marges internes.
setAttribute() Définir ou modifier la valeur de l'attribut.
setAttributeNode() Définir ou modifier un noeud d'attribut.
style Définir ou renvoyer la valeur de l'attribut style de l'élément.
tabIndex Définir ou renvoyer la valeur de l'attribut tabIndex de l'élément.
tagName Renvoyer le nom de balise de l'élément.
textContent Définir ou renvoyer le contenu texte des noeuds et de leurs descendants.
title Définir ou renvoyer la valeur de l'attribut title de l'élément.
toString() Convertir un élément en chaîne de caractères.

Détails de l'interface Element

L'interface Element représente un élément HTML, un élément XML ou une balise. L'attribut tagName spécifie le nom de l'élément. L'attribut documentElement du Document fait référence à l'objet Element racine de ce document. L'attribut body de l'objet HTMLDocument est similaire, il fait également référence à l'élément <body> du document. Pour trouver un élément spécifique dans un document HTML, utilisez Document.getElementById() (et attribuez à l'élément un nom unique via l'attribut id). Pour localiser un élément par son nom de balise, utilisez getElementsByTagName(), qui est à la fois une méthode d'Element et une méthode de Document. Dans un document HTML, vous pouvez également utiliser la méthode HTMLDocument.getElementsByName() pour trouver des éléments en fonction de l'attribut name de l'élément. Enfin, vous pouvez créer un nouvel élément Element à insérer dans le document en utilisant la méthode Document.createElement().

La méthode addEventListener() (et son substitut spécifique à IE, attachEvent()) fournit une méthode pour enregistrer une fonction de gestion d'événements spécifique sur un élément pour un type d'événement donné. Techniquement parlant, addEventListener(), removeEventListener() et dispatchEvent() sont définis par l'interface EventTarget du spécimen 2 du DOM Events. Tous les objets Element implémentent EventTarget.

Divers autres méthodes de cette interface permettent d'accéder aux attributs de l'élément. Dans le document HTML (et dans de nombreux documents XML), toutes les propriétés ont des valeurs de chaîne simples, et vous pouvez utiliser les méthodes simples getAttribute() et setAttribute() pour toute opération d'attribut nécessaire.

Si vous utilisez un document XML, il peut contenir des références d'entité comme partie de la valeur d'attribut, vous devrez utiliser l'objet Attr et l'arbre de nœuds. Vous pouvez utiliser getAttributeNode() et setAttributeNode() pour obtenir et définir l'objet Attr pour une attribut, ou vous pouvez parcourir les nœuds Attr dans l'array attributes[] de l'interface Node. Si vous utilisez un document XML utilisant un espace de noms de nom, vous devez utiliser diverses méthodes avec des noms commençant par "NS".

Dans la norme de niveau 1 DOM, la méthode normalize() fait partie de l'interface Element. Dans la norme de niveau 2, normalize() fait partie de l'interface Node. Tous les nœuds Element héritent de cette méthode et peuvent toujours l'utiliser.

Connaissances : nœuds du DOM HTML

Dans le DOM HTML (modèle d'objet de document), chaque partie est un nœud :

  • Le document lui-même est un nœud de document
  • Tous les éléments HTML sont des nœuds d'élément
  • Tous les attributs HTML sont des nœuds d'attribut
  • Le texte dans les éléments HTML est un nœud de texte
  • Les commentaires sont des nœuds de commentaire

Objet Element

Dans le DOM HTML, l'objet Element représente un élément HTML.

L'objet Element peut posséder des sous-nœuds de type nœud d'élément, de nœud de texte, ou de nœud de commentaire.

L'objet NodeList représente une liste de nœuds, par exemple la collection de sous-nœuds des éléments HTML.

Les éléments peuvent également posséder des attributs. Les attributs sont des nœuds d'attribut (voir la section suivante).