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.

El primer HTML DOM Nivel 1 (1998), definió 11 objetos HTML, los que aun son válidos en HTML5. Más tarde, en HTML DOM Nivel 3, se agregaron más objetos y colecciones.

1. Propiedades de document

Las propiedades HTML DOM son valores de elementos HTML que pueden: consultar, establecer o cambiar.

Propiedades de document
PropiedadDescripciónDOM
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.1
AppletsDevuelve una colección de todos los elementos <applet> en el documento1
BaseURIDevuelve el URI base absoluto de un documento.3
BodyEstablece o devuelve el cuerpo del documento (el elemento <body>).1
CookieDevuelve todos los pares clave/valor en el documento.1
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.3
DocummentElementDevuelve el elemento de documento del documento (el elemento <html>)3
DocumentModeDevuelve el modo utilizado por el navegador para representar el documento.3
DocumentURIEstablece o devuelve la ubicación del documento.3
DomainDevuelve el nombre de dominio del servidor que cargó el documento.1
DomCongifDeprecated.3
EmbedsDevuelve una colección de todos los elementos <embed> del documento.3
FormsDevuelve una colección de todos los elementos <form> en el documento.1
FullscreenElementDevuelve el elemento actual que se muestra en modo de pantalla completa.
HeadDevuelve el elemento <head> del documento.3
ImagesDevuelve una colección de todos los elementos <img> en el documento.1
ImplementationDevuelve el objeto DOM Implementation que maneja este documento.3
InputEncodingDevuelve la codificación, juego de caracteres, utilizado para el documento.3
LastModifiedDevuelve la fecha y hora de la última modificación del documento.3
LinksDevuelve una colección de todos los elementos <a> y <area> en el documento que tienen un atributo href.1
ReadyStateDevuelve el estado (cargando) del documento.3
ReferrerDevuelve la URL del documento que cargó el documento actual.1
ScriptsDevuelve una colección de elementos <script> en el documento.3
StrictError>CheckingEstablece o devuelve si la verificación de errores se aplica o no.3
StyleSheets??
TitleEstablece o devuelve el título del documento.1
URLDevuelve la URL completa del documento HTML.1

2. Métodos de document

Un método es una acción que puede realizar sobre un elemento HTML.

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 document.anchors

Devuelve una colección de todos los elementos <a> del DOM que tienen un atributo de nombre. Su única propiedad es length.

Propiedades de anchors
PropiedadDescripción
name
text
x
y

Métodos de anchors
MétodoDescripción
[index]Devuelve el elemento de la colección con el índice especificado (comienza en 0). Devuelve null si el número de índice está fuera de rango.
item(index)Devuelve el elemento de la colección con el índice especificado (comienza en 0). Devuelve null si el número de índice está fuera de rango
namedItem(id)Devuelve el elemento de la colección con el id especificado. Devuelve null si la identificación no existe.

document.anchors[n].innerHTML;

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

4.2 document.body

La propiedad body establece o devuelve el cuerpo del documento.

document.anchors[n].innerHTML;

La diferencia es que esta propiedad devuelve el elemento <body>, mientras que la propiedad document.documentElement devuelve el elemento <html>.

document.body;
document.body = 'nuevo contenido';

Ejemplo


4.3 document.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.4 documenoElement



4.5 document.embeds



4.6 document.forms



Propiedades de document.forms
PropiedadDescripción
disabled
max
min
pattern
requiered
type
Metodos de document.forms
MetodoDescripción

Para conocer la colección de objetos de forms

4.7 document.head



4.8 document.images



4.9 document.links

La colección de enlaces devuelve una colección de todos los enlaces en el documento. Los enlaces en la colección representan elementos <a> y / o elementos <area> con un atributo href. Si al elemento le falta el atributo href, no se devuelve nada.



Propiedades de document.links
PropiedadDescripción
hash
host
hostname
href
pathname
port
protocol
search
target
text
x
y

4.10 document.scripts