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étodoDescripción
document.adoptNode(node)Devuelve un nodo adapded de otro documento a este documento.
document.baseURIAtributo que contiene la url de la pagina
document.anchorsObtiene 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.cookieRegresa 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.doctypeRegresa la DOCTYPE(Document Type Declaration) asociada al documento
document.documentElementRegresa el mismo document, en si es el contenido de la pagina entero.
document.documentURIAtributo que contiene la ubicación del documento (url de la pagina)
document.domainRegresa el dominio de la pagina
document.formsRegresa 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.headRegresa el nodo head (<head>), del documento
document.imagesRegresa una colección de todas las imagenes de la pagina
document.implementationRegresa la implementación del DOM
document.importNode()Importa un Nodo de otro document. De un iframe por ejemplo.
document.inputEncodingRegresa la codificación del documento, por ejemplo UTF8.
document.lastModifiedRegresa la hora de la última modificación del documento.
document.linksRegresa 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.readyStateRegresa el Estado de la petición de la pagina
document.referrerDevuelve la dirección URL del documento que ha cargado el documento actual
document.renameNode()Renombra el nodo especifico
document.strictErrorCheckingEstablece o devuelve si la comprobación de errores se hace cumplir o no
document.titleEstablece o devuelve el título del documento
document.URLDevuelve 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)

Autor: Héctor de León

Desarrollador de software, lector compulsivo.