How to convert HTML element to string in javascript?

Question:

I access an element of my page and save it in a variable:

var nodo = document.getElementsByClassName('prueba');

if I do a

var nodo = String(nodo);

It does not work for me, I know that it is an array of objects but if I pass it to a string I only get a text that is [object HTMLCollection] and there is no way. The point is that I try to save all the HTML of that node in a variable of type String but there is no way.

Does anyone think of how I can do it?

UPDATED:

Thanks to all of you who have dedicated your time to helping me, I hope I can return the favor, the easy way has been:

var nodo = document.getElementsByClassName('ep-gadget epgadget-externalvideo')[0].outerHTML

it occurred to me that this function would exist when the element inspector saw the copy outerHTML option

Answer:

You can iterate over the response of your getElementByClassName doing:

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>

Note, the output of a getElementByClassName is a nodeList , which is iterable and yet it is not an array so you cannot simply make a map or reduce to concatenate it. That is why I applied the crude technique of adding the elements to an empty array. The latter is just one more way to deal with the output of a nodeList.

Update 2020

Errata

First: getElementsByClassName not return a NodeList but a HTMLCollection . Sorry for not having verified that notion for three years.

Use CSS3 selectors

With the universal and near-near homogeneous compatibility of CSS3 selectors, it's more convenient to use document.querySelectorAll (this one does return a NodeList, I promise). instead of document.getElementsByClassName . Instead of a class-specific method, you can use it in place of getElementsByTagname and getElementsByName , with the disadvantage that it is less efficient if the DOM is very complex.

On the other hand, the type of property you are looking for is immediately visible, since the search by id uses a char '#id_element' and by class a period '.class_name' is used.

Replicating the original example, but replacing the for loop with something more concise:

var list= document.querySelectorAll(".minodo"),
    array_de_strings= Array.from(list)
                      .map(element=>element.textContent);

As list is not an Array, it is sane to convert it to such using Array.from (…). (But the subsequent example is better)

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>

Use CSS3 + destructuring

The de-structuring and spread operator of the ES2015 specification is even more beautiful

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>
Scroll to Top