html dom
DESCRIPTION
Introducción al HTML DOMTRANSCRIPT
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
• El HTML DOM es un estandar para accesar, cambiar, agregar o borrar elementos HTML
EN OTRAS PALABRAS
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ó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ó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
