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)
