SlideShare una empresa de Scribd logo
1 de 15
Descargar para leer sin conexión
HTML DOM
¿QUÉ ES EL DOM?


• Document   Object Model

• Un   estandar de la W3C (World Wide Web Consortium)

• El
  DOM define un estandar para accesar a documentos como
 HTML y XML
PARTES / NIVELES


• Core DOM - modelo estandar para cualquier documento
 estructurado

• XML    DOM - modelo estandar para documentos XML

• HTML    DOM - modelo estandar para cualquier documento
 HTML
FUNCIÓN



• El
   DOM define objetos y propiedades de todos los elementos
 del documento y los métodos (interfaz) para accesar a ellos.
¿QUÉ ES EL HTML DOM?


• Un   modelo de objetos estandar para HTML

• Una   interfaz estandar de programación para HTML

• Independiente   de la plataforma o lenguaje

• Un   estandar de la W3C
EN OTRAS PALABRAS



• El
   HTML DOM es un estandar para accesar, cambiar, agregar o
 borrar elementos HTML
NODOS DOM

• Todo   en HTML es un nodo

• El   documento entero es un nodo de documento

• Cada   elemento HTML es un nodo de elemento

• Cada   texto en el HTML son nodos de texto

• Cada   atributo de HTML es un nodo de atributo

• Los   comentarios son un nodo de comentarios
EJEMPLO

<html>
  <head>
    <title>Ejemplo de DOM</title>
  </head>
  <body>
    <h1>Lecci&oacute;n 1</h1>
    <p>Hola Mundo!</p>
  </body>
</html>
EL ÁRBOL DE NODOS
NODOS PADRES, HIJOS Y
            HERMANOS
•   En un árbol, el nodo superior es
    llamado la raíz

•   Todos los nodos, excepto la raíz,
    tienen un solo nodo padre

•   Un nodo puede tener cualquier
    número de hijos

•   Una hoja es un nodo sin hijos

•   Los nodos hermanos son los que
    tienen el mismo padre
EJEMPLO

<html>
  <head>
    <title>Ejemplo de DOM</title>
  </head>
  <body>
    <h1>Lecci&oacute;n 1</h1>
    <p>Hola Mundo!</p>
  </body>
</html>
INTERFAZ DE
           PROGRAMACIÓN


• Propiedades, regularmente    se refieren a algo que es.

• Métodos, se   refieren a algo que se hace.
PROPIEDADES DEL HTML
              DOM

• x.innerHTML      - el texto de x

• x.nodeName      - el nombre de x

• x.parentNode     - el nodo padre de x

• x.childNodes    - los nodos hijos de x

• x.attributes   - los nodos de atributos de x
MÉTODOS DEL HTML DOM

• x.getElementById(id)   - accesar al elemento con una id
 específica

• x.getElementsByTagName(name)  - accesar a todos los
 elementos con una etiqueta específica

• x.appendChild(node)    - insertar un nodo hijo a x

• x.removeChild(node)    - quitar un nodo hijo de x
EJEMPLOS
 http://bit.ly/hVAU3V

Más contenido relacionado

Similar a HTML DOM (20)

DOM-28-04-23.pptx
DOM-28-04-23.pptxDOM-28-04-23.pptx
DOM-28-04-23.pptx
 
Html
HtmlHtml
Html
 
domPwebAula03.pptx
domPwebAula03.pptxdomPwebAula03.pptx
domPwebAula03.pptx
 
1
11
1
 
Introducción al HTML
Introducción al HTMLIntroducción al HTML
Introducción al HTML
 
Apuntes: Manejar el DOM con JavaScript
Apuntes: Manejar el DOM con JavaScriptApuntes: Manejar el DOM con JavaScript
Apuntes: Manejar el DOM con JavaScript
 
Introducción a html
Introducción a htmlIntroducción a html
Introducción a html
 
DOM ( Document Object Model )
DOM ( Document Object Model )DOM ( Document Object Model )
DOM ( Document Object Model )
 
Principios basicos del html
Principios basicos del htmlPrincipios basicos del html
Principios basicos del html
 
Htm ltlalti
Htm ltlaltiHtm ltlalti
Htm ltlalti
 
css presentacion.pptx
css presentacion.pptxcss presentacion.pptx
css presentacion.pptx
 
05 Introduccion a HTML
05 Introduccion a HTML05 Introduccion a HTML
05 Introduccion a HTML
 
Presentación
PresentaciónPresentación
Presentación
 
Dispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdfDispositivas CURSO HTML 5.pdf
Dispositivas CURSO HTML 5.pdf
 
Lenguajes de marcado
Lenguajes de marcadoLenguajes de marcado
Lenguajes de marcado
 
Camilo diaz
Camilo diazCamilo diaz
Camilo diaz
 
CODIGO HTML
CODIGO HTMLCODIGO HTML
CODIGO HTML
 
Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1
 
Presentacion asignatura
Presentacion asignaturaPresentacion asignatura
Presentacion asignatura
 
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)
 

Último

El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELmaryfer27m
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx241522327
 
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptLUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptchaverriemily794
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.241514949
 
Tecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptxTecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptxGESTECPERUSAC
 
Explorando la historia y funcionamiento de la memoria ram
Explorando la historia y funcionamiento de la memoria ramExplorando la historia y funcionamiento de la memoria ram
Explorando la historia y funcionamiento de la memoria ramDIDIERFERNANDOGUERRE
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadMiguelAngelVillanuev48
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA241531640
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxNombre Apellidos
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxAlexander López
 
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptTEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptJavierHerrera662252
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxazmysanros90
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx241523733
 
Segunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptxSegunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptxMariaBurgos55
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfjeondanny1997
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas  educativadefinicion segun autores de matemáticas  educativa
definicion segun autores de matemáticas educativaAdrianaMartnez618894
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxJOSEFERNANDOARENASCA
 
Hernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxHernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxJOSEMANUELHERNANDEZH11
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfSergioMendoza354770
 
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptxGoogle-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptxAlexander López
 

Último (20)

El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFEL
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx
 
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).pptLUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
LUXOMETRO EN SALUD OCUPACIONAL(FINAL).ppt
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.
 
Tecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptxTecnologias Starlink para el mundo tec.pptx
Tecnologias Starlink para el mundo tec.pptx
 
Explorando la historia y funcionamiento de la memoria ram
Explorando la historia y funcionamiento de la memoria ramExplorando la historia y funcionamiento de la memoria ram
Explorando la historia y funcionamiento de la memoria ram
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidad
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
 
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptTEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptx
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx
 
Segunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptxSegunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptx
 
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdfLa Electricidad Y La Electrónica Trabajo Tecnología.pdf
La Electricidad Y La Electrónica Trabajo Tecnología.pdf
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas  educativadefinicion segun autores de matemáticas  educativa
definicion segun autores de matemáticas educativa
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptx
 
Hernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxHernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptx
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
 
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptxGoogle-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
 

HTML DOM

  • 2. ¿QUÉ ES EL DOM? • Document Object Model • Un estandar de la W3C (World Wide Web Consortium) • El DOM define un estandar para accesar a documentos como HTML y XML
  • 3. PARTES / NIVELES • Core DOM - modelo estandar para cualquier documento estructurado • XML DOM - modelo estandar para documentos XML • HTML DOM - modelo estandar para cualquier documento HTML
  • 4. FUNCIÓN • El DOM define objetos y propiedades de todos los elementos del documento y los métodos (interfaz) para accesar a ellos.
  • 5. ¿QUÉ ES EL HTML DOM? • Un modelo de objetos estandar para HTML • Una interfaz estandar de programación para HTML • Independiente de la plataforma o lenguaje • Un estandar de la W3C
  • 6. EN OTRAS PALABRAS • El HTML DOM es un estandar para accesar, cambiar, agregar o borrar elementos HTML
  • 7. NODOS DOM • Todo en HTML es un nodo • El documento entero es un nodo de documento • Cada elemento HTML es un nodo de elemento • Cada texto en el HTML son nodos de texto • Cada atributo de HTML es un nodo de atributo • Los comentarios son un nodo de comentarios
  • 9. EL ÁRBOL DE NODOS
  • 10. NODOS PADRES, HIJOS Y HERMANOS • En un árbol, el nodo superior es llamado la raíz • Todos los nodos, excepto la raíz, tienen un solo nodo padre • Un nodo puede tener cualquier número de hijos • Una hoja es un nodo sin hijos • Los nodos hermanos son los que tienen el mismo padre
  • 12. INTERFAZ DE PROGRAMACIÓN • Propiedades, regularmente se refieren a algo que es. • Métodos, se refieren a algo que se hace.
  • 13. PROPIEDADES DEL HTML DOM • x.innerHTML - el texto de x • x.nodeName - el nombre de x • x.parentNode - el nodo padre de x • x.childNodes - los nodos hijos de x • x.attributes - los nodos de atributos de x
  • 14. MÉTODOS DEL HTML DOM • x.getElementById(id) - accesar al elemento con una id específica • x.getElementsByTagName(name) - accesar a todos los elementos con una etiqueta específica • x.appendChild(node) - insertar un nodo hijo a x • x.removeChild(node) - quitar un nodo hijo de x