Objeto Element de HTML DOM

Objeto Elemento

En el HTML DOM, el objeto Element representa un elemento HTML, como P, DIV, A, TABLE o cualquier otro elemento HTML.

Atributos y métodos

Los siguientes atributos y métodos están disponibles para todos los elementos HTML:

Atributo / Método Descripción
accessKey Establecer o devolver el atributo accesskey del elemento.
addEventListener() Adjuntar un gestor de eventos al elemento.
appendChild() Agregar (adjuntar) un nuevo nodo hijo al elemento.
attributes Devolver el NamedNodeMap de atributos del elemento.
blur() Quitar el enfoque del elemento.
childElementCount Devolver la cantidad de elementos hijos del elemento.
childNodes Devolver el NodeList de nodos hijos del elemento.
children Devolver la colección de elementos hijos del elemento.
classList Devolver el nombre de la clase del elemento.
className Establecer o devolver el valor de la propiedad class del elemento.
click() Simular un clic del ratón en el elemento.
clientHeight Devolver la altura del elemento, incluyendo los márgenes internos.
clientLeft Devolver el ancho del borde izquierdo del elemento.
clientTop Devolver el ancho del borde superior del elemento.
clientWidth Devolver el ancho del elemento, incluyendo los márgenes internos.
cloneNode() Clonar el elemento.
closest() Buscar el elemento más cercano en el árbol DOM que coincide con el selector CSS.
compareDocumentPosition() Comparar la posición de documentos de dos elementos.
contains() Devuelve true si el nodo es descendiente del nodo.
contentEditable Establece o devuelve si el contenido del elemento es editable.
dir Establece o devuelve el valor de la propiedad dir del elemento.
firstChild Devuelve el primer hijo del elemento.
firstElementChild Devuelve el primer elemento hijo del elemento.
focus() Hace que el elemento obtenga el foco.
getAttribute() Devuelve el valor del atributo del elemento.
getAttributeNode() Devuelve el nodo de atributo.
getBoundingClientRect() Devuelve el tamaño del elemento y su posición relativa al viewport.
getElementsByClassName() Devuelve la colección de elementos con el nombre de clase dado.
getElementsByTagName() Devuelve la colección de elementos con el nombre de etiqueta dado.
hasAttribute() Devuelve true si el elemento tiene el atributo dado.
hasAttributes() Devuelve true si el elemento tiene cualquier atributo.
hasChildNodes() Devuelve true si el elemento tiene cualquier hijo.
element.id Establece o devuelve el valor de la propiedad id del elemento.
innerHTML Establece o devuelve el contenido del elemento.
innerText Establecer o devolver el contenido de texto de los nodos y sus descendientes.
insertAdjacentElement() Inserta un nuevo elemento HTML en una posición relativa al elemento.
insertAdjacentHTML() Inserta texto en formato HTML en una posición relativa al elemento.
insertAdjacentText() Inserta texto en una posición relativa al elemento.
insertBefore() Inserta un nuevo hijo antes del hijo existente.
isContentEditable Devuelve true si el contenido del elemento es editable.
isDefaultNamespace() Devuelve true si el namespaceURI proporcionado es el valor predeterminado.
isEqualNode() Verifica si dos elementos son iguales.
isSameNode() Verifica si dos elementos son el mismo nodo.
isSupported() Obsoleto.
lang Establece o devuelve el valor de la propiedad lang del elemento.
lastChild Devuelve el último hijo del elemento.
lastElementChild devuelve el último elemento hijo del elemento.
matches() devuelve true si el elemento coincide con el selector CSS proporcionado.
namespaceURI devuelve el URI del espacio de nombres del elemento.
nextSibling devuelve el nodo siguiente en el nivel del árbol de nodos.
nextElementSibling devuelve el elemento siguiente en el nivel del árbol de nodos.
nodeName devuelve el nombre del nodo.
nodeType devuelve el tipo de nodo del nodo.
nodeValue establece o devuelve el valor del nodo.
normalize() comprime los nodos de texto adyacentes en el elemento y elimina los nodos de texto vacíos.
offsetHeight devuelve la altura del elemento, incluyendo los márgenes internos, los bordes y las barras de desplazamiento.
offsetWidth devuelve el ancho del elemento, incluyendo los márgenes internos, los bordes y las barras de desplazamiento.
offsetLeft devuelve la posición horizontal desplazada del elemento.
offsetParent devuelve el contenedor desplazado del elemento.
offsetTop devuelve la posición vertical desplazada del elemento.
outerHTML establece o devuelve el contenido del elemento (incluyendo las etiquetas de inicio y final).
outerText establece o devuelve el contenido de texto externo del nodo y sus descendientes.
ownerDocument devuelve el elemento raíz (objeto documento).
parentNode devuelve el nodo padre del elemento.
parentElement devuelve el nodo padre del elemento.
previousSibling devuelve el nodo anterior en el nivel del árbol de nodos.
previousElementSibling devuelve el elemento anterior en el nivel del árbol de nodos.
querySelector() devuelve el primer elemento hijo que coincide con el selector CSS.
querySelectorAll() devuelve todos los elementos hijos que coinciden con el selector CSS.
remove() elimina el elemento del DOM.
removeAttribute() elimina el atributo del elemento.
removeAttributeNode() elimina el nodo de atributo y devuelve el nodo eliminado.
removeChild() elimina el nodo hijo del elemento.
removeEventListener() elimina el gestor de eventos adjunto con el método addEventListener().
replaceChild() reemplaza los nodos hijos del elemento.
scrollHeight devuelve la altura total del elemento, incluyendo los márgenes internos.
scrollIntoView() Desplazar el elemento al área visible de la ventana del navegador.
scrollLeft Establecer o devolver el número de píxeles de desplazamiento horizontal del contenido del elemento.
scrollTop Establecer o devolver el número de píxeles de desplazamiento vertical del contenido del elemento.
scrollWidth Devolver el ancho total del elemento, incluyendo los márgenes internos.
setAttribute() Establecer o cambiar el valor de la propiedad.
setAttributeNode() Establecer o cambiar el nodo de atributo.
style Establecer o devolver el valor de la propiedad style del elemento.
tabIndex Establecer o devolver el valor de la propiedad tabIndex del elemento.
tagName Devolver el nombre de la etiqueta del elemento.
textContent Establecer o devolver el contenido de texto de los nodos y sus descendientes.
title Establecer o devolver el valor de la propiedad title del elemento.
toString() Convertir un elemento en una cadena.

Detalles de la interfaz Element

La interfaz Element representa elementos HTML, XML o etiquetas. La propiedad tagName especifica el nombre del elemento. La propiedad documentElement del objeto Document referencia el objeto Element raíz de este documento. La propiedad body del objeto HTMLDocument también es similar, referenciando el elemento <body> del documento. Para encontrar un elemento específico en un documento HTML, se utiliza Document.getElementById() (asignando un nombre único al elemento a través de la propiedad id). Para localizar elementos mediante el nombre de la etiqueta, se utiliza getElementsByTagName(), que es tanto un método de Element como de Document. En un documento HTML, también se puede utilizar el método similar HTMLDocument.getElementsByName() para encontrar elementos según la propiedad name del elemento. Finalmente, se puede utilizar el método Document.createElement() para crear un nuevo elemento Element que se insertará en el documento.

El método addEventListener() (y su método alternativo específico para IE, attachEvent()) proporciona el método para registrar una función de manejador de eventos específica del tipo de evento en el elemento. Técnicamente, addEventListener(), removeEventListener() y dispatchEvent() están definidos por la interfaz EventTarget del estándar de eventos del nivel 2 de DOM. Todos los objetos Element implementan EventTarget.

Los otros métodos de esta interfaz proporcionan acceso a los atributos del elemento. En los documentos HTML (y en muchos documentos XML), todos los atributos tienen valores de cadena simples, y puedes usar los métodos simples getAttribute() y setAttribute() para realizar cualquier operación de atributo necesaria.

Si estás utilizando un documento XML, puede contener referencias a entidades como parte de los valores de atributo, deberás usar el objeto Attr y su subárbol de nodos. Puedes obtener y establecer el objeto Attr usando getAttributeNode() y setAttributeNode(), o puedes recorrer los nodos Attr del array attributes[] de la interfaz Node. Si estás utilizando un documento XML con espacio de nombres, necesitarás usar los métodos con nombre que comienzan con "NS".

En la norma del nivel 1 DOM, el método normalize() es parte de la interfaz Elemento. En la norma del nivel 2, normalize() es parte de la interfaz Node. Todos los nodos Elemento heredan este método y pueden seguir utilizandolo.

Conocimiento: Nodos del DOM HTML

En el DOM (Modelo de Objetos de Documento) HTML, cada parte es un nodo:

  • El documento en sí mismo es un nodo de documento
  • Todos los elementos HTML son nodos de elemento
  • Todos los atributos HTML son nodos de atributo
  • El texto dentro de los elementos HTML es un nodo de texto
  • Los comentarios son nodos de comentario

Objeto Elemento

En el DOM HTML, el objeto Elemento representa el elemento HTML.

El objeto Elemento puede tener subnodos de tipo nodo de elemento, nodo de texto, o nodo de comentario.

El objeto NodeList representa una lista de nodos, por ejemplo, la colección de subnodos de elementos HTML.

Los elementos también pueden tener atributos. Los atributos son nodos de atributo (véase la próxima sección).