如何获取firstChild类名？动态树形视图toggler点击无响应排查

你的代码里tgt.firstChild拿到的并不是预期的.toggler-target元素——因为HTML中.toggler的第一个子节点是文本节点（就是"Global"后面的换行和空格），文本节点没有classList属性，这会导致&&后面的判断抛出错误，后续的切换逻辑根本不会执行。

不要用firstChild，改用querySelector直接在.toggler内部查找目标元素，精准定位需要切换的容器，同时简化判断逻辑：

修正后的JavaScript代码 #

document.getElementById("todos").addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.matches(".todo")) {
    tgt.classList.toggle('active');
  } else if (tgt.matches(".toggler")) {
    tgt.classList.toggle('active');
    const target = tgt.querySelector(".toggler-target");
    if (target) {
      target.classList.toggle('active');
    }
  }
});

补充说明 #

1. querySelector(".toggler-target")会直接在点击的.toggler元素内部查找第一个匹配的目标元素，无视文本节点，彻底解决节点定位错误的问题。
2. 简化分支判断后逻辑更清晰，同时避免了因文本节点导致的运行错误。
3. 注意你HTML内层的.toggler里重复使用了th:each="branchDto:${branches}"，这会导致.toggler-target被重复渲染，建议去掉内层的该循环，避免结构混乱。

内容的提问来源于stack exchange，提问作者Ivan Dvurechenskiy