El objeto document en javaScript

Se trata de uno de los objetos propios de un navegador web y, por tanto, esto lo convierte en una herramienta indispensable para el desarrollo front-end de páginas web.

Son muchos los objetos que están disponibles en un navegador, y cada uno dispone de sus propiedades y métodos. Cuando programamos creamos etiquetas HTML y estas son reconvertidas en el navegador en elementos jerárquicos. Esta jerarquía es lo que se conoce como Modelo de Objetos de Documento, más conocido por DOM (Document Object Model).

Entre los objetos presentes en el DOM destaca ‘window’ y lo hace por ser el más alto dentro de la jerarquía, pero también porque representa a la ventana del navegador donde se visualiza la página. Es importante aclarar que cada pestaña existente, cuando trabajamos en un navegador, tiene su propio objeto ‘window’ al tratarse, cada una de ellas, de una página distinta.

Colección de Objetos en el DOM

• frames
• document
• location
• navigator
• screen

No es necesario aclarar que cada uno de estos objetos tendrá al mismo tiempo una colección de objetos.

Objeto document

Este objeto hace referencia a todos los elementos que están presente en una página web. Nos referimos a los textos, imágenes, enlaces, formularios, etc.). A través del objeto document vamos a poder acceder a ellos para ver su contenido, modificarlo e incluso añadir nuevos.

Objetos en document

• styleSheets: devuelve un array con todas las hojas de estilo CSS que se están usando en la página mostrada.
• anchors: Es un array con todas las anclas del documentos. Se identifican por la etiqueta <a> y tienen definido el atributo NAME.
• links: Contiene todos los enlaces de la página, en un array. Se identifican por, también, la etiqueta <a> pero tienen definido el atributo HREF.
• forms: Un array con todas las vinculaciones a los formularios de la página, etiqueta: <form>
• images: En este array se encuentran todas las imágenes. La etiqueta <img> las representa.
• scripts: Devuelve una colección de todos los bloques <script> que estén en la página web.
• embeds: Se obtiene un array con los elementos que tienen <embed>

¿Cómo puedo acceder a cada objeto? Mediante la posición o clave que tiene dentro del array formado por el objeto document. En algunos es posible hacerlo mediante su nombre (atributo NAME).Por tanto, si queremos acceder a una imagen concreta habrá que acudir al array del objeto images y localizar la posición del elemento que nos interesa.

Ejemplo para la programación en javaScript :

//acceso a colecciones de document
var miFormulario = document.forms ["Formulario_usuarios"];
var imagenPrincipal = document.images ["favorita"];
var enlace = document.link [3];
var script = document.script [0];

Para practicar sobre estos conceptos basta con abrir un navegador, visualizar cualquier pagina con código html y utilizar las herramientas de desarrollo del propio navegador.

Por último, dejamos una puerta abierta para seguir profundizando sobre el objeto document del DOM, ya que, es imprescindible conocer , también, las propiedades y los métodos asociado al mismo. Esto se harán en próximos artículos debido a su importancia y amplitud.

A modo de resumen, document no solo dispone de una colección de objetos sino también sus métodos y propiedades que son inherentes a la clase.