本文讲解如何利用事件委托和 dom 查询，精准获取被点击列表项内特定子元素的文本内容，并将其分别赋值给输入框和标题元素。

本文讲解如何利用事件委托和 dom 查询，精准获取被点击列表项内特定子元素的文本内容，并将其分别赋值给输入框和标题元素。

在前端交互开发中，常需根据用户点击动态更新界面状态。本例目标是：当用户点击

元素时，提取其内部

的纯文本（字体名称）和

下 的纯文本（字体分类），并分别写入 input#font-name 的 value 属性与 h4#font-class 的 textContent。

原代码存在多个关键问题：

• ❌ 错误地在脚本顶部批量查询所有 li > h3 和 li > h3 > span，并试图读取 .textContent —— NodeList 无该属性，导致 undefined；
• ❌ 将 fontClassUI.value 赋值给

  （它没有 value 属性，应使用 textContent）；

• ❌ 事件监听绑定在
• 上，但 event.target 可能是 h3、span 或文本节点，直接用 event.target.className 不稳定；应统一使用 event.currentTarget（即绑定事件的
• 元素）；
• ❌ 未处理 span 不存在时的容错（如部分
• 缺少 ），建议添加空值校验。

✅ 正确做法是在点击事件回调中，针对当前被点击的

实例

，动态查询其后代元素：

fontList.forEach((li) => {
  li.addEventListener("click", (event) => {
    const clickedH3 = event.currentTarget.querySelector("h3");
    const clickedSpan = event.currentTarget.querySelector("h3 > span");

    // 安全获取文本，避免 null 报错
    const fontName = clickedH3?.textContent?.trim() || "";
    const fontClass = clickedSpan?.textContent?.trim() || "";

    // 更新主内容区域的字体类名
    fontApplyMain.className = "";
    fontApplyMain.classList.add(event.currentTarget.className);

    // 更新 UI 元素
    fontNameUI.value = fontName;
    fontClassUI.textContent = fontClass; // 注意：h4 使用 textContent，非 value

    // 关闭对话框（确保 dialogFonts 已正确定义）
    if (typeof dialogFonts !== 'undefined' && dialogFonts.close) {
      dialogFonts.close();
    }
  });
});

? 关键要点总结：

• ✅ 使用 event.currentTarget 确保始终操作触发事件的
• 元素，而非可能更深层的子节点；
• ✅ 在事件处理函数内执行 querySelector，保证每次获取的是当前
• 下的真实子元素；
• ✅ 对 textContent 使用可选链（?.）和空值合并（|| ""）提升健壮性；
• ✅ 区分表单控件（input）的 value 与普通元素（h4）的 textContent —— 这是常见错误根源；
• ✅ 确保 dialogFonts 在作用域内已正确定义（如通过 document.getElementById 或 window.dialogFonts 初始化），否则调用 close() 会报错。

此方案简洁、可靠，符合现代 DOM 操作最佳实践，适用于任意数量的字体选项列表，且易于扩展（例如增加预览样式切换或历史记录功能）。