页面加载时默认显示NodeList首个元素的实现方案咨询

嘿，针对你的问题，我来给你捋捋两种方案的区别，还有最适合你当前代码的优化方式：

方案选择对比 #

• 如果你的需求是切换元素本身的显示/隐藏状态（比如让当前元素显示，其他隐藏），那用CSS类（比如给激活元素加个active类控制显示）会更符合语义，样式和逻辑分离，后续维护和改样式也更方便。
• 但你现在的代码是把元素的文本内容提取到#filler容器里展示，这种场景下，直接在页面加载时初始化内容是最简便的JS方案，完全不需要额外修改CSS。

针对你当前代码的优化 #

你的现有代码里索引i初始值是-1，所以页面加载后没有内容，只需要简单调整初始化逻辑就能实现加载时显示第一个元素，这里给你两种简单的修改方式：

方式一：直接初始化索引与文本（推荐） #

这种方法逻辑最清晰，没有额外开销：

var divs = document.querySelectorAll(".entry");
var i = 0; // 直接把初始索引设为第一个元素的位置
var text = divs[0].textContent; // 提前获取第一个元素的文本

// 页面加载时直接把文本放到filler里
document.getElementById("filler").innerHTML = text;

document.getElementById("back").addEventListener("click", function previous() {
  if (i > 0) {
    text = divs[--i].textContent;
    document.getElementById("filler").innerHTML = text;
  }
});

document.getElementById("forward").addEventListener("click", function next(){
  if (i < divs.length - 1) {
    text = divs[++i].textContent;
    document.getElementById("filler").innerHTML = text;
  }
});

方式二：模拟点击NEXT按钮（适合不想改初始值的情况） #

如果不想调整初始的i=-1，可以在脚本最后模拟点击一次NEXT按钮，触发现有逻辑来显示第一个元素：

var divs = document.querySelectorAll(".entry");
var i=-1;
var text = "";

document.getElementById("back").addEventListener("click", function previous() {
  if (i > 0) {
    text = divs[--i].textContent;
    document.getElementById("filler").innerHTML = text;
  }
});

document.getElementById("forward").addEventListener("click", function next(){
  if (i < divs.length - 1) {
    text = divs[++i].textContent;
    document.getElementById("filler").innerHTML = text;
  }
});

// 页面加载完成后自动触发NEXT按钮的点击事件
document.getElementById("forward").click();

拓展：如果改用CSS类切换元素显示的方案 #

要是以后你想改成直接切换元素本身的显示（而不是提取文本），用CSS类的方案会更优雅，给你个参考示例：

首先加个简单的CSS样式：

.entry {
  display: none; /* 默认隐藏所有元素 */
}
.entry.active {
  display: block; /* 激活的元素显示 */
}

然后JS代码负责切换类：

var divs = document.querySelectorAll(".entry");
var currentIndex = 0;

// 初始化：给第一个元素加上active类
divs[currentIndex].classList.add("active");

document.getElementById("back").addEventListener("click", function() {
  if (currentIndex > 0) {
    // 移除当前元素的active类
    divs[currentIndex].classList.remove("active");
    currentIndex--;
    // 给前一个元素加上active类
    divs[currentIndex].classList.add("active");
  }
});

document.getElementById("forward").addEventListener("click", function() {
  if (currentIndex < divs.length - 1) {
    divs[currentIndex].classList.remove("active");
    currentIndex++;
    divs[currentIndex].classList.add("active");
  }
});

这种方案的好处是样式完全由CSS控制，JS只负责逻辑切换，后续要加过渡动画或者改显示样式，直接改CSS就行，非常灵活。

内容的提问来源于stack exchange，提问作者Tom M