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