7.- El objeto document – Curso Básico de #Javascript #7

Este capítulo está enfocado a el objeto document, un objeto que nos brinda javascript con el cual podemos hacer referencia a cualquier elemento que contenga nuestra página, poder manipular el elemento, sus atributos y valores, y gracias a esto sacar el potencial de javascript sobre el contenido HTML.

El objeto document hace referencia a todos los elementos de nuestra página web,  es el padre de todos los objetos HTML, y por medio de este podemos hacer referencia a ellos, pero no solo eso, también nos permite agregar nuevos elementos (en el capítulo 10 trata sobre esto). El objeto document se utiliza como un nodo de un grafo (árbol), y es el nodo padre de todos los elementos, funciona como grafo, en el cual podemos desplazar hacia sus hijos una vez seleccionado el padre.

La siguiente lista de métodos y atributos son los que pueden ser utilizados por el objeto document:

Atributo /Método Descripción
document.adoptNode(node) Devuelve un nodo adapded de otro documento a este documento.
document.baseURI Atributo que contiene la url de la pagina
document.anchors Obtiene todos los elementos anchors (<a>) de la pagina
document.close() Cierra la ventana actual siempre y cuando esta haya sido abierta por window.open() o document.open()
document.cookie Regresa todas las cookies de la pagina
document.createAttribute() Crea un atributo en el nodo
document.createComment() Crea un comentario en la pagina
document.createDocumentFragment() Crea un fragmento(fragment) de código HTML.
document.createElement() Crea un elemento en la página.
document.createTextNode() Crea un nodo texto.
document.doctype Regresa la DOCTYPE(Document Type Declaration) asociada al documento
document.documentElement Regresa el mismo document, en si es el contenido de la pagina entero.
document.documentURI Atributo que contiene la ubicación del documento (url de la pagina)
document.domain Regresa el dominio de la pagina
document.forms Regresa una colección que contiene todos los elementos forms de la pagina
document.getElementById() Regresa el nodo de un elemento por su Id
document.getElementsByName() Regresa  todos los elementos por su nombre.
document.getElementsByTagName() Regresa una lista de Nodos que contienen un tag name.
document.head Regresa el nodo head (<head>), del documento
document.images Regresa una colección de todas las imagenes de la pagina
document.implementation Regresa la implementación del DOM
document.importNode() Importa un Nodo de otro document. De un iframe por ejemplo.
document.inputEncoding Regresa la codificación del documento, por ejemplo UTF8.
document.lastModified Regresa la hora de la última modificación del documento.
document.links Regresa una colección de todos los links de la pagina.
document.normalize() Remueve Nodos de Texto en blanco, y une los Nodos adyacentes
document.normalizeDocument() Remueve Nodos de Texto en blanco, y une los Nodos adyacentes
document.open() Limpia el documento, para plasmar nuevo contenido HTML
document.readyState Regresa el Estado de la petición de la pagina
document.referrer Devuelve la dirección URL del documento que ha cargado el documento actual
document.renameNode() Renombra el nodo especifico
document.strictErrorChecking Establece o devuelve si la comprobación de errores se hace cumplir o no
document.title Establece o devuelve el título del documento
document.URL Devuelve el URL completo del documento
document.write() Escribe expresiones HTML o código JavaScript en un documento
document.writeln() Igual que write (), pero añade un carácter de nueva línea después de cada declaración

Veamos qué es lo que podemos realizar con el objeto document, para ello escribo el siguiente código:

document.title="Nombre del title modificado desde JAVASCRIPT"

De este modo modificamos el titulo de nuestra pagina. Ahora veamos como podemos obtener los elementos de un Tag Name en especifico

Código HTML

<p>parrafo 1</p>
<p>parrafo 2</p>
<p>parrafo 3</p>

Código Javascript

var elementos= document.getElementsByTagName("p");
var cadena="";
for(i=0;i<elementos.length;i++){
	cadena+=elementos[i].innerHTML+","
}

//mostramos el contenido html de los parrafos
alert(cadena)

De esta ultima forma obtenemos los párrafos y su contenido html, y todo a partir del objeto document.

Para ver este código en ejecución den clic aquí.

Ir Capítulo Siguiente (8.- La interfaz Node)

Ir Capítulo Anterior (6.- Eventos)

mm

About

Desarrollador de software, lector compulsivo.

View all posts by