遍历xml响应

This is my current code for reading through an XML file hosted online and currently, it displays the first list item. However, I want to loop through the entire XML response and display all the items. How can I do this?

var x = new XMLHttpRequest();
x.open("GET", "https://api.lncontent.works/syndicated/media", true);
x.onreadystatechange = function() {
  if (x.readyState < 4) {
    document.getElementById('header-block').innerHTML = "Loading...";
  } else if (x.readyState === 4) {
    if (x.status == 200 && x.status < 300) {
      var xml = x.responseXML;
      // MAIN TITLE
      var titles = xml.getElementsByTagName("title");
      document.getElementById('header-block').innerHTML = titles[0].childNodes[0].nodeValue;

      var item = xml.getElementsByTagName("item");
      console.log(item[0]);

      for (i = 1; i < item.length; i++) {
        var title = document.getElementById('title-block').innerHTML = item[i].getElementsByTagName("title")[0].innerHTML;
        var link = document.getElementById('link-block').innerHTML = item[i].getElementsByTagName("link")[0].innerHTML;
        var description = document.getElementById('description-block').innerHTML = item[i].getElementsByTagName("description")[0].innerHTML;
        var pubDate = document.getElementById('pubDate-block').innerHTML = item[i].getElementsByTagName("pubDate")[0].innerHTML;
        var enclosure = document.getElementById('enclosure-block').innerHTML = item[i].getElementsByTagName("enclosure")[0].innerHTML;
        var genre = document.getElementById('genre-block').innerHTML = item[i].getElementsByTagName("jwplayer:genre")[0].innerHTML;
        var artist = document.getElementById('artist-block').innerHTML = item[i].getElementsByTagName("livenation:artists")[0].getElementsByTagName("artist")[0].innerHTML;
      }
    }
  }
};
x.send(null);

NOTE: I start at item index 1 for my attempt at looping because index 0 is reserved for heading and is excluded from the list. This is the current output of the code:

enter image description here

</div>

Kindly look at below you were overwriting in for loop you need to append and display as below

find the working js here

var x = new XMLHttpRequest();
x.open("GET", "https://api.lncontent.works/syndicated/media", true);
x.onreadystatechange = function() {
debugger;
  if (x.readyState < 4) {
    document.getElementById('header-block').innerHTML = "Loading...";
  } else if (x.readyState === 4) {
 
    if (x.status == 200 && x.status < 300) {
     debugger;
      var xml = x.responseXML;
      // MAIN TITLE
      var titles = xml.getElementsByTagName("title");
      document.getElementById('header-block').innerHTML = titles[0].childNodes[0].nodeValue;

      var item = xml.getElementsByTagName("item");
      console.log(item[0]);
var  html='';
var htmlChild='';
      for (i = 1; i < item.length; i++) {
        var title =  item[i].getElementsByTagName("title")[0].innerHTML;
        var link  = item[i].getElementsByTagName("link")[0].innerHTML;
        var description =  item[i].getElementsByTagName("description")[0].innerHTML;
        var pubDate = item[i].getElementsByTagName("pubDate")[0].innerHTML;
        var enclosure  ='';
        if(item[i].getElementsByTagName("enclosure").length>0)
        {
        enclosure=item[i].getElementsByTagName("enclosure")[0].innerHTML;
        }
        
        var genre = '';
        if(item[i].getElementsByTagName("jwplayer:genre").length>0)
        {
        genre=item[i].getElementsByTagName("jwplayer:genre")[0].innerHTML;
        }
        
        var artist=''
        if(item[i].getElementsByTagName("livenation:artists").length>0)
        {
         artist = item[i].getElementsByTagName("livenation:artists")[0].getElementsByTagName("artist")[0].innerHTML;
        }
        
        htmlChild='';
        htmlChild+="<div>Title</div><div>"+title+ "</div>";
        htmlChild+="<div>link</div><div>"+link+ "</div>";
        htmlChild+="<div>description</div><div>"+title+ "</div>";
        htmlChild+="<div>pubDate</div><div>"+pubDate+ "</div>";
        htmlChild+="<div>enclosure</div><div>"+enclosure+ "</div>";
        htmlChild+="<div>genre</div><div>"+genre+ "</div>";
        htmlChild+="<div>artist</div><div>"+artist+ "</div>";
        html+='<div style="border: 1px solid black;">'+htmlChild+'<div>';
      }
      document.getElementById('header-block').innerHTML =html;
    }
  }
};
x.send(null);
<div id="header-block">


</div>
<div id="Content">

</div>

</div>