Блог

Главная - Вопросы по программированию - Как вызвать 1-й html-элемент при загрузке страницы в javascript?

Как вызвать 1-й html-элемент при загрузке страницы в javascript?

#javascript #html

#javascript #HTML

Вопрос:

Я работаю над HTML-кодом, как показано ниже, в котором я хочу вызвать 1-й html-элемент при загрузке страницы в 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>

Следующий js-скрипт вызывает текст Good Morning в строке B

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

Формулировка проблемы:

Мне интересно, должен ли я сделать в коде javascript выше, чтобы он отображал текст Good Morning при загрузке страницы.

Комментарии:

1. Что вы подразумеваете под «вызовом» строк кода? Вы можете использовать CSS, чтобы показать / скрыть все, что вам нужно.

2. @j08691 Есть ли какой-нибудь способ, который мы можем сделать с помощью скрипта? Я просто хочу напечатать текст Good Morning при загрузке страницы.

3. Я знаю, как мы можем сделать в css. Это будет сделано через display:none

Ответ №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";

Ответ №2:

Вы можете использовать querySelectorAll().forEach для повторения li элементов и настройки их видимости в зависимости от их порядкового номера:

 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>