时间戳

首页 > 解决方案 > 如何在javascript中调用页面加载的第一个html元素？

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

问题描述

我正在编写如下所示的 HTML 代码，我想在 javascript 中调用页面加载时的第一个 html 元素

<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 脚本在 B 行调用早安文本

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

问题陈述：

我想知道我应该在上面的 javascript 代码中制作，以便它在页面加载时呈现早安文本。

标签： javascripthtml

解决方案

您可以使用它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>

推荐阅读