JS get multiple values from different tags to form string

I’m trying to read inside a class the UL and then a LI element which contains links but the data to create the URL to finally download the files is separated.
The LI element contains an ID and the <a href title contains the filename, so I’m trying to first get all the LI elements inside the class but I can’t find a way to associate/read each LI ID with the corresponding A HREF TITLE.

This is part of a chrome extension

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    
//this no longer works..
if (request.message == "getLinks") {
        var links = [];
        $("a").each(function(i, el) {
            links.push({ "url": el.href, "description": $(el).text() });
        });
        chrome.runtime.sendMessage({ "message": "links", "links": links });
        

        
       //TESTING HERE. so I can create a link to download
        const listItems = document.querySelectorAll('.view-items li');
        for (let i = 0; i < listItems.length; i++) 
        {
          alert (listItems[i].id);
          const urlTitle = document.querySelectorAll('.view-name a');
          for (let k = 0; k < urlTitle.length; i++) 
          {
            alert (urlTitle[i].title);
          }
          
        }

    }
});

html reduced code

<ul class="view-items">
<li id="VBGC00" class="view-item>  
<a href="#" title="my-file-name-to-download" class="text_button>my-file-name-to-download.pdf</a> 

full li code

<li id="VBGC75" 
class="view-item view-table-row skipTarget aa-fileRead" 
file-label="File my-file-to-download.docx Version 2 129 KB Type docx  Updated yesterday at 6:41 PM by you" 
role="listitem" aria-describedby="contextMenuHelp">  <div class="scs-progress-bar"></div>  
<div class="view-table-row-content" file-label="File my-file-to-download.docx Version 2 164 KB Type docx  Updated yesterday at 6:41 PM by you" role="group">    
<span class="view-check custom-checkbox"><span class="ui-checkbox ui-widget"><input type="checkbox" title="Select my-file-to-download.docx" tabindex="-1">
<span class="ui-checkbox-icon"></span></span></span>  <span class="view-table-cell name-and-desc-cell rowView compact cv-table-col-0" style="flex: 1 1 auto; min-width: 0px;">  
<span class="view-thumbnail"><span class="thumbWrapper view-thumbClick ">    <span class="view-icon" title="my-file-to-download.docx">
<img src="http://localhost/img/icon.png" alt="View my-file-to-download.docx"></span>  </span></span>  
<span class="view-content-area noDescription">    
<span class="view-textarea1">      
<span class="view-name">            
<span>my-file-to-download.docx</span>            
<a href="#" title="my-file-to-download.docx" file-label="my-file-to-download.docx" class="text_button view-openClick ui-draggable ui-draggable-handle" tabindex="-1">my-file-to-download.docx</a> 
     </span>    </span>    <span class="view-textarea2">      
     <span class="view-description" title=""></span>    </span>  </span></span>
     <span class="view-table-cell cv-table-cell-value cv-table-col-1" title="v2" style="width: 60px; flex: 0 0 auto;">v2</span>
     <span class="view-table-cell cv-table-cell-value cv-table-col-2" title="Yesterday at 6:41 PM" style="width: 150px; flex: 0 0 auto;">Yesterday at 6:41 PM</span>
     <span class="view-table-cell cv-table-cell-value owner cv-table-col-3" title="You" style="width: 180px; flex: 0 0 auto;">You</span>
     <span class="view-table-cell cv-table-cell-value cv-table-col-4" title="164 KB" style="width: 100px; flex: 0 0 auto;">164 KB</span><span class="view-table-cell flex cv-table-col-5" style="width: 100px; flex: 0 0 auto;">
     <span class="view-capsule-text" title="docx">docx</span></span><span class="view-table-cell actions-cell rowView compact cv-table-col-6" style="width: 205px; flex: 0 0 auto;">  
     <span class="view-buttons">        <span class="view-indicator"><span class="ui-icon ui-icon-lock folderview-reserved" title=""></span></span>        
     <span class="view-table-con-action"><span class="view-action folderview-con-pinned never-text hidden">
     <button class="view-item-button view-openClick conversationType ws-toolbar-button ui-draggable ui-draggable-handle" title="file-assoc" file-label="file-assoc" tabindex="-1" style="display: none;"><span class="ui-icon ui-icon-con"></span></button></span></span>              
     <span class="view-action">      <button class="view-item-button folderview-download-button ws-toolbar-button" title="Download" file-label="Download my-file-to-download.docx" tabindex="-1">        <span class="ui-icon ui-icon-athena-download"></span>      </button>    </span>                  <span class="view-action action-share-button">      <button class="view-item-button folderview-share-button ws-toolbar-button" title="Share Link" file-label="Share a link to this document" tabindex="-1">        <span class="ui-icon ui-icon-athena-share"></span>      </button>    </span>          <span class="view-indicator"><button class="view-item-button favorite folderview-favorite-button" title="Add to Favorites" file-label="Add my-file-to-download.docx to Favorites" tabindex="-1">
     <span class="ui-icon favorite star"></span></button></span></span></span></div>
</li>

This is the url i need to create: https://myhost/files/VBGC00/my-file-name-to-download.pdf

any suggestions?

thanks!

// declaring an empty array to contain all the built urls
var array_of_urls = []; 

var all_li = document.getElementsByClassName("view-item");
for (var i = 0; i < all_li.length; i++) 
{
    // get the needed id
    var id = all_li[i].getAttribute("id"); 
    // get the filename
    var file_to_download =  all_li[i].childNodes[1].getAttribute("title"); 
    // build the link 
    var new_url = "https://myhost/files/"+id+"/"+file_to_download+".pdf"; 

    array_of_urls.push(new_url); // push the URL in an array 
    
    // if you need to put the each built link in its relative href
    all_li[i].childNodes[1].setAttribute("href", new_url);
}

console.log(array_of_urls); // dislay all the built URL

<ul class="view-items">
  <li id="VBGC00" class="view-item">  
     <a href="#" title="my-file-name-to-download" class="text_button>my-file-name-to-download.pdf"> link 0 </a> 
   </li>
   
   <li id="VBGC01" class="view-item">  
     <a href="#" title="my-file-name-to-download-1" class="text_button>my-file-name-to-download.pdf"> link 1 </a> 
   </li>
   
   <li id="VBGC02" class="view-item">  
     <a href="#" title="my-file-name-to-download-2" class="text_button>my-file-name-to-download.pdf"> link 2 </a> 
   </li>
</ul>