Why Is Getelementsbytagname() Returning An Html Collection, But Getelementsbytagname()[0] Returning Undefined?

I am working on a chrome extension that uses content scripts. I am attempting to get an element of a page, but I am getting results I have never encountered. Here is the code I am

Solution 1:

Problem is it is a Live HTMLCollection. So it updates! You are referencing it before the element exists.

<script>var iframe = document.getElementsByTagName("iframe");
  console.log("1", iframe);
  console.log("2", iframe[0]);
</script><iframe></iframe><script>console.log("3", iframe);
  console.log("4", iframe[0]);
  iframe[0].remove();
  console.log("5", iframe);
  console.log("6", iframe[0]);
</script>