本文详解如何通过事件委托精准获取被点击 <li> 元素内 h3 和 h3 > span 的文本内容，并分别赋值给同级的 <input#font-name> 和 <h4#font-class>，解决因错误使用 querySelectorAll 返回 NodeList 导致的 undefined 问题。
本文详解如何通过事件委托精准获取被点击 `
`，解决因错误使用 `queryselectorall` 返回 nodelist 导致的 `undefined` 问题。
在原代码中，核心问题在于：
- document.querySelectorAll("li > h3") 返回的是 NodeList（类数组），而非单个元素，因此 .textContent 属性不可直接访问（返回 undefined）；
- 同样，fontListSecondChild.textContent 也因相同原因失效；
- 此外，event.target 可能是 <li> 内任意子节点（如文本节点或 <h3>），而 event.target.className 并非总等于 <li> 的 class，应改用 event.currentTarget 确保始终指向绑定事件的 <li> 元素；
- <h4#font-class> 是元素节点，需设置 textContent（而非 value），而 <input#font-name> 才使用 value。
✅ 正确做法是：在点击事件处理器内部，基于当前被点击的 <li>（即 event.currentTarget）动态查询其子元素，确保上下文准确、数据可得。
以下是优化后的完整脚本逻辑：
<script type="text/javascript">
const fontList = document.querySelectorAll("li");
const fontApplyMain = document.querySelector("main");
const fontNameUI = document.getElementById("font-name");
const fontClassUI = document.getElementById("font-class");
fontList.forEach((li) => {
li.addEventListener("click", (event) => {
// ✅ 安全获取当前 li 内的 h3 和 h3 > span
const clickedH3 = event.currentTarget.querySelector("h3");
const clickedSpan = event.currentTarget.querySelector("h3 > span");
// ✅ 防御性检查：避免因 DOM 结构变动导致脚本报错
if (!clickedH3 || !clickedSpan) {
console.warn("Missing h3 or span in clicked list item");
return;
}
// 更新主内容区字体类名
fontApplyMain.className = "";
fontApplyMain.classList.add(event.currentTarget.className);
// ✅ 正确赋值：input 使用 value，h4 使用 textContent
fontNameUI.value = clickedH3.textContent.trim();
fontClassUI.textContent = clickedSpan.textContent.trim();
// ✅ 注意：dialogFonts 未在 HTML 中定义，若存在需确保已初始化
// if (typeof dialogFonts !== 'undefined' && dialogFonts.close) {
// dialogFonts.close();
// }
});
});
</script>? 关键要点总结：
- 永远在事件处理函数内动态查询子元素，而非在事件注册前一次性获取——这是响应式 DOM 操作的基础；
- 使用 event.currentTarget（绑定目标）而非 event.target（实际触发点），确保语义清晰、行为稳定；
- 区分表单控件（<input>）的 value 属性与普通元素（<h4>）的 textContent 属性，不可混用；
- 添加 .trim() 去除可能的前后空白符，提升数据洁净度；
- 加入空值校验，增强脚本鲁棒性，便于调试与维护。
该方案简洁、高效、可维护，适用于任何类似“列表项点击同步更新 UI 状态”的场景。
