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

DOM ( Document Object Model )
DOM ( Document Object Model )DOM ( Document Object Model )
DOM ( Document Object Model )
ITSTB
 
Principios basicos del html
Principios basicos del htmlPrincipios basicos del html
Principios basicos del html
wenorro
 

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

redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
nicho110
 

Último (11)

Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos Basicos
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.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