SlideShare una empresa de Scribd logo
OBJETO DOCUMENT
por
Desarrollo web en entorno cliente
DOM
DOCUMENT

BOM
DOM. Módelo de
objeto de documento

BOM. Modelo de
objeto de navegador

Estructura jerárquica en la que
se representan los
documentos HTML y XML.

Este concepto permite
acceder y modificar las
propiedades de las ventanas
del navegador.
DHTML
El conjunto de técnicas que permiten crear sitios web interactivos
utilizando una combinación de lenguaje HTML estático, un
lenguaje interpretado en el lado del cliente (como JavaScript), el
lenguaje de hojas de estilo en cascada (CSS) y la jerarquía de
objetos de un Document Object Model (DOM).
DOCUMENT
Es el elemento fundamental de la programación DHTML, ), dado
que es el que permite acceder y modificar todos los elementos de
una página
MÉTODOS
captureEvents(); → Captura eventos.
close(); → Cierra el flujo.
open(); → Abre el flujo.
MÉTODOS
clear(); → Borra el contenido.
write(); → Escribe dentro de la web.
writeln(); → Como write pero con salto de línea.
MÉTODOS
captureEvents(); → Para capturar eventos.
getElementById(); → Permite obtener un elemento mediante el
id.
getElementByName(); → Permite obtener elementos mediante
su atributo name.
EJEMPLOS DE USO
* nueva.document.open();
* nueva.document.write("<html><head><title>Nueva
ventana</title></head>");
* nueva.document.write("<body>Esto es una nueva
ventana</body></html>");
* nueva.document.close();
PROPIEDADES
lastModified ˃ fecha de la última modificación de la página
La
Referrer > La URL desde la que se accedió a la página (es decir, la
página anterior en el array history)

Title > El texto de la etiqueta <title>
PROPIEDADES
URL > La URL de la página actual del navegador
alinkColor > Almacena el color de los enlaces activos.
fgColor > Define el color de fondo o el color de texto del
documento actual.
linkColor > Almacena el color en formato RGB de los enlaces.
PROPIEDADES
bgColor > Almacena el del fondo del documento.
Cookie > Es una cadena con los valores de las cookies del
documento actual.

vlinkColor > Guarda el color en formato RGB de los enlaces
visitados.
domain > Guarda el nombre del servidor que ha servido el
documento.
PROPIEDADES - ARRAYS
anchors > Contiene todas las "anclas" de la página (los enlaces de
tipo <a name="nombre_ancla"></a>)
applets > Contiene todos los applets de la página

embeds > Contiene todos los objetos embebidos en la página
mediante la etiqueta <embed>
forms > Contiene todos los formularios de la página
PROPIEDADES - ARRAYS
images > Contiene todas las imágenes de la página
links > Contiene todos los enlaces de la página (los elementos de
tipo <a href="enlace.html"></a>)

plugins > Contiene todos los plugins del documento
layers > Contiene todas las capas del documentos
¿preguntas?

Más contenido relacionado

La actualidad más candente

Lenguaje html y sus usos
Lenguaje html y sus usosLenguaje html y sus usos
Lenguaje html y sus usos
Dunia Esther
 
Ba trabajo de organigrama
Ba trabajo de organigramaBa trabajo de organigrama
Ba trabajo de organigrama
lanegritabella
 
Conceptos Basicos de Html
Conceptos Basicos de HtmlConceptos Basicos de Html
Conceptos Basicos de Html
Nestor Fabian Koch
 
Cuales son los elementos de una pagina web
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina web
katherinviviana
 
Etiquetas de html giler
Etiquetas de html gilerEtiquetas de html giler
Etiquetas de html giler
Cheoooo
 
Nicolaas 1112
Nicolaas 1112Nicolaas 1112
Nicolaas 1112
Daniel Vargas
 
danny
dannydanny
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
sofydan
 
Elementos básicos y estructura de una página web
Elementos básicos y estructura de una página webElementos básicos y estructura de una página web
Elementos básicos y estructura de una página web
adri9610
 
HTML
HTMLHTML
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
EderMontes
 
Estilos css
Estilos cssEstilos css
Etiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parteEtiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parte
Wendy Navia Chambi
 
Colegio nacional nicolas esguerra (1)
Colegio nacional nicolas esguerra (1)Colegio nacional nicolas esguerra (1)
Colegio nacional nicolas esguerra (1)
Jeisson Estiven Micelly Moreno
 
Intro html5
Intro html5Intro html5
Intro html5
Pablo Mamani
 
Estructura basica de una pagina web
Estructura basica de una pagina webEstructura basica de una pagina web
Estructura basica de una pagina web
Piti Valeriano
 

La actualidad más candente (16)

Lenguaje html y sus usos
Lenguaje html y sus usosLenguaje html y sus usos
Lenguaje html y sus usos
 
Ba trabajo de organigrama
Ba trabajo de organigramaBa trabajo de organigrama
Ba trabajo de organigrama
 
Conceptos Basicos de Html
Conceptos Basicos de HtmlConceptos Basicos de Html
Conceptos Basicos de Html
 
Cuales son los elementos de una pagina web
Cuales son los elementos de una pagina webCuales son los elementos de una pagina web
Cuales son los elementos de una pagina web
 
Etiquetas de html giler
Etiquetas de html gilerEtiquetas de html giler
Etiquetas de html giler
 
Nicolaas 1112
Nicolaas 1112Nicolaas 1112
Nicolaas 1112
 
danny
dannydanny
danny
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 
Elementos básicos y estructura de una página web
Elementos básicos y estructura de una página webElementos básicos y estructura de una página web
Elementos básicos y estructura de una página web
 
HTML
HTMLHTML
HTML
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Estilos css
Estilos cssEstilos css
Estilos css
 
Etiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parteEtiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parte
 
Colegio nacional nicolas esguerra (1)
Colegio nacional nicolas esguerra (1)Colegio nacional nicolas esguerra (1)
Colegio nacional nicolas esguerra (1)
 
Intro html5
Intro html5Intro html5
Intro html5
 
Estructura basica de una pagina web
Estructura basica de una pagina webEstructura basica de una pagina web
Estructura basica de una pagina web
 

Similar a Objeto document de JavaScript

6. Utilización del modelo de objetos del documento (DOM)
6. Utilización del modelo de objetos del documento (DOM)6. Utilización del modelo de objetos del documento (DOM)
6. Utilización del modelo de objetos del documento (DOM)
Laura Folgado Galache
 
Html5, css3, java script
Html5, css3, java scriptHtml5, css3, java script
Html5, css3, java script
Jonathan Serrano
 
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y ValidacionesDesarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Didier Granados
 
Clase 8 Manipulación del DOM
Clase 8 Manipulación del DOMClase 8 Manipulación del DOM
Clase 8 Manipulación del DOM
José Ricardo Tillero Giménez
 
Taller MVVM Imagine Camp Medellín (Intermedio)
Taller MVVM Imagine Camp Medellín (Intermedio)Taller MVVM Imagine Camp Medellín (Intermedio)
Taller MVVM Imagine Camp Medellín (Intermedio)
Sorey García
 
HTML
HTMLHTML
Html
HtmlHtml
Guiajs2
Guiajs2Guiajs2
Html
HtmlHtml
Tarea investigación formativa unidad 1. html
Tarea investigación formativa unidad 1. htmlTarea investigación formativa unidad 1. html
Tarea investigación formativa unidad 1. html
zurdopizarro
 
Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3
Paradigma Digital
 
Html presentacion
Html presentacionHtml presentacion
Html presentacion
567magii
 
HTML5-Aplicaciones web
HTML5-Aplicaciones webHTML5-Aplicaciones web
HTML5-Aplicaciones web
CARLOS III UNIVERSITY OF MADRID
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
4000859
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
4000859
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
4000859
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
josecabrera987
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
Mariana Barreto
 
Presentacion Dw Portal V090309 1
Presentacion Dw Portal V090309 1Presentacion Dw Portal V090309 1
Presentacion Dw Portal V090309 1
aghnet
 
Html
HtmlHtml
Html
yndiralu
 

Similar a Objeto document de JavaScript (20)

6. Utilización del modelo de objetos del documento (DOM)
6. Utilización del modelo de objetos del documento (DOM)6. Utilización del modelo de objetos del documento (DOM)
6. Utilización del modelo de objetos del documento (DOM)
 
Html5, css3, java script
Html5, css3, java scriptHtml5, css3, java script
Html5, css3, java script
 
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y ValidacionesDesarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
Desarrollo de Aplicaciones Web II - Sesión 03 - Formularios y Validaciones
 
Clase 8 Manipulación del DOM
Clase 8 Manipulación del DOMClase 8 Manipulación del DOM
Clase 8 Manipulación del DOM
 
Taller MVVM Imagine Camp Medellín (Intermedio)
Taller MVVM Imagine Camp Medellín (Intermedio)Taller MVVM Imagine Camp Medellín (Intermedio)
Taller MVVM Imagine Camp Medellín (Intermedio)
 
HTML
HTMLHTML
HTML
 
Html
HtmlHtml
Html
 
Guiajs2
Guiajs2Guiajs2
Guiajs2
 
Html
HtmlHtml
Html
 
Tarea investigación formativa unidad 1. html
Tarea investigación formativa unidad 1. htmlTarea investigación formativa unidad 1. html
Tarea investigación formativa unidad 1. html
 
Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3
 
Html presentacion
Html presentacionHtml presentacion
Html presentacion
 
HTML5-Aplicaciones web
HTML5-Aplicaciones webHTML5-Aplicaciones web
HTML5-Aplicaciones web
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
 
Trabajo practico 2
Trabajo practico 2Trabajo practico 2
Trabajo practico 2
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
 
Presentacion Dw Portal V090309 1
Presentacion Dw Portal V090309 1Presentacion Dw Portal V090309 1
Presentacion Dw Portal V090309 1
 
Html
HtmlHtml
Html
 

Objeto document de JavaScript

  • 3. DOM. Módelo de objeto de documento BOM. Modelo de objeto de navegador Estructura jerárquica en la que se representan los documentos HTML y XML. Este concepto permite acceder y modificar las propiedades de las ventanas del navegador.
  • 4. DHTML El conjunto de técnicas que permiten crear sitios web interactivos utilizando una combinación de lenguaje HTML estático, un lenguaje interpretado en el lado del cliente (como JavaScript), el lenguaje de hojas de estilo en cascada (CSS) y la jerarquía de objetos de un Document Object Model (DOM).
  • 5. DOCUMENT Es el elemento fundamental de la programación DHTML, ), dado que es el que permite acceder y modificar todos los elementos de una página
  • 6. MÉTODOS captureEvents(); → Captura eventos. close(); → Cierra el flujo. open(); → Abre el flujo.
  • 7. MÉTODOS clear(); → Borra el contenido. write(); → Escribe dentro de la web. writeln(); → Como write pero con salto de línea.
  • 8. MÉTODOS captureEvents(); → Para capturar eventos. getElementById(); → Permite obtener un elemento mediante el id. getElementByName(); → Permite obtener elementos mediante su atributo name.
  • 9. EJEMPLOS DE USO * nueva.document.open(); * nueva.document.write("<html><head><title>Nueva ventana</title></head>"); * nueva.document.write("<body>Esto es una nueva ventana</body></html>"); * nueva.document.close();
  • 10. PROPIEDADES lastModified ˃ fecha de la última modificación de la página La Referrer > La URL desde la que se accedió a la página (es decir, la página anterior en el array history) Title > El texto de la etiqueta <title>
  • 11. PROPIEDADES URL > La URL de la página actual del navegador alinkColor > Almacena el color de los enlaces activos. fgColor > Define el color de fondo o el color de texto del documento actual. linkColor > Almacena el color en formato RGB de los enlaces.
  • 12. PROPIEDADES bgColor > Almacena el del fondo del documento. Cookie > Es una cadena con los valores de las cookies del documento actual. vlinkColor > Guarda el color en formato RGB de los enlaces visitados. domain > Guarda el nombre del servidor que ha servido el documento.
  • 13. PROPIEDADES - ARRAYS anchors > Contiene todas las "anclas" de la página (los enlaces de tipo <a name="nombre_ancla"></a>) applets > Contiene todos los applets de la página embeds > Contiene todos los objetos embebidos en la página mediante la etiqueta <embed> forms > Contiene todos los formularios de la página
  • 14. PROPIEDADES - ARRAYS images > Contiene todas las imágenes de la página links > Contiene todos los enlaces de la página (los elementos de tipo <a href="enlace.html"></a>) plugins > Contiene todos los plugins del documento layers > Contiene todas las capas del documentos