El objetos Document contiene información sobre la pagina cargada actualmente en el navegador y sirve como punto de entrada al contenido de la página (el árbol DOM). El DOM incluye elementos como <body> y <table>), entre muchos otros, y proporciona funcionalidad que es global al documento, como obtener la URL de la página y crear nuevos elementos en el documento.
Estas son las propiedades del objeto document.
documento.metodo.propiedad;
| Propiedad | Descripción |
|---|---|
| ActiveElement | Devuelve el elemento actualmente enfocado en el documento. |
| All | ? |
| Async | ? |
| Anchors | Devuelve una colección de todos los elementos <a> en el documento que tienen un atributo de nombre. |
| Applets | Devuelve una colección de todos los elementos <applet> en el documento |
| BaseURI | Devuelve el URI base absoluto de un documento. |
| Body | Establece o devuelve el cuerpo del documento (el elemento <body>). |
| Cookie | Devuelve todos los pares clave/valor en el documento. Ver documento.cookie |
| Chartset | Deprecated. Reemplazado por characterSet. |
| CharacterSet | Devuelve la codificación de caracteres para el documento. |
| ContentType | ? |
| DefaultView | Devuelve el objeto de ventana asociado con un documento, o nulo si no hay ninguno disponible. |
| DesignMode | Controla si todo el documento debe ser editable o no. |
| DocType | Devuelve la declaración de tipo de documento asociada con el documento actual. |
| DocummentElement | Devuelve el elemento de documento del documento (el elemento <html>) |
| DocumentMode | Devuelve el modo utilizado por el navegador para representar el documento. |
| DocumentURI | Establece o devuelve la ubicación del documento. |
| Domain | Devuelve el nombre de dominio del servidor que cargó el documento. |
| DomCongif | Deprecated. |
| Embeds | Devuelve una colección de todos los elementos <embed> del documento. |
| Forms | Devuelve una colección de todos los elementos <form> en el documento. |
| FullscreenElement | Devuelve el elemento actual que se muestra en modo de pantalla completa. |
| Head | Devuelve el elemento <head> del documento. |
| Images | Devuelve una colección de todos los elementos <img> en el documento. |
| Implementation | Devuelve el objeto DOM Implementation que maneja este documento. |
| InputEncoding | Devuelve la codificación, juego de caracteres, utilizado para el documento. |
| LastModified | Devuelve la fecha y hora de la última modificación del documento. |
| Links | Devuelve una colección de todos los elementos <a> y <area> en el documento que tienen un atributo href. |
| ReadyState | Devuelve el estado (cargando) del documento. |
| Referrer | Devuelve la URL del documento que cargó el documento actual. |
| Scripts | Devuelve una colección de elementos <script> en el documento. |
| StrictError>Checking | Establece o devuelve si la verificación de errores se aplica o no. |
| StyleSheets | ? |
| Title | Establece o devuelve el título del documento. |
| URL | Devuelve la URL completa del documento HTML. |
Las cookie son datos, almacenados en pequeños archivos de texto, en la computadora del cliente. Cuando un servidor web ha enviado una página web a un navegador, la conexión se cierra y el servidor olvida todo sobre el usuario. Las cookies se inventaron para resolver el problema "cómo recordar información sobre el usuario". Cuando un usuario visita una página web, su nombre puede almacenarse en una cookie. La próxima vez que el usuario visite la página, la cookie "recordará" su nombre.
Cuando un navegador solicita una página web de un servidor, las cookies que pertenecen a la página se agregan a la solicitud. De esta forma, el servidor obtiene los datos necesarios para "recordar" información sobre los usuarios.
documento.cookie='pares nombre-valor'[, expires=fecha vencimiento][, path=/];
Puedes leer una cookie con var x = document.cookie;
Puedes eliminar una cookie con document.cookie= "nombre=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
<Script>
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user = getCookie("username");
if (user !="") {
alert("Bienvenido atra vez " + user);
}else {
user = prompt("Ingresa tu nombre por favor: ", "");
if (user !="" && user !=null) {
setCookie("username", user, 365);
}
}
}
</Script>
Si la cookie no está configurada, mostrará un cuadro de solicitud, solicitando el nombre del usuario y almacena la cookie del nombre de usuario durante 365 días.
Para acceder a un elemento HTML, JavaScript puede usar el método document.getElementById(id). El atributo id define el elemento HTML. Luego con la propiedad innerHTML se define el contenido HTML.
document.getElementById(id).innerHTML = 'contenido'; document.getElementByName(nombre).innerHTML = 'contenido';
Usado para elementos que encierren al contenido como: <p>, <h1>, <div>, <span>, <button>, etc
document.getElementByClassName(clase).item(n).innerHTML = 'contenido'; document.getElementByTagName(etiqueta).item(n).innerHTML = 'contenido';
Si la selección corresponde a una colección, debes usar el método item(n) para seleccionar un solo elemento.
Para acceder a un elemento HTML, JavaScript puede usar el método document.getElementById(id). El atributo id define el elemento HTML. Luego con la propiedad value se define el valor del elemento.
document.getElementById(id).value = 'valor'; document.getElementByName(nombre).value = 'valor';
Usado para elementos que contenga un valor como: <input>, <select>, <textarea>, etc.
document.getElementByClassName(clase).item(n).value = 'valor'; document.getElementByTagName(etiqueta).item(n).value = 'valor';
Si la selección corresponde a una colección, debes usar el método item(n) para seleccionar un solo elemento.
El objeto anchors devuelve una colección de todos los enlaces (elementos <a>) del documento que tengan un atributo de nombre.
documento.anchors.length;
Los elementos de la colección se ordenan tal como aparecen en el código fuente.
| Propiedad | Descripción |
|---|---|
| length | Devuelve el numero de elemento a de la colección. Solo lectura. |
| Método | Descripción |
|---|---|
| [index] | Devuelve el elemento a de la colección con el índice especificado (comienza en 0). Retorna null si index esta fuera de rango. |
| item(index) | Devuelve el elemento a de la colección con el índice especificado (comienza en 0). Retorna null si index esta fuera de rango. |
| namedItem(id) | Devuelve el elemento a de la colección con el id especificado. Retorna null si no existe. |
Obtenga el contenido HTML del primer elemento a en el documento.
var x = document.anchors[0].innerHTML;
El objeto forms devuelve una colección de todos los elementos de formulario (form) en el documento.
| Propiedad | Descripción |
|---|---|
| length | Devuelve el numero de elemento form de la coleccion. Solo lectura. |
| Método | Descripción |
|---|---|
| [index] | Devuelve el elemento form de la colección con el índice especificado (comienza en 0). Retorna null si index esta fuera de rango. |
| item(index) | Devuelve el elemento form de la colección con el índice especificado (comienza en 0). Retorna null si index esta fuera de rango. |
| namedItem(id) | Devuelve el elemento form de la colección con el id especificado. Retorna null si no existe. |
Descubra cuántos elementos form hay en el documento.
var x = document.forms.length;
Obtenga la identificación del primer elemento form (índice 0) en el documento.
var x = document.forms[0].id; var x = document.forms.item(0).id;
Obtenga el contenido HTML del elemento form con id=myCarForm en el documento.
var x = document.forms.namedItem("myCarForm").innerHTML;
Recorre todos los elementos form en el documento y genera el id de cada formulario.
var x = document.forms;
var txt = "";
var i;
for (i=0; i<x.length; i++) {
txt = txt + x[i].id + "<br>";
}
El objeto links devuelve una colección de todos los elementos texto o imagen empleados como enlace en el documento.
document.links[indice].propiedad; document.links.length;
| Propiedad | Descripción |
|---|---|
| hash | |
| host | Devuelve el servidor y puerto |
| hostname | Devuelve eñ dominio o IP |
| href | devuelve URL completo. |
| pathname | |
| port | Devuelve el puerto de comunicaciones |
| protocol | Devuelve el protocolo usado |
| search | Devuelve el parametro de busqueda |
| target | Funciona igual que target en un elemento <a> |
Estas son los eventos del objeto document
| Método | Descripción |
|---|---|
| AddEventListener() | Adjunta un controlador de eventos al documento. |
| AdoptNode() | Adopta un nodo de otro documento. |
| CaptureEvents() | ? |
| Clear() | Borra el documento de una ventana. |
| Close() | Cierra la secuencia de salida abierta previamente con document.open(). |
| CreateAttribute() | Crea un nodo de atributo |
| CreateComment() | Crea un nodo comentario con el texto especificado. |
| CreateDocumentFragment() | Crea un nodo vacío de DocumentFragment. |
| CreateElement() | Crea un nodo de elemento. |
| CreateEvent() | Crea un nuevo evento. |
| CreateTextNode() | Crea un nodo de texto. |
| ExecCommand() | Invoca la operación del portapapeles especificada en el elemento que actualmente tiene foco. |
| FullscreenElement() | Devuelve el elemento actual que se muestra en modo de pantalla completa. |
| FullscreenEnabled() | Devuelve un valor booleano que indica si el documento se puede ver en modo de pantalla completa. |
| GetElementById() | Devuelve una colección HTML que contiene todos los elementos con id especificado. Ver innerHTML y value. |
| GetElementByClassName() | Devuelve una colección HTML que contiene todos los elementos con clase especificada. Ver innerHTML y value. |
| GetElementByName() | Devuelve una colección HTML que contiene todos los elementos con un nombre especificado. Ver innerHTML y value. |
| GetElementByTagName() | Devuelve una colección HTML que contiene todos los elementos con una etiqueta especificado. Ver innerHTML y value. |
| HasFocus() | Devuelve un valor booleano que indica si el documento tiene el foco. |
| ImportNode() | Importa un nodo de otro documento. |
| Normalize() | Elimina nodos de texto vacíos y une nodos adyacentes. |
| NormalizeDocument() | Elimina nodos de texto vacíos y une nodos adyacentes. |
| Open() | Abre una secuencia de salida HTML para recopilar resultados de document.write() |
| QuerySelector() | Devuelve el primer elemento que coincide con un selector de CSS especificado en el documento. |
| QuerySelectorAll() | Devuelve una NodeList estática que contiene todos los elementos que coinciden con un selector CSS seleccionado en el documento. |
| RemoveEventListener() | Elimina un controlador de eventos del documento (que se ha adjuntado con el método document.addEventListener()). |
| RenameNode() | Renombra el nodo especificado. |
| Write() | Escribe expresiones HTML o código JavaScript en un documento. |
| WriteLn() | Igual que document.write(), pero agrega un carácter de nueva línea después de cada declaración. |
Estos son los eventos del objeto document.
| Evento | Descripción |
|---|---|
| OnPointerLockChange | |
| OnPoiterLockError | |
| OnReadyStateChange |