Element

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

1. Propiedades

Propiedades de element
PropiedadDescripción
accessKeyEstablece o devuelve el atributo de clave de acceso de un elemento.
attributesDevuelve un NamedNodeMap de los atributos de un elemento.
childElementCountDevuelve el número de elementos secundarios que tiene un elemento.
childNodesDevuelve una colección de nodos secundarios de un elemento (incluidos los nodos de texto y comentario).
childrenDevuelve una colección del elemento hijo de un elemento (excluyendo el texto y los nodos de comentario).
classListDevuelve los nombres de clase de un elemento.
classNameEstablece o devuelve el valor del atributo de clase de un elemento.
clientHeightDevuelve la altura de un elemento, incluido el relleno.
clienteLeftDevuelve el ancho del borde izquierdo de un elemento.
clienteTopDevuelve el ancho del borde superior de un elemento.
clienteWidthDevuelve el ancho de un elemento, incluido el relleno.
contentEditableEstablece o devuelve si el contenido de un elemento es editable o no.
dirEstablece o devuelve el valor del atributo dir de un elemento.
firstChildDevuelve el primer nodo hijo de un elemento.
firstElementChildDevuelve el primer elemento hijo de un elemento.
idEstablece o devuelve el valor del atributo id de un elemento.
innetHTMLEstablece o devuelve el contenido de un elemento.
innerTextEstablece o devuelve el contenido de texto de un nodo y sus descendientes.
isContentEditableDevuelve verdadero si el contenido de un elemento es editable, de lo contrario falso.
langEstablece o devuelve el valor del atributo lang de un elemento.
lastChildDevuelve el último nodo hijo de un elemento.
lastElementChildDevuelve el último elemento hijo de un elemento.
namesspaceURIDevuelve el URI del espacio de nombres de un elemento
nextSiblingDevuelve el siguiente nodo en el mismo nivel de árbol de nodos.
nextElementSiblingDevuelve el siguiente elemento en el mismo nivel de árbol de nodos.
nodeNameDevuelve el nombre de un nodo.
nodeTypeDevuelve el tipo de nodo de un nodo.
nodeValueEstablece o devuelve el valor de un nodo.
offsetHeightDevuelve la altura de un elemento, incluido el relleno, el borde y la barra de desplazamiento.
offsetWidthDevuelve el ancho de un elemento, incluidos el relleno, el borde y la barra de desplazamiento.
offsetLeftDevuelve la posición de desplazamiento horizontal de un elemento.
offsetParentDevuelve el contenedor de desplazamiento de un elemento.
offsetTopDevuelve la posición de desplazamiento vertical de un elemento.
outerHTMLEstablece o devuelve el contenido de un elemento (incluida la etiqueta de inicio y la etiqueta de finalización).
outerTextEstablece o devuelve el contenido del texto externo de un nodo y sus descendientes.
ownerDocumentDevuelve el elemento raíz (objeto de documento) para un elemento.
parentNodeDevuelve el nodo padre de un elemento.
parentElementDevuelve el nodo del elemento primario de un elemento.
previousSiblingDevuelve el nodo anterior en el mismo nivel de árbol de nodos.
previousElementSiblingDevuelve el elemento anterior en el mismo nivel de árbol de nodo.
scrollHeightDevuelve la altura completa de un elemento, incluido el relleno.
scrollLeftEstablece o devuelve el número de px que el contenido de un elemento se desplaza horizontalmente.
scroollTopEstablece o devuelve el número de px que el contenido de un elemento se desplaza verticalmente.
scrollWidthDevuelve el ancho completo de un elemento, incluido el relleno.
styleEstablece o devuelve el valor del atributo de estilo de un elemento.
tabIndexEstablece o devuelve el valor del atributo tabindex de un elemento.
tagNameDevuelve el nombre de etiqueta de un elemento.
textContentEstablece o devuelve el contenido textual de un nodo y sus descendientes.
titleEstablece o devuelve el valor del atributo de título de un elemento.

2. Métodos

Métodos de element
MétodoDescripción
addEventListener()Adjunta un controlador de eventos al elemento especificado.
appendChild()Agrega un nuevo nodo hijo, a un elemento, como el último nodo hijo.
blur()Elimina el foco de un elemento.
click()Simula un clic del mouse sobre un elemento.
cloneNode()Clona un elemento.
compareDocumentPosition()Compara la posición del documento de dos elementos.
contains()Devuelve verdadero si un nodo es un descendiente de un nodo, de lo contrario falso.
exitFullscreen()Cancela un elemento en modo de pantalla completa.
focus()Da foco a un elemento.
getAttribute()Devuelve el valor del atributo especificado de un nodo de elemento.
getAttributeNode()Devuelve el nodo de atributo especificado.
getBoundingClientRect()Devuelve el tamaño de un elemento y su posición con respecto a la ventana gráfica.
getElementById()Devuelve el elementos con id especificado.
getElementByClassName()Devuelve una colección de todos los elementos secundarios con el nombre de clase especificado.
getElementByTagName()Devuelve una colección de todos los elementos secundarios con el nombre de etiqueta especificado.
hasAttribute()Devuelve verdadero si un elemento tiene el atributo especificado, de lo contrario falso.
hasAttributes()Devuelve verdadero si un elemento tiene algún atributo, de lo contrario falso.
hasChildNodes()Devuelve verdadero si un elemento tiene nodos secundarios, de lo contrario falso.
insertAdjacentElement()Inserta un elemento HTML en la posición especificada en relación con el elemento actual.
insertAdjacentHTML()Inserta un texto con formato HTML en la posición especificada en relación con el elemento actual.
insertAdjacentText()Inserta texto en la posición especificada en relación con el elemento actual.
insertBefore()Inserta un nuevo nodo secundario antes de un nodo secundario específico existente.
isDefaultNamespace()Devuelve verdadero si un espacio de nombres especificadoURI es el predeterminado, de lo contrario falso.
isEqualNode()Comprueba si dos elementos son iguales.
isSameNode()Comprueba si dos elementos son el mismo nodo.
isSupported()Devuelve verdadero si una característica especificada es compatible con el elemento.
normalize()Une nodos de texto adyacentes y elimina nodos de texto vacíos en un elemento.
querySelector()Devuelve el primer elemento secundario que coincide con un selector CSS seleccionado de un elemento.
querySelectorAll()Devuelve todos los elementos secundarios que coinciden con los selectores CSS especificados de un elemento.
remove()Elimina un elemento del DOM.
removeAttribute()Elimina un atributo especificado de un elemento.
removeAttributeNode()Elimina un nodo de atributo especificado y devuelve el nodo eliminado.
removeChild()Elimina un nodo hijo de un elemento.
removeEventListener()Elimina un controlador de eventos que se ha adjuntado con el método addEventListener().
replaceChild()Reemplaza un nodo hijo en un elemento.
requestFullscreen()Muestra un elemento en modo de pantalla completa.
scrollIntoView()Desplaza el elemento especificado al área visible de la ventana del navegador.
setAttribute()Establece o cambia el atributo especificado, al valor especificado.
setAttributeNode()Establece o cambia el nodo de atributo especificado.
toString()Convierte un elemento en una cadena.

3. Ejemplos

Algunos pocos ejemplos.

3.1 Ejemplo 1

Adjunte un evento de clic a un elemento <button>. Cuando el usuario hace clic en el botón, muestra alternativamente "Hola mundo" o "Que tengas un buen dia" en un elemento <h1 id=miH1>

<h1 id=miH1>Hola mundo</h1>
<button onclick='cambia()'>Cambia texto</button>

<Script>
function cambia() {
   var x = document.getElementById('miH1');
   if (x.innerHTML == 'Hola mundo'){
      x.innerHTML = 'Que tengas un buen dia';
   }else{
      x.innerHTML = 'Hola mundo';
   }
}
</Script>

Hola mundo

Nota que el botón Cambia texto esta fuera del h1.

3.2 Ejemplo 2

Cambia el color del h1 del ejemplo anterior.

<button onclick='color()'>Cambia color</button>

<Script>
function color() {
   var x = document.getElementById('miH1');
   if (x.style.color == 'green'){
      x.style.color = 'red';                
   }else{
      x.style.color = 'green';                
   }
}
</Script>

3.3 Ejemplo 3

En este ejemplo añadimos la class=nota en el <h2 id=3>

<button onClick="document.getElementById('3').setAttribute('class','nota');">Pone clase</button>
<button onClick="document.getElementById('3').removeAttribute('class');">Quita clase</button>

3.4 Ejemplo 4