Cómo saber cuántas imágenes hay en un DIV con JavaScript

Escrito por steve mcdonnell Google | Traducido por beatriz sánchez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo saber cuántas imágenes hay en un DIV con JavaScript
Puedes contar el número de imágenes en una página con JavaScript. (Thinkstock/Comstock/Getty Images)

JavaScript te permite examinar e incluso cambiar el código HTML en una página web después de que la página se haya cargado en la computadora y se muestre en el pantalla. Puedes contar el número de imágenes que hay dentro de una etiqueta <div> codificando la etiqueta con un "id" y después examinando el texto dentro de la etiqueta y contando el número de etiquetas <img> que hay dentro de la etiqueta externa <div>.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Crea un archivo HTML en un editor de texto o en un Bloc de Notas. Crea una etiqueta <div> con un atributo "id" y coloca etiquetas <img> dentro de la etiqueta <div>. Por ejemplo, escribe:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Count Images</title> </head> <body> <div id="images"><img src="http://example.com/image1.jpg" alt="image1" /><img src="http://example.com/image2.jpg" alt="image2" /><img src="http://example.com/image3.jpg" alt="image3" /></div> </body> </html>

  2. 2

    Crea una función JavaScript y colócala entre las etiquetas <head>. Saca los contenidos de la etiqueta <div> y almacénalos en una variable. Por ejemplo, escribe:

    <script type="text/javascript"> function countImages() { var divContents = document.getElementById("images").innerHTML;

  3. 3

    Usa una expresión regular para obtener elementos de vector que encajen con la apertura de la etiqueta <img>. Por ejemplo, escribe:

    var matches = divContents.match(/<img/);

  4. 4

    Consigue el número de imágenes haciendo referencia al número de elementos en el vector. Por ejemplo, escribe:

    var numMatches = matches.length; alert("El número de coincidencias es " + numMatches); } </script>

  5. 5

    Llama a la función JavaScript justo antes de la etiqueta de cierre de <body> para darle a la página HTML tiempo para cargarse. Por ejemplo, escribe:

    <script type="text/javascript"> countImages(); </script>

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles