Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 152

Visitas el mes pasado: 152

logo
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

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




5. Acceso al DOM (II)

5.2 Métodos del DOM

javascript

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:

Acceso a los párrafos.


Para crear la página anterior hemos seguido los siguientes pasos:

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.

Manipular los Nodos



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com