Cómo saber cuántas imágenes están en un div con JavaScript

JavaScript le da la capacidad para examinar e incluso cambiar el código HTML de una página web después de la página se ha cargado en el ordenador y en la pantalla . Se puede contar el número de imágenes dentro de una etiqueta

mediante la codificación de la etiqueta con un "id" y luego examinar el texto dentro de la etiqueta y contando el número de contenida en la etiqueta externa

. Instrucciones
1

Crear un archivo HMTL en un editor de texto o en el Bloc de notas . Crear una etiqueta

con un atributo "id" y colocar dentro de la etiqueta

. ! Por ejemplo, escriba

< DOCTYPE HTML PUBLIC " - //W3C //DTD XHTML 1.0 Transitional //EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd ">

conde Images < /title > <br> <p> < /head> <br> <p> <body> <br> <p> <div id="images"> < img src = " http://example.com/image1.jpg " alt = " imagen1 " /> <img src="http://example.com/image2.jpg" alt="image2" /> < img src = " http://example.com/image3.jpg "/> < /div > <br> <p> < /body> <br> <p> < /html> <br> 2 <p> Crear una función JavaScript" alt = " image3 y lo coloca entre las etiquetas <head> . Obtener el contenido de la etiqueta <div> y almacenarlo en una variable. Por ejemplo, escriba <br> <p> <script type="text/javascript"> <br> countImages <p> función () { var <br> <p> divContents = document.getElementById ( " imágenes ") . innerHTML ; <br> 3 <p> utilizar una expresión regular para obtener los elementos de matriz que coinciden con la apertura de la etiqueta <img> . Por ejemplo, escriba <br> partidos var <p> = divContents.match ( /< img /) ; <br> 4 <p> Obtenga el número de imágenes haciendo referencia al número de elementos en el array. Por ejemplo, escriba <br> <p> numMatches var = matches.length ; <br> alerta <p> ( " Número de partidos es" + numMatches ) ; <br> <p> } <br> <p> < /script> <br> 5 <p> Llame a la función de JavaScript justo antes de la etiqueta de cierre <body> para dar tiempo a la página HTML para cargar . Por ejemplo , escriba: <br> <p> <script type="text/javascript"> <br> countImages <p> (); <br> <p> < /script> <br> <br> <div class="escomad2"><script language='javascript' src='http://www.ordenador.online/ad/es/2.js'></script></div> </div> <div class=contentpage> <div class=p1>Página anterior: <a class='LinkPrevArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-extraer-los-parámetros-de-una-URL-con-JavaScript-.html' >Cómo extraer los parámetros de una URL con JavaScript </a> </div> <div class=p2>Página siguiente: <a class='LinkNextArticle' href='http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-convertir-un-int-a-una-cadena-con-Javascript-.html' >Cómo convertir un int a una cadena con Javascript </a> </div> </div> <dl class=xgc> <dt><span>JavaScript Programación</span></dt> <dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-utilizar-varios-archivos-JavaScript-en-coordinación-con-los-demás-.html">Cómo utilizar varios archivos JavaScript en coordinación con los demás </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Java-script-Comprobación-de-la-forma-de-introducción-de-texto-para-caracteres-especiales-.html">Java script Comprobación de la forma de introducción de texto para caracteres especiales </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-deshabilitar-la-selección-de-texto-HTML-.html">Cómo deshabilitar la selección de texto HTML </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Historia-de-Javascript-.html">Historia de Javascript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-reemplazar-un-IFrame-en-JavaScript-.html">Cómo reemplazar un IFrame en JavaScript </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-agregar-controles-a-la-API-de-Google-Maps-.html">Cómo agregar controles a la API de Google Maps </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-crear-elementos-con-JavaScript-Client-Side-.html">Cómo crear elementos con JavaScript Client Side </a></dd><dd><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-detectar-el-sistema-operativo-con-JavaScript-.html">Cómo detectar el sistema operativo con JavaScript </a></dd> </dl> </div>  <div class=rightmain> <div class=esrightlist> <div class=e1>Los últimos artículos de equipo</div> <ul> <li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/JavaScript-Tutorial-para-Operadores-aritméticos-.html" >JavaScript Tutorial para Operadores aritméticos </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/JavaScript-para-determinar-si-un-elemento-está-deshabilitado-.html" >JavaScript para determinar si un elemento está deshabilitado </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Ejemplos-básicos-de-jQuery-.html" >Ejemplos básicos de jQuery </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-activar-la-función-Imprimir-pantalla-Uso-de-JavaScript-.html" >Cómo activar la función Imprimir pantalla Uso de JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-utilizar-una-mesa-de-luz-de-JavaScript-.html" >Cómo utilizar una mesa de luz de JavaScript </a> </li><li><a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-incluir-un-archivo-JS-en-JSP-.html" >Cómo incluir un archivo JS en JSP </a> </li> </ul> </div> <div class=esrightlist> <div class=e1>Artículos de la popular computadora</div> <ul> <li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-el-color-de-fondo-de-una-fila-en-JavaScript-.html" >Cómo cambiar el color de fondo de una fila en JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-habilitar-el-servidor-de-control-de-uso-de-Javascript-.html" >Cómo habilitar el servidor de control de uso de Javascript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-obtener-las-compensaciones-de-desplazamiento-en-JavaScript-.html" >Cómo obtener las compensaciones de desplazamiento en JavaScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/JavaScript-Vs---VBScript-.html" >JavaScript Vs . VBScript </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-cambiar-la-acción-de-formulario-en-JavaScript-Select-.html" >Cómo cambiar la acción de formulario en JavaScript Select </a></li><li> <a href="http://www.ordenador.online/Programacion/JavaScript-Programación/Cómo-llegar-a-un-Thickbox-Jquery-.html" >Cómo llegar a un Thickbox Jquery </a></li> </ul> </div> <div class="esrightad"> <script language='javascript' src='http://www.ordenador.online/ad/es/r.js'></script> </div> <div class=esrightlist> <div class=e1>Más categorías</div> <ul> <li><a href='http://www.ordenador.online/Programacion/C--C-----Programming/' target="_self">C /C + + Programming</a></li> <li><a href='http://www.ordenador.online/Programacion/Lenguajes-De-Programación/' target="_self">Lenguajes De Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Delphi-Programación/' target="_self">Delphi Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Programación-Java/' target="_self">Programación Java</a></li> <li><a href='http://www.ordenador.online/Programacion/JavaScript-Programación/' target="_self">JavaScript Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Programación-PHP--MySQL/' target="_self">Programación PHP /MySQL</a></li> <li><a href='http://www.ordenador.online/Programacion/Perl-Programming/' target="_self">Perl Programming</a></li> <li><a href='http://www.ordenador.online/Programacion/Python-Programming/' target="_self">Python Programming</a></li> <li><a href='http://www.ordenador.online/Programacion/Rubí-Programación/' target="_self">Rubí Programación</a></li> <li><a href='http://www.ordenador.online/Programacion/Visual-Basics-Programación/' target="_self">Visual Basics Programación</a></li> </ul> </div> </div>  <div class="cl"></div> </div> <div class=esfoot> <div class=copy>Conocimientos Informáticos © http://www.ordenador.online</div> </div> </body> </html>