nextSibling最直接但需trim；标签包裹时优先查label关联；相邻选择器易因空格失效；批量提取须过滤disabled、hidden及aria-hidden元素。
复选框后紧跟文本时，用 nextSibling 最直接
如果 HTML 是 同意用户协议 这种结构（即文本节点紧接在 后面），nextSibling 是最轻量的取法。但要注意：它返回的是原始文本节点，可能含空格或换行。
实操建议：
- 先检查
el.nextSibling.nodeType === 3（3 表示文本节点），避免取到注释或元素节点 - 用
el.nextSibling.textContent.trim()或el.nextSibling.nodeValue.trim()去除首尾空白 - 若复选框后有换行或缩进，
trim()不可省；否则可能拿到空字符串或 "\n " 这类值
标签包裹文本时，优先查 label 关联关系
更规范的写法是把复选框和文本包在 里，或用 for/id 显式关联。这时文本不在 nextSibling，而在 label 内部。
实操建议：
- 若复选框有
id="agree"，找document.querySelector('label[for="agree"]')，再取其textContent - 若复选框被
直接包裹（如），用el.closest('label').textContent - 注意
closest('label')比遍历父节点更安全，能跨多层嵌套
querySelector 配合相邻兄弟选择器要小心空格
有人会写 input[type="checkbox"] + span 或 input + label，但这只匹配「紧邻且无其他节点隔开」的情况。只要中间有文本节点（哪怕只是空格），选择器就失效。
常见错误现象：
- HTML 写成
文本（中间有空格），input + span查不到 - 实际 DOM 中，换行符会被解析为文本节点，导致「视觉上相邻」≠「CSS 选择器意义上的相邻」
- 建议改用
el.parentNode.querySelectorAll('span, label, :not(input)')再过滤，或直接走label关联路径
批量提取时别忘了处理 disabled 或 hidden 复选框
业务中常需过滤掉不可交互的选项，比如 disabled、style="display:none" 或 aria-hidden="true" 的复选框。它们的旁边文本通常也不应计入结果。
实操建议：
- 用
el.matches(':enabled:not([aria-hidden="true"])')判断是否有效可读 - 对
getComputedStyle(el).display !== 'none'做显式样式检查，比仅看hidden属性更可靠 - 若文本本身被
aria-hidden="true"包裹，即使复选框可用，文本也不该提取——得连带检查文本容器的可访问性状态
提取逻辑看似简单，但真实页面里文本节点、空格、label 关联、隐藏状态混在一起，最容易漏掉的是换行导致的文本节点断裂，以及 aria-hidden 对语义的覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
