Document

La interfaz Document representa cualquier página web cargada 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.

1. Propiedades

Propiedades de document
PropiedadDescripción
ActiveElementDevuelve el elemento actualmente enfocado en el documento.
All?
Async?
AnchorsDevuelve una colección de todos los elementos <a> en el documento que tienen un atributo de nombre.
AppletsDevuelve una colección de todos los elementos <applet> en el documento
BaseURIDevuelve el URI base absoluto de un documento.
BodyEstablece o devuelve el cuerpo del documento (el elemento <body>).
CookieDevuelve todos los pares clave/valor en el documento. Ver documento.cookie
ChartsetDepreated. Reemplazado por characterSet
CharacterSetDevuelve la codificación de caracteres para el documento.
ContentType?
DefaultViewDevuelve el objeto de ventana asociado con un documento, o nulo si no hay ninguno disponible.
DesignModeControla si todo el documento debe ser editable o no.
DocTypeDevuelve la declaración de tipo de documento asociada con el documento actual.
DocummentElementDevuelve el elemento de documento del documento (el elemento <html>)
DocumentModeDevuelve el modo utilizado por el navegador para representar el documento.
DocumentURIEstablece o devuelve la ubicación del documento.
DomainDevuelve el nombre de dominio del servidor que cargó el documento.
DomCongifDeprecated.
EmbedsDevuelve una colección de todos los elementos <embed> del documento.
FormsDevuelve una colección de todos los elementos <form> en el documento.
FullscreenElementDevuelve el elemento actual que se muestra en modo de pantalla completa.
HeadDevuelve el elemento <head> del documento.
ImagesDevuelve una colección de todos los elementos <img> en el documento.
ImplementationDevuelve el objeto DOM Implementation que maneja este documento.
InputEncodingDevuelve la codificación, juego de caracteres, utilizado para el documento.
LastModifiedDevuelve la fecha y hora de la última modificación del documento.
LinksDevuelve una colección de todos los elementos <a> y <area> en el documento que tienen un atributo href.
ReadyStateDevuelve el estado (cargando) del documento.
ReferrerDevuelve la URL del documento que cargó el documento actual.
ScriptsDevuelve una colección de elementos <script> en el documento.
StrictError>CheckingEstablece o devuelve si la verificación de errores se aplica o no.
StyleSheets?
TitleEstablece o devuelve el título del documento.
URLDevuelve la URL completa del documento HTML.

2. Métodos de document

Métodos de document
MétodoDescripción
AddEventListener()Adjunta un controlador de eventos al documento.
AdoptNode()Adopta un nodo de otro documento.
CaptureEvents()?
Clear()?
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
GetElementByClassName()Devuelve una colección HTML que contiene todos los elementos con clase especificada. Ver innerHTML
GetElementByName()Devuelve una colección HTML que contiene todos los elementos con un nombre especificado. Ver innerHTML
GetElementByTagName()Devuelve una colección HTML que contiene todos los elementos con una etiqueta especificado. Ver innerHTML
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.

3. Eventos de document

Eventos de document
EventoDescripción
OnPointerLockChange
OnPoiterLockError
OnReadyStateChange

4. Objetos

Describimos algunos objetos de document.

4.1 cookie

Las cookies 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.

4.2 innerHTML

Para acceder a un elemento HTML, JavaScript puede usar el metodo 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';

4.3 anchor

La colección de anclajes devuelve una colección de todos los elementos a del documento que tienen un atributo de nombre.

Los elementos de la colección se ordenan tal como aparecen en el código fuente.

Propiedades de anchor
PropiedadDescripción
lengthDevuelve el numero de elemento a de la coleccion. Solo lectura.
Metodos de anchor
MetodoDescripció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;

4.4 forms

La colección de formularios devuelve una colección de todos los elementos form en el documento.

Propiedades de form
PropiedadDescripción
lengthDevuelve el numero de elemento form de la coleccion. Solo lectura.
Metodos de form
MetodoDescripció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>";
}

4.5 links