En el HTML DOM, el objeto element representa un elemento HTML, como: P, DIV, A, TABLE o cualquier otro elemento HTML.
| Propiedad | Descripción |
|---|---|
| accessKey | Establece o devuelve el atributo de clave de acceso de un elemento. |
| attributes | Devuelve un NamedNodeMap de los atributos de un elemento. |
| childElementCount | Devuelve el número de elementos secundarios que tiene un elemento. |
| childNodes | Devuelve una colección de nodos secundarios de un elemento (incluidos los nodos de texto y comentario). |
| children | Devuelve una colección del elemento hijo de un elemento (excluyendo el texto y los nodos de comentario). |
| classList | Devuelve los nombres de clase de un elemento. |
| className | Establece o devuelve el valor del atributo de clase de un elemento. |
| clientHeight | Devuelve la altura de un elemento, incluido el relleno. |
| clienteLeft | Devuelve el ancho del borde izquierdo de un elemento. |
| clienteTop | Devuelve el ancho del borde superior de un elemento. |
| clienteWidth | Devuelve el ancho de un elemento, incluido el relleno. |
| contentEditable | Establece o devuelve si el contenido de un elemento es editable o no. |
| dir | Establece o devuelve el valor del atributo dir de un elemento. |
| firstChild | Devuelve el primer nodo hijo de un elemento. |
| firstElementChild | Devuelve el primer elemento hijo de un elemento. |
| id | Establece o devuelve el valor del atributo id de un elemento. |
| innetHTML | Establece o devuelve el contenido de un elemento. |
| innerText | Establece o devuelve el contenido de texto de un nodo y sus descendientes. |
| isContentEditable | Devuelve verdadero si el contenido de un elemento es editable, de lo contrario falso. |
| lang | Establece o devuelve el valor del atributo lang de un elemento. |
| lastChild | Devuelve el último nodo hijo de un elemento. |
| lastElementChild | Devuelve el último elemento hijo de un elemento. |
| namesspaceURI | Devuelve el URI del espacio de nombres de un elemento |
| nextSibling | Devuelve el siguiente nodo en el mismo nivel de árbol de nodos. |
| nextElementSibling | Devuelve el siguiente elemento en el mismo nivel de árbol de nodos. |
| nodeName | Devuelve el nombre de un nodo. |
| nodeType | Devuelve el tipo de nodo de un nodo. |
| nodeValue | Establece o devuelve el valor de un nodo. |
| offsetHeight | Devuelve la altura de un elemento, incluido el relleno, el borde y la barra de desplazamiento. |
| offsetWidth | Devuelve el ancho de un elemento, incluidos el relleno, el borde y la barra de desplazamiento. |
| offsetLeft | Devuelve la posición de desplazamiento horizontal de un elemento. |
| offsetParent | Devuelve el contenedor de desplazamiento de un elemento. |
| offsetTop | Devuelve la posición de desplazamiento vertical de un elemento. |
| outerHTML | Establece o devuelve el contenido de un elemento (incluida la etiqueta de inicio y la etiqueta de finalización). |
| outerText | Establece o devuelve el contenido del texto externo de un nodo y sus descendientes. |
| ownerDocument | Devuelve el elemento raíz (objeto de documento) para un elemento. |
| parentNode | Devuelve el nodo padre de un elemento. |
| parentElement | Devuelve el nodo del elemento primario de un elemento. |
| previousSibling | Devuelve el nodo anterior en el mismo nivel de árbol de nodos. |
| previousElementSibling | Devuelve el elemento anterior en el mismo nivel de árbol de nodo. |
| scrollHeight | Devuelve la altura completa de un elemento, incluido el relleno. |
| scrollLeft | Establece o devuelve el número de px que el contenido de un elemento se desplaza horizontalmente. |
| scroollTop | Establece o devuelve el número de px que el contenido de un elemento se desplaza verticalmente. |
| scrollWidth | Devuelve el ancho completo de un elemento, incluido el relleno. |
| style | Establece o devuelve el valor del atributo de estilo de un elemento. |
| tabIndex | Establece o devuelve el valor del atributo tabindex de un elemento. |
| tagName | Devuelve el nombre de etiqueta de un elemento. |
| textContent | Establece o devuelve el contenido textual de un nodo y sus descendientes. |
| title | Establece o devuelve el valor del atributo de título de un elemento. |
| Método | Descripció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. |
Algunos pocos ejemplos.
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>
Nota que el botón Cambia texto esta fuera del h1.
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>
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>