HTML DOM
¿QUÉ ES EL DOM?• Document   Object Model• Un   estandar de la W3C (World Wide Web Consortium)• El  DOM define un estandar p...
PARTES / NIVELES• Core DOM - modelo estandar para cualquier documento estructurado• XML    DOM - modelo estandar para docu...
FUNCIÓN• El   DOM define objetos y propiedades de todos los elementos del documento y los métodos (interfaz) para accesar a...
¿QUÉ ES EL HTML DOM?• Un   modelo de objetos estandar para HTML• Una   interfaz estandar de programación para HTML• Indepe...
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 el...
EJEMPLO<html>  <head>    <title>Ejemplo de DOM</title>  </head>  <body>    <h1>Lecci&oacute;n 1</h1>    <p>Hola Mundo!</p>...
EL ÁRBOL DE NODOS
NODOS PADRES, HIJOS Y            HERMANOS•   En un árbol, el nodo superior es    llamado la raíz•   Todos los nodos, excep...
EJEMPLO<html>  <head>    <title>Ejemplo de DOM</title>  </head>  <body>    <h1>Lecci&oacute;n 1</h1>    <p>Hola Mundo!</p>...
INTERFAZ DE           PROGRAMACIÓN• Propiedades, regularmente    se refieren a algo que es.• Métodos, se   refieren a algo q...
PROPIEDADES DEL HTML              DOM• x.innerHTML      - el texto de x• x.nodeName      - el nombre de x• x.parentNode   ...
MÉTODOS DEL HTML DOM• x.getElementById(id)   - accesar al elemento con una id específica• x.getElementsByTagName(name)  - a...
EJEMPLOS http://bit.ly/hVAU3V
Upcoming SlideShare
Loading in …5
×

HTML DOM

2,703 views

Published on

Introducción al HTML DOM

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,703
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
49
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML DOM

  1. 1. HTML DOM
  2. 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. 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. 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. 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. 6. EN OTRAS PALABRAS• El HTML DOM es un estandar para accesar, cambiar, agregar o borrar elementos HTML
  7. 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
  8. 8. EJEMPLO<html>  <head>    <title>Ejemplo de DOM</title>  </head>  <body>    <h1>Lecci&oacute;n 1</h1>    <p>Hola Mundo!</p>  </body></html>
  9. 9. EL ÁRBOL DE NODOS
  10. 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
  11. 11. EJEMPLO<html>  <head>    <title>Ejemplo de DOM</title>  </head>  <body>    <h1>Lecci&oacute;n 1</h1>    <p>Hola Mundo!</p>  </body></html>
  12. 12. INTERFAZ DE PROGRAMACIÓN• Propiedades, regularmente se refieren a algo que es.• Métodos, se refieren a algo que se hace.
  13. 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. 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
  15. 15. EJEMPLOS http://bit.ly/hVAU3V

×