javascript - Change the classname in each Tag that depends on the href value

I need to change the class of each href item depending on its value.

I have this code.

    

      

    
%file_display_name%
    

    


      Download
    

    

In getting the href item on class download-link, I used this javascript code.

function myFunction()

{
  var anchors = document.querySelectorAll('a.download-link');
  for (var i = 0; i < anchors.length; i++) {
    var url = anchors[i].href;
    var splitfile = url.split('.').pop();
    if(splitfile=='pdf'){
       //class="file" would be class="pdf-file"
   }else if(splitfile=="docx"){
       //class="file" would be class="docx-file"
   }else{

      //other file format...
   }
 }
}

on Inspect Element, Something this kind of output.

Element 1 ---

            //Changed into pdf-file
    
Sample PDF 1


    Download

Element 2 ---

            //Changed into docx-file
    
Sample docx 1



    Download

How to achieve this kind of output? Changing the classes that depends on the values on href. Any Idea?