Puedes iterar sobre la respuesta de tu getElementByClassName
haciendo:
var list= document.getElementsByClassName("minodo"),
array_de_strings = [];
for (var i = 0; i < list.length; i++) {
console.log(list[i].textContent);
array_de_strings.push(list[i].textContent);
}
console.log(array_de_strings.join(', '));
<ul>
<li class="minodo">primero</li>
<li class="minodo">segundo</li>
<li class="minodo">tercero</li>
<li class="minodo">cuarto</li>
</ul>
Ojo, La salida de un getElementByClassName
es un nodeList, el cual es iterable y sin embargo no es un array por lo cual no puedes simplemente hacer un map o reduce para concatenarlo. Por eso apliqué la técnica burda de ir añadiéndole los elementos a un array vacío. Esto último es sólo una manera más de operar con la salida de un nodeList.
Update 2020
Fe de Erratas
Primero: getElementsByClassName no devuelve un NodeList sino un HTMLCollection. Perdonen por no haber verificado esa noción durante tres años.
Usar selectores CSS3
Con la compatibilidad universal y casi-casi homogénea de los selectores CSS3, es más cómodo usar document.querySelectorAll
(este sí devuelve un NodeList, lo prometo). en vez de document.getElementsByClassName
. En vez de un método específico para clases, puedes usarlo en reemplazo de getElementsByTagname
y getElementsByName
, con la desventaja de que es menos eficiente si el DOM es muy complejo.
Por otro lado resulta inmediato a la vista el tipo de propiedad que buscas, dado que la búsqueda por id usa un char '#id_elemento' y por clase se usa un punto '.nombre_clase'.
Replicando el ejemplo original, pero reemplazando el bucle for
con algo más conciso:
var list= document.querySelectorAll(".minodo"),
array_de_strings= Array.from(list)
.map(element=>element.textContent);
Como list
no es un Array lo sano es convertirlo en tal usando Array.from(...). (Pero el ejemplo subsiguiente es mejor)
var list= document.querySelectorAll(".minodo"),
array_de_strings= Array.from(list)
.map(element=>element.textContent);
console.log(array_de_strings.join(', '));
<ul>
<li class="minodo">primero</li>
<li class="minodo">segundo</li>
<li class="minodo">tercero</li>
<li class="minodo">cuarto</li>
</ul>
Usar CSS3 + destructuring
La destructuración y el spread operator de la especificación ES2015 es todavía más bonita
var list= document.querySelectorAll(".minodo"),
array_de_strings= [...list]
.map(element=>element.textContent);
console.log(array_de_strings.join(', '));
<ul>
<li class="minodo">primero</li>
<li class="minodo">segundo</li>
<li class="minodo">tercero</li>
<li class="minodo">cuarto</li>
</ul>
prueba
que es?<p>
?<button>
?<div class="example">First div element with class="example".</div>
y almacenarlo en una variable?. Recuerda que puedes editar tu pregunta.