I have the following HTML structure:

```html
<ul>

  <li></li> <!-- First element top-level element -->

  <li></li> <!-- Second element top-level element -->

  <ul>
    <li></li>
    <li></li>
  </ul>

  <li></li> <!-- Third element top-level element -->

  <ul>
    <li></li>
    <li></li>
  </ul>

</ul>

```

How can I select and loop only through the top-level `<li>` elements of the first `ul` structure? *(should do 3 loops)*. I tried the following, but that loops through all `<li>` elements *(7 loops)*.

```js
var li_elements = cat_tree
  .getElementsByTagName("ul")[0]
  .getElementsByTagName("li");

for (let element of li_elements) {
  // Do Some Awesome Code Here
}

```