-
Dom HTML Tutorial
-
HTML DOM es un acrónimo que significa hipertexto lenguaje de marcado de documentos de modelo de objetos. Esto describe la jerarquía del objeto de documento HTML y todos los objetos y métodos dentro de ella. El uso de este concepto dentro de un lenguaje de scripts, como JavaScript, crea HTML dinámico o DHTML. DHTML es cuando JavaScript se utiliza para modificar los elementos dentro del HTML DOM.Instrucciones
1 Escribe algo de HTML con un elemento identificado por su atributo id para el acceso DOM más tarde.
<Html>
<Head>
<Title> DOM HTML Tutorial </ title>
</ Head>
<Body>
<Div id = "myDiv"> contenido de div </ div>
fuera del div
</ Body>
</ Html>
Que va a utilizar el DOM HTML para acceder al elemento <div> que acabamos de crear.
2 Insertar JavaScript en el elemento <head> del documento HTML. Éste señalará la variable "myElement" al primer elemento HTML con el atributo "id" en "myDiv", y debería funcionar en casi todos los navegadores web.
<Script type = "text / javascript">
myElement = document.getElementById ( "myDiv");
</ Script>
Para recuperar una matriz de elementos HTML, se puede utilizar en su lugar el getElementsByTagName métodos menos apoyado o getElementsByClassName. Consulte la sección de Recursos para leer más sobre estos métodos.
3 Manipular los atributos del elemento HTML para hacer DHTML.
myElement.innerHTML = "nuevo contenido del div";
myElement.style.backgroundColor = "red";
Estas dos líneas de JavaScript van a cambiar el contenido de myDiv al nuevo texto, y cambie el color de fondo de myDiv a rojo.
Consejos y advertencias
- Estos son los pasos para la implementación del DOM HTML en JavaScript. Para una referencia completa de HTML DOM objetos y métodos, utilice los enlaces en las secciones Referencias y Recursos.
