I need help solving: Uncaught TypeError: apiData.getElementsByTagName is not a function

Hello!
I am working on a Vanilla Javascript project for a small start-up where I pull in API data from a job board. Here is what it looks like: [https://youaretechy.com/jobs-2/]

.

I am creating a user filter to search for jobs by job title. That is where I am receiving the error message, VM5912:1 Uncaught TypeError: apiData.getElementsByTagName is not a function. This happens when I go into the console and log this line: const jobs = apiData.getElementsByTagName('h1');

Here is my HTML:

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
  <title>Github Jobs API</title>

 <a href="http://href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet""></a>

</head>

<body>
   
  <!-- Search bar -->
  <div class="wrap">
   <div class="search">
     <form id="userSearch">
      <input type="text" class="searchTerm" placeholder="Keywords, Title, Career"/>
      <button type="submit" class="searchButton">
        <i class="fa fa-search"></i>
     </button>
     </form>
   </div>
</div><br>

      <!-- DIV FOR CARD DISPLAY -->
     <div id="root"></div> 
        </body>
 </html>

Here is my JavaScript:

       var apiData = " "
      'use strict';
        
       const app = document.getElementById('root');

       const container1 = document.createElement('div');
       container1.setAttribute('class', 'container1');

       app.appendChild(container1);

       var request = new XMLHttpRequest();

       //GET REQUEST WITH USE OF HEROKU AS A PROXY TO SOLVE CORS ERROR
       request.open('GET','https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json?                                            &markdown=true&location=united+states&page=1&count=20', 
                   true);
       request.onload = function () {
      
      //CONVERT JSON DATA TO JAVASCRIPT OBJECTS USING JSON.PARSE
      apiData = JSON.parse(this.response);
                      
      if (request.status >= 200 && request.status < 400) {
      apiData.forEach(job => {
      const card = document.createElement('div');
      card.setAttribute('class', 'card');
    
      const h1 = document.createElement('h1');
      h1.textContent = job.title;

      const p = document.createElement('p');
      job.description = job.description.substring(0, 300);
      p.textContent = `${job.description}...`;

      container1.appendChild(card);
      card.appendChild(h1);
      card.appendChild(p);
    });

      // ERROR HANDLING
       } else {
       const errorMessage = document.createElement('marquee');
       errorMessage.textContent = `It's not working!`;
      app.appendChild(errorMessage);
     }
         
     }
        
     //FILTER JOBS BY JOB TITLE
     const searchBar= document.forms['userSearch'].querySelector('input');
 
    // whenever a user types a character in the search bar it is a keyup event -- we will listen for those    
    searchBar.addEventListener('keyup', function(e){
    // the target is the input field, so we are asking for its value  
	const term = e.target.value.toLowerCase();
      
    // here we access the apiData and target the h1 tag because the job titles are stored there
	const jobs = apiData.getElementsByTagName('h1');
     
    // now we cycle through the h1 tags to see if the terms from the search are contained in the h1 tag
	jobs.forEach(function(job){
    // not sure if this is correct - should I put the index number in the array where title is located in the JSON?
		const title= job.firstChildElement.textContent;
		if(title.toLowerCase().indexOf(term) != -1){
			job.style.display = "block";
		}else{
			job.style.display= "none";

	     	}
		})
	});   
            request.send();```

Thanks in advance for your assistance!! I really appreciate it.
 
~Dana

I would target the body el, as opposed to the root. See if that works