Hace referencia al objeto element y representa a cualquier elemento existente dentro del DOM de una página html (párrafos, tablas, capas, etc.) Estos elementos disponen de unas propiedades y métodos que nos hará saber las características. En la mayoría de los casos un elemento contiene a su vez otros elementos y será preciso acceder a ellos.
- Children: devuelve una colección con todos los elementos anidados (hijos) que tiene el elemento actual. Cada hijo será a su vez un objeto element.
Ejemplo:
<html>
<body>
<div id="capa1">
<p>Párrafo hijo uno</p>
<p>Párrafo hijo dos</p>
<p>Párrafo hijo tres</p>
</div>
<script>
//Buscamos por id
var hijos = document.getElementById ("capa1").children;
//Mostramos resultado
console.log ('El elemento "capa1" tiene ' + hijos.length + ' hijos.'); //3
</script>
</body>
</html>
Propiedades
La mayoría de las propiedades de los elementos son los atributos HTML, pero también hay otras que permiten manipular el elemento dentro del DOM. Si la propiedad no estuviera definida obtendríamos un valor del tipo undefined. En la mayoría de los casos se puede manipular el valor de la propiedad.
- id: indica el identificador del elemento (es el valor del atributo id).
- name: Nombre del elemento (atributo name)
- tagName: Nombre de la etiqueta HTML que tiene el elemento
- className: Devuelve el contenido del atributo class.
- attributes: Devuelve una colección con todos los atributos HTML que tenga definidos el elemento. Cada atributo será un objeto con las propiedades name y value.
- style: Representa un objeto con todos los estilos del elemento. Podremos consultar y modificar cualqueir propiedad CSS (style.color, style.marginTop, etc). Solamente aparecen los estilos aplicados directamente sobre el elemento, no a través de clases.
- innerHTML: Permite acceder al contenido del elemento, como un string, incluyendo todas las etiquetas HTML de los elementos anidados.
- outerHTML: Es como el anterior, pero incluye además las etiquetas del propio elemento.
Métodos
Los métodos del objeto element nos permiten acceder y manipular sus atributos, además de modificar su colección de elemntos hijo. Algunos métodos de búsqueda de document se pueden utilizar también desde element para localizar elementos hijos: getElementsByTagName, getElementsByClassName, querySelector, querySelectorAll.
- getAttributeNames (): Devuelve un array que contiene todos los nombres de los atributos definidos en el elemento.
- getAttribute (nombre): Nos devuelve el valor del atributo que indiquemos.
- hasAttributes (): Indica si el elemento tiene algún atributo definido o no.
- hasAttribute (nombre): Nos permite saber si el elemento tiene un atributo con el nombre dado.
- setAttribute (nombre, valor): Añade un atributo al elemento con el nombre y valor indicado.
- removeAttribute (nombre): Elimina del elemento el atributo con el mismo nombre.
- appendChild (hijo): Añade un nuevo hijo al elemento y lo sitúa en el último lugar. Se devuelve una referencia al mismo.
- insertBefore (hijo, referencia): Inserta un nuevo hijo antes del elemento especificado como referencia. Si referencia es nulo, se inserta al final. Se obtiene el elemento añadido como valor de retorno.
- removeChild(hijo): Elimina el hijo indicado del elemento. Devuelve el elemento que se ha borrado.
Una vez visto tanto las propiedades como los métodos que hacen referencia al objeto element, tan solo restas plantear ejemplos con todos ellos. El análisis se hará por separado y podrá encontrarse en esta misma plataforma.
