Seleccionar por clases

indice de ejemplos

En una página web hay una lista no ordenada con varios items. Estos items tiene como clase item (que lo pone en negrita)

Además hay un botón que al ser pulsado ordena y copia los elementos de la lista en un bloque resultado que se verá en la página.

Solución

<script>

function listar(){

  let lista = document.getElementById('flores');

  let res = document.getElementById('resultado');

  let items = lista.getElementsByClassName("item");

  items= Array.from(items);

  items = items.sort(function(a,b){

    return (a.innerText>b.innerText)?1:-1

      });

  let txt = '';

  for (let item of items){

    txt+= (item.innerText+"<br>")

   };

  res.innerHTML = txt;

};

function iniciar(){

    let btn = document.getElementById("btn") ;

    btn.addEventListener("click",listar);

}

</script>

<style>

.item{font-weight: bold}

</style>

<body onload="iniciar()">

<ul id="flores">

<li class="item">Cultivo de rosales</li>

<li class="item">Cultivo de claveles </li>

<li class="item">Cultivo de orquideas</li>

</ul>

<button id="btn">Leer</button>

<div>Lista de flores:</div>

<br>

<div id="resultado"></div>

</body>

Explicación

El método central de este ejemplo es .getElementsByClassName(arg), con el que se obtiene una colección HTML con los items que tengan como class el nombre indicado en el argumento.

También se puede usar .querySelectorAll(".item"), que devuelve un objeto NodeList, entre cuyos métodos incluye forEach() para ser recorrido o el iterador entries()

En este caso el método se aplica a un objeto de la página concretametne a la lista ul. La función que va a leer los items de la lista funciona como sigue

  • Se selecciona el elemento ul por su id  "flores") y se guarda en lista
  • En res guardamos el elemento resultado que usaremos para escribir el listado
  • En items se guardan los elementos de ul que tiene la clase item
  • Guardamos los contenidos de cada elemento de items en una cadena de texto
  • Asignamos la cadena de texto al contenido del elemento resultado

Fuera de la función están las lineas que localizan el botón que llamará a la función mediante un evento onclick. Para localizar el botón se usa el método de document getElementById("btn") y la función del evento se le asigna con su método addEventListener("click",listar)

El método getElementsByClassName("item"), que selecciona elementos por su atributo class, se puede aplicar a todo el documento, en este caso el resultado hubiera incluído los items de la lista con class igual a item.

Observa que en este y otros ejemplos se inicia la ejecución al cargar el documento (body onload). Esto puede evitarse colocando el script al final de la sección body.