Aprende Web
Crea y diseña tus sitios en la Web.
Manual de Javascript
Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 29
Visitas el mes pasado: 89
WEB-GRAFÍA
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
- Desarrollo Web: manual de Javascript
- Desarrollo Web, por Miguel Angel Álvarez
- Libros Web: introducción a Javascript
- Libros web, por Javier Eguíluz Pérez
- Curso de Javascript: Programación Web
- www.programacionweb.net
- WebEstilo: JavaScript
- www.webestilo.com
- W3 schools; Javascript Tutorial
- www.w3schools.com
- Manual de Javascript: José Antonio Rodríguez.
- Jose Antonio Rodriguez: manual en PDF
GRACIAS
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
5. Acceso al DOM (II)
5.2 Métodos del DOM
Acceso y modificación
Al trabajar con un elemento de la página, debemos dar siempre dos pasos, el primero es acceder al elemento en sí, y el segundo aplicarle la modificación que queremos. Aunque a veces los dos pasos se pueden dar en una única sentencia, normalmente tendremos un método para acceder al elemento (es decir buscarlo en la página) y otro para modificarlo (leer, escribir, ampliar, reemplazar, borrar, crear uno nuevo, etc).
La estructura DOM nos permite encontrar los elementos de la página de una manera sencilla, mediante unas funciones o métodos predeterminados.
El método getElementById() que ya vimos en la página 4.1 Insertar Elementos es uno de ellos; y la propiedad innerHTML es el segundo paso, es decir modificar el elemento. Existen más formas de acceder a un elemento, aunque esta vista hasta ahora suele ser una de las más usadas, por ser bastante práctica.
Acceso a las etiquetas
Vamos a ver aquí diferentes métodos para acceder a las etiquetas de la página, los diferentes
métodos en realidad son funciones del DOM y más concretamente del objeto document, por lo
que al escribirlas deben llevar siempre la palabra document seguida de un punto:
-document.-.
Acceso mediante getElementsByTagName()
document.getElementsByTagName(" ") : Este método permite acceder a todos los
elementos cuya etiqueta sea igual al parámetro proporcionado. Dentro del paréntesis se escribirá entre
comillas el nombre de la etiqueta de la que se quieren ver todos sus elementos. El resultado es un
array en el que cada variable será una etiqueta.
Por ejemplo, si queremos acceder a todos los párrafos de una página, lo haremos mediante el siguiente código:
parrafos = document.getElementsByTagName("p")
La variable parrafos será un array en el que cada valor será una etiqueta de un
párrafo, las cuales irán ordenadas según el orden de aparición en la escritura de la página.
De modo que el primer párrafo será parrafos[0].
Podemos acceder a un elemento mediante este método si sabemos su orden en la página, así por ejemplo, para acceder al segundo enlace de la página, escribiremos:
segundoEnlace = document.getElementsByTagName("a")[1]
Si queremos acceder a todos los elementos de una página que lleven una misma etiqueta, podemos hacerlo mediante un bucle; A continuación vemos una página de ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Ver todos los párrafos</title> <style type="text/css"> #cuadro { width: 400px; height: 200px; border: 1px black solid; float: right; } p { font-size: 1em; font-family: arial; } </style> <script type="text/javascript"> function acceder() { var texto = document.getElementById("cuadro") texto.innerHTML = "" var parrafos = document.getElementsByTagName("p") for (i=0 ; i<parrafos.length ; i++ ) { texto.innerHTML += parrafos[i].innerHTML + "<br/>"; } } function borrar() { var texto = document.getElementById("cuadro") texto.innerHTML = "" } </script> </head> <body> <h1>Acceso a los párrafos</h1> <div id="cuadro"></div> <p>Este es el primer párrafo de esta página</p> <p>Este es el segundo párrafo</p> <p>Y este el tercero</p> <p onclick="acceder()">Pulsa en este cuarto párrafo para volver a verlos todos en el recuadro de la derecha.</p> <p onclick="borrar()">Y pulsa en el quinto para borrar el recuadro de la derecha.</p> </body> </html>
Y en el navegador esta página de ejemplo la veremos como en el siguiente enlace:
Para crear la página anterior hemos seguido los siguientes pasos:
- Creamos la página HTML: Etiqueta head con el título, etiqueta body con titulo de página (etiqueta h1) y etiquetas de párrafo.
- Creamos el cuadro de la derecha con la etiqueta div, y le damos un estilo (bordes y posición), mediante el código CSS que introducimos en la cabecera. En este mismo código damos un estilo diferente a los párrafos.
- Insertamos un script en la cabecera, en el cual ponemos la función acceder(). En esta función, accedemos, por una parte -mediante getElementById()- al cuadro de la derecha, y por otra a los párrafos, mediante el array que se forma con getElementsByTagName(). Definimos un texto inicial, para el cuadro de la derecha mediante innerHTML, este texto consiste en una cadena vacía.
- Mediante un bucle recorremos todos los elementos del array parrafos, que contiene todos los párrafos del documento. Para escribirlos en el recuadro de la derecha, los leemos mediante innerHTML y los sumamos a los anteriores, sumando también un salto de linea al final de cada uno de ellos.
- Para poder verlos debemos llamar a la función, para ello insertamos el evento onclick en el cuarto párrafo, el cual llama a la función.
- Insertamos la función borrar(), en la cual accedemos al cuadro de la derecha y borramos su contenido reescribiendo una cadena vacía mediante innerHTML. para acceder a esta función lo hacemos insertando el evento onclick en el quinto párrafo.
Podemos acceder también a determinadas etiquetas de una parte de la página sin acceder a las de las otras partes, anidando los métodos para acceder. Por ejemplo, si queremos acceder a los enlaces del segundo párrafo de la página, escribiremos lo siguiente:
parrafo2 = document.getElementsByTagName("p")[1]
enlaces = parrafo2.getElementsByTagName("a");
Del mismo modo podemos acceder a las etiquetas que estén dentro de un "div" definido mediante
un atributo "id". Ejemplo: Para acceder a los enlaces del menú lateral (normalmente
id="menu")
menuLateral = document.getElementById("menu")
enlaces = menuLateral.getElementsByTagName("a");
Acceso mediante getElementsByName()
document.getElementsByName(" ") : El acceso a las etiquetas mediante este método
se basa en el empleo del atributo name. Su empleo es parecido al del método
getElementById, ya que dentro del paréntesis, y entre comillas debemos poner el valor
del atributo name de la etiqueta a la que queremos acceder. Como este atributo
suele ser único en la página, nos da el acceso a la etiqueta.
Sin embargo, puede darse el caso, como en ciertos elementos de un formulario, de que haya
varias etiquetas con el mismo valor para el atributo name, en este caso accederíamos
a un array con todas las etiquetas cuyo atributo name tengan ese valor. La forma de
tratarlas sería como con el método getElementsByTagName.
En la página siguiente veremos cómo crear nuevos nodos, borrarlos o reemplazarlos.
imprimir esta página
Página creada por ANYELGUTI.
Sugerencias:
aprendeweb@aprende-web.net. Envia un 
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com