如何在javascript中调用页面加载时的第一个html元素？

Question

I am working on an HTML code as shown below in which I want to call 1st html element on page load in javascript

<ul class="listy-pl">
  <li class ="listy-item" data-mediaid="id_0001" tabindex="0">  //Line A
  Good Morning                                                  // Line B  
  </li>                                                         // Lina C 
  <li class ="listy-item" data-mediaid="id_0002" tabindex="0">
  Good Evening
  </li>
  <li class ="listy-item" data-mediaid="id_0003" tabindex="0">
   Hello World
  </li>
  <li class ="listy-item" data-mediaid="id_0004" tabindex="0">
  Bye
  </li>
</ul> 

The following js script calls the Good Morning text at Line B

document.getElementsByClassName("listy-item")[0];

Problem Statement:

I am wondering I should I make in javascript code above so that it renders Good Morning text on page load.

Answer 1

document.getElementsByClassName("listy-item")[0].style.display = "block";
document.getElementsByClassName("listy-item")[1].style.display = "none";
document.getElementsByClassName("listy-item")[2].style.display = "none";
document.getElementsByClassName("listy-item")[3].style.display = "none";

Answer 2

You can use querySelectorAll().forEach to iterate the li elements and set their visibility depending on their sequence number:

 document.querySelectorAll(".listy-item").forEach((li, i) => li.style.display = i == 0 ? "" : "none" ); 

 <ul class="listy-pl"> <li class ="listy-item" data-mediaid="id_0001" tabindex="0"> Good Morning </li> <li class ="listy-item" data-mediaid="id_0002" tabindex="0"> Good Evening </li> <li class ="listy-item" data-mediaid="id_0003" tabindex="0"> Hello World </li> <li class ="listy-item" data-mediaid="id_0004" tabindex="0"> Bye </li> </ul>