A veces, los creadores de páginas web, al implementar el modelo DOM, tienen problemas en la obtención de los resultados deseados, debido a la escritura de forma incorrecta de las instrucciones, además deconocen muchas de ellas.

El modelo objeto de un documento tiene propiedades estándares, mediante las cuales se accede a cada uno de los elementos. Existen diferentes variables dispuestas para el uso de DOM en HTML, document, es una de ellas, utilizada para realizar la búsqueda de un elemento en el documento. Para comprender correctamente veamos el siguiente ejemplo:

061-01_1310_ilu01. Ubicación de id con DOM

La instrucción anterior quiere decir:

• Var objeto: crea una variable llamada objeto.
• Document.getElementById(“ejemplo1”): busca en el documento, el elemento con la propiedad id y valor ejemplo1.
• innerHTML: encuentra el contenido dentro de la etiqueta, identificada con el id especificado anteriormente.

Con el DOM es posible acceder a un grupo de etiquetas de HTML, con el uso de la instrucción document.getElementsByTagName. Al implementarla, el navegador retorna una lista de todos los elementos identificados, por la etiqueta definida entre paréntesis. Con la lista retornada es posible acceder a cada elemento, mediante arreglos y recorrerlos con estructuras como for, while y do while.  

061-01_1310_ilu02. Ubicación de etiqueta con DOM

A las clases de HTML definidas con el atributo class e identificadas de forma única con la propiedad id, se acceden mediante la instrucción document.getElementsByClassName. Del mismo modo a la ubicación de una etiqueta, también retorna una lista con cada elemento encontrado. En la siguiente imagen tenemos un ejemplo de la especificación de esta instrucción.

061-01_1310_ilu03. Ubicación de clase con DOM

Mediante la instrucción setAttribute, dispuesta en el DOM, es posible asignar un nuevo valor a las etiquetas de HTML. En ella se especifican dos valores dentro del paréntesis, uno para la propiedad a cambiar y el otro para el nuevo valor de la misma. Veamos la siguiente instrucción:

061-01_1309_ilu04. Ubicación de clase con DOM

El navegador web realiza el siguiente procedimiento para comprender el código anterior:

• Muestra un elemento de enlace con identificador, “ejemplo1”, el cual dirige a la página www.javahtmlcss.com.
• Crea una variable llamada “objeto”, a la cual le asigna el enlace creado anteriormente.
• Modifica la variable llamada “objeto” y asigna un nuevo enlace en la propiedad src.

El modelo DOM es extenso y aunque requiere un estudio minucioso, permite realizar variedades de páginas dinámicas, en donde debemos tener cuidado con las mayúsculas y minúsculas. En la página oficial de W3C se encuentran las especificaciones actualizadas.

Keynotes 

• El modelo objeto de un documento tiene propiedades estándares, mediante las cuales se accede a cada uno de los elementos. Existen diferentes variables dispuestas para el uso de DOM en HTML, document, es una de ellas, utilizada para realizar la búsqueda de un elemento en el documento.
• Con el DOM es posible acceder a un grupo de etiquetas de HTML, con el uso de la instrucción document.getElementsByTagName. Al implementarla, el navegador retorna una lista de todos los elementos identificados, por la etiqueta definida entre paréntesis.
• A las clases de HTML definidas con el atributo class e identificadas de forma única con la propiedad id, se acceden mediante la instrucción document.getElementsByClassName. Del mismo modo a la ubicación de una etiqueta, también retorna una lista con cada elemento encontrado.
• Mediante la instrucción setAttribute, dispuesta en el DOM, es posible asignar un nuevo valor a las etiquetas de HTML. En ella se especifican dos valores dentro del paréntesis, uno para la propiedad a cambiar y el otro para el nuevo valor de la misma.

Con el fin de crear de forma correcta operaciones con objetos de programación, crea accesos diferentes a elementos, mediante el modelo DOM, según las reglas del lenguaje Javascript.

Pasos a seguir:

• Ubica la especificación actual del modelo DOM del lenguaje Javascript.
• Crea la especificación para cinco accesos diferentes a elementos, mediante el modelo DOM.
• Mediante vPages contacta a un experto de la materia y envíale tu especificación, a fin de tomar notas de sus recomendaciones.

Sabrás que has tenido éxito cuando se ejecuten correctamente las especificaciones de accesos creados.

Modifica la especificación si es necesario y comparte el resultado en tu vPages.

Tiempo disponible: 3 horas.

Gracias al acceso eficiente a elementos del modelo DOM en el desarrollo web, según las reglas del lenguaje Javascript, obtenemos los resultados deseados al momento de usar sus propiedades. Y creamos operaciones con objetos de programación, a través del uso de este modelo. La concentración y práctica constante influyen en el uso correcto de las instrucciones dispuestas en DOM.