Métodos de document

  • Por
Vemos una lista de los eventos disponibles en el objeto document.

El objeto document, localizado debajo del objeto window en la jerarquía de objetos de Javascript, también tiene una lista de métodos interesantes. La vemos a continuación.

captureEvents()

Para capturar los eventos que ocurran en la página web. Recibe como parámetro el evento que se desea capturar.

close()

Cierra el flujo del documento. (Se verá más adelante en este manual un artículo sobre el flujo del documento)

contextual()

Ofrece una línea de control de los estilos de la página. En el caso que deseemos especificarlos con Javascript.

getSelection()

Devuelve un string que contiene el texto que se ha seleccionado. Sólo funciona en Netscape.

handleEvent()

Invocas el manejador de eventos del elemento especificado.

open()

Abre el flujo del documento.

releaseEvents()

Liberar los eventos capturados del tipo que se especifique, enviándolos a los objetos siguientes en la jerarquía.

routeEvent()

Pasa un evento capturado a través de la jerarquía de eventos habitual.

write()

Escribe dentro de la página web. Podemos escribir etiquetas HTML y texto normal.

writeln()

Escribe igual que el método write(), aunque coloca un salto de línea al final.

Los eventos de document sirven principalmente para controlar dos cosas. Un grupo nos ofrece una serie de funciones para el control de los documentos, como escribir, abrirlos y cerrarlos. Los veremos en el capítulo siguiente que habla sobre el control del flujo de escritura del documento. El otro grupo ofrece herramientas para el control de los eventos en el documento y lo veremos más adelante cuando tratemos con detenimiento el tema de eventos.

Se nos queda un poco suelto el método getSelection(), que sólo funciona en los navegadores de Netscape y, por tanto, no resulta muy útil para aplicaciones que deseemos que sean compatibles en todos los sistemas. Aun así, haremos el ejemplo sobre este método, ya que los otros los vamos a ver en siguientes capítulos.

El ejemplo consiste en una página que tiene un poco de texto y un botón. En la página podremos seleccionar algo de texto y luego apretar el botón, que llama a una función que muestra en una caja alert el texto que se ha seleccionado. El código es el siguiente:

<html> 
<head> 
<title>Rescatar lo seleccionado</title> 
<script language="JavaScript"> 
function mostrarSeleccionado(){ 
   	alert("Has seleccionado:n" + document.getSelection()) 
} 
</script> 
</head>

<body> 
<h1>Rescatar lo seleccionado</h1> 
<br>

<form> 
<input type="button" value="pulsame!" onClick="mostrarSeleccionado()"> 
</form>

Selecciona cualquier texto de la página y pulsa sobre el botón.

</body> 
</html>

Se puede ver en funcionamiento el script en una página aparte, aunque sólo funcionará en Netscape e Internet Explorer dará un error.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Sergio

13/12/2007
Me he fijado que los scripts que funcionan en nestcape también funcionan en mozilla, creo que seria interesante ponerlo también.

Fernando

13/11/2009
Seleccionar texto funciona en Safari 4
Se ve que era un método interesante a mantener... :)

TyrantRC

07/2/2011
Corregir!
Actualmente getSelection() esta incluido en navegadores como Firefox, google chrome y Opera.. Probado por mi mismo

Sino me crees ejecuta este ejemplo en esos exploradores

<!DOCTYPE html>

<html>
<head>
<title>Titulo xd</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<form name="formulario" id="formulario">
<p class="classname">Selecciona un texto y presionas el boton D:</p></p>
<p class="classname">Texto de prueba ... Puedes utilizar este fuckig texto asadadadadad qwertyuiopasdfghjklzxcvbnm,. :D!!!</p>
<input type="Button" value="Mostrar texto seleccionado " onclick="alert(document.getSelection())">
</form>
</body>
</html>

usuario_borrado_743392

19/4/2011
Ejemplo
El ejemplo de arriba también funciona

Javi

09/1/2014
Uso de objetos
Estoy intentando opner un comentario pero no me deja, algo mas extenso que este pero tampoco muy exagerado.