[FECHA DE PUBLICACIÓN : 2016-07-14]
getElementById
El docente explico el ejercicio de nivelacion del segundo periodo en clase.
El ejercicio consistía en digitar una palabra en la caja de texto “A” al oprimir el “botón a” la palabra digitada apareciera en la parte de abajo en la caja de texto donde dice “texto”, digitar una palabra en la caja de texto “B” al oprimir el “botón b” la palabra digitada apareciera en la parte de abajo en la caja de texto donde dice “texto” , digitar una palabra en la caja de texto “C” al oprimir el “botón c” la palabras digitadas aparecen en forma de frase.
Podemos acceder a los nodos del DOM (Document Object Model) usando
JavaScript y los índices de array y relaciones padre – hijo – hermanos
(parent, chidNodes, siblings), pero en general nos será más útil poder
acceder directamente a aquel nodo que nos resulte de interés. JavaScript
proporciona varias funciones para el acceso directo a nodos.
ACCESO DIRECTO A NODOS
Las formas de acceder directamente a nodos con JavaScript podemos resumirlas así:
|
Acceso directo a nodos
|
Sintaxis
|
Ejemplo
|
|
Elegido por su atributo id
|
document.getElementById('valorId');
|
document.getElementById (menu1);
|
|
Elegido por su atributo name
|
document.getElementsByName('valorName');
|
document.getElementsBy Name('peticionDatos');
|
|
Elegido por el tipo de etiqueta HTML (tag)
|
document.getElementsByTagName('valorTag');
|
document.getElementsByTag Name(span);
|
|
Elegido por class CSS
|
document.getElementsByClassName('valorClase');
|
document.getElementsByClassName('destacado');
|
|
Elegido por selector CSS
|
document.querySelectorAll('selectorCSS');
|
document.querySelectorAll ('#menu1 p');
|
|
Elegido por selector CSS
|
document.querySelector('selectorCSS');
|
document.querySelector ('#menu1 p');
|
Hace unos años se usaba document.all para realizar selección de nodos
en un documento, por ejemplo document.all.tags(“div”) devolvía todos los
elementos div en un documento, pero esta sintaxis se considera obsoleta
por lo que no vamos a usarla.
Una vez que tenemos acceso directo a los nodos podemos empezar a hacer
cosas interesantes como modificar dinámicamente los nodos, como veremos
en el ejemplo de código que mostramos más abajo.
GET ELEMENT BY ID
Un atributo que pueden tener las etiquetas HTML es el valor de id, que
permite entre otras cosas establecer estilos CSS para dicho elemento y
sus descendientes. Por ejemplo <div id="contenedor"> establece que
el id para este elemento div es “contenedor”.
El atributo id nos va a permitir acceder a un nodo del DOM con dicho
valor de atributo. Recordar que en un documento HTML no debería existir
más de un elemento con un mismo id. Es decir, los ids deben ser únicos
(identificadores únicos de un elemento). En caso de tener dos elementos
dentro de nuestro documento HTML que tengan el mismo id, pueden surgir
errores (seguramente JavaScript devuelva el primer elemento con el id
especificado que encuentre, pero no deberíamos trabajar teniendo ids
repetidos porque esto es incorrecto).
El nombre de la función document.getElementById('valorId') nos informa
sobre su cometido: nos devuelve un solo nodo de “tipo elemento” del DOM
cuyo id coincide con el pasado como argumento.
Una vez tenemos el nodo con el id deseado, podemos modificar
dinámicamente sus propiedades. En el siguiente código vemos un ejemplo
donde el objetivo es mostrar una imagen con dos botones en su parte
inferior: “<<<Atrás” para ir hacia atrás y mostrar una imagen
anterior o “Adelante>>>” para ir hacia delante y mostrar una
imagen posterior. Si ya estamos en la primera imagen o en la última,
aparecerá un mensaje indicando que no es posible realizar ese
movimiento. Escribe el código, ejecútalo y razona sobre él. Ten en
cuenta que podría surgir algún problema de compatibilidad con tu
navegador. Si es así, localiza dónde se encuentra ese problema y
corrígelo
Comentarios
Publicar un comentario