本文详解如何使用原生 JavaScript 为 元素绑定点击事件，精准提取其内部 和 > span> 的文本内容，并分别赋值给同级的 和 元素，避免 undefined 错误与事件失效问题。
本文详解如何使用原生 javascript 为 `
` 和 ` > span>` 的文本内容，并分别赋值给同级的 `` 和 `` 元素，避免 `undefined` 错误与事件失效问题。
` 元素，避免 `undefined` 错误与事件失效问题。
在实际开发中，常需通过用户点击列表项（如字体选择面板）来动态更新 UI 中的名称与描述字段。原始代码存在几个关键问题：
- ❌ document.querySelectorAll("li > h3").textContent 对 NodeList 调用 .textContent —— 无效操作（NodeList 无该属性，返回 undefined）；
- ❌ 将 span.textContent 赋值给 h4.value ——
没有 value 属性
，应使用 .textContent 或 .innerText； - ❌ 事件监听绑定在
- 上，但点击
时 event.target 是
，而 event.target.className 并非
- 的 class（导致主内容区样式未正确切换）；
- ❌ 使用 event.target 而非 event.currentTarget，导致子元素触发时无法稳定获取目标
- 。
✅ 正确做法是：在事件处理器中，始终以 event.currentTarget（即被监听的
和 > span>，确保获取的是当前被点击项的对应子元素内容。
以下是优化后的完整脚本（可直接嵌入 HTML）：
<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/span 也生效）
const currentLi = event.currentTarget;
// 安全查询子元素：若 h3 或 span 不存在，返回 null（可加空值判断）
const clickedH3 = currentLi.querySelector("h3");
const clickedSpan = currentLi.querySelector("h3 > span");
// 更新主内容区的字体类名
fontApplyMain.className = "";
fontApplyMain.classList.add(currentLi.className);
// 更新表单字段：input 使用 value，h4 使用 textContent
fontNameUI.value = clickedH3?.textContent || "";
fontClassUI.textContent = clickedSpan?.textContent || "";
// 注意：dialogFonts.close() 需确保 dialogFonts 已正确定义（如 HTMLDialogElement）
// 若未定义，需先获取：const dialogFonts = document.getElementById("dialog-fonts-open");
// 并确认其为 <dialog> 元素或具备 close() 方法
});
});
</script>
? 关键要点总结：
- ✅ 使用 event.currentTarget 替代 event.target，确保始终操作绑定事件的
- ；
- ✅ 用 element.querySelector() 在当前
- 内部查找子元素，避免跨项误取；
- ✅ 设置 value，
设置 textContent（不可混用 value）；
- ✅ 使用可选链操作符 ?. 防止 DOM 查询失败时抛错（兼容性需注意：现代浏览器支持，旧版可改用 clickedH3 && clickedH3.textContent）；
- ⚠️ 若 dialogFonts.close() 报错，请确认 dialogFonts 已通过 document.getElementById(...) 获取且为有效
此方案结构清晰、健壮性强，适用于任意含嵌套标题与描述的列表交互场景。
