title: I used fetch() method to load data from external server. All data are being loaded properly. But I came across dificulity when I use querySelector
body: <p>I'm trying to load data from an external server and render it on my web page by using javascript. I used <code>fetch(url)</code> to load the data. Data is being loaded properly; I can see all of it in the console. What happens is that, when I use <code>document.querySelector()</code>, only 1 article is shown on my web page despite there being 10 articles. Then, I used <code>document.querySelectorAll()</code>, but nothing showed on my web page and there were no errors, no information in the console as well. What I did was this:</p>
  <pre class="lang-js prettyprint-override"><code>let url = &quot;https://gnews.io/api/v4/top-headlines?lang=en&amp;max=50&amp;token=TOKEN_HERE&quot;;
      
  fetch(url)
      .then(function(response) {
          return response.json();
      })
      .then(function(details) {
          let allArticles = details.articles;
          allArticles.forEach(function(article) {
              let header = document.querySelector('.heading');
              header.innerText = article.title;
  
              let description = document.querySelector('.description');
              description.innerText = article.description;
  
              let content = document.querySelector('.content');
              content.innerText = article.content;
          });
      });
  </code></pre>
  <p>HTML:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;h4 class=&quot;heading&quot;&gt;&lt;/h4&gt;
      &lt;p class=&quot;description&quot;&gt;&lt;/p&gt;
      &lt;p class=&quot;content&quot;&gt;&lt;/p&gt;
      &lt;!-- ... --&gt;
  &lt;/body&gt;
  </code></pre>