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.
Debido a ello, para crear operaciones con
objetos de programación, accederemos eficientemente a elementos del modelo DOM
en el desarrollo
web, según las
reglas del lenguaje Javascript.
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.
MisiónCon 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.
CierreGracias 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.
