Why did Array.from()work?

I'm watching Shaun Pelling's Modern JavaScript course on Udemy (great way to get started, by the way) — and I just worked through an example that doesn't seem like it should have worked.

The challenge was to iterate through all of the elements within an article tag and add a class to each one:

<article id="example-article">
  <h2>Article Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <div>Written by the Some Person</div>
</article>

Selecting querySelector returns an HTMLCollection, which can't be iterated through by using forEach(). Instead Shaun recommended using the Array.from method and iterating through that instead.

Cool! Easy enough:

const article = document.querySelector('#example-article');

const articleContents = article.children;

let copiedContents = Array.from(articleContents);

copiedContents.forEach(child => {
    child.classList.add('article-element');
});

And that's it. The DOM was updated with the new classes. Here's my question:

I thought Array.from() made a new array from the information in the HTMLCollection. I thought for sure that I was going to have to do something like article.innerHTML = [...copiedContents] or something, but I didn't have to copy the new array back into the article element at all. In fact when I console.log(article.children); I get:

HTMLCollection(5)
​
0: <h2 class="article-element">​
1: <p class="article-element">​
2: <p class="article-element">​
3: <p class="article-element">​
4: <div class="article-element">
​
length: 5

How?