最安全获取相邻兄弟元素文本的方式是用 nextElementSibling 或 previousElementSibling，它们只返回元素节点，需检查 null 并用 textContent.trim() 提取；非直接相邻时改用 parentNode.children 配合 find；结构明确时可用 querySelector 相对选择器。
用 nextElementSibling 和 previousElementSibling 获取相邻兄弟元素的文本
HTML 中没有“提取兄弟节点文本”的内置方法，必须靠 DOM API 手动遍历。最常用、最安全的方式是用 nextElementSibling 或 previousElementSibling ——它们只返回元素节点（跳过文本、注释等干扰节点），避免因换行或空格导致的意外 Text 节点。
例如，已知一个按钮 <button id="btn">提交</button>，它后面紧跟着一个用于显示提示的 <span class="hint">请填写邮箱</span>，想取这个提示文本：
const btn = document.getElementById('btn');
const hintSpan = btn.nextElementSibling;
const text = hintSpan ? hintSpan.textContent.trim() : '';
- 务必检查返回值是否为
null（比如兄弟元素不存在，或中间夹了注释节点） - 用
textContent而非innerText：前者返回所有文本内容（含隐藏元素），后者受 CSS 影响且性能较差 - 调用
trim()是因为 HTML 源码中兄弟元素间常有换行/缩进，会变成首尾空白
当兄弟节点不直接相邻时，用 parentNode.children 配合索引查找
如果目标兄弟节点和当前元素中间隔了其他元素（比如中间有个 <div> 或图标 <i>），nextElementSibling 就失效了。这时得退回到父容器，用 children 列表统一处理。
假设结构是：<div class="field"><label>邮箱</label><input><span class="error">格式错误</span></div>，已知 input 元素，想取同级的 .error 文本：
立即学习“前端免费学习笔记（深入）”；
const input = document.querySelector('input');
const parent = input.parentNode;
const errorSpan = Array.from(parent.children).find(el => el.classList.contains('error'));
const text = errorSpan?.textContent.trim() ?? '';
-
parent.children是只读的HTMLCollection，不能直接用find，需先转成数组（Array.from或[...parent.children]） - 用
find比循环for更简洁，但要注意兼容性（IE 不支持，如需支持得降级） - 避免用
parent.querySelectorAll('.error')：它查的是整个子树，不是“同级”，可能误命中嵌套更深的节点
用 querySelector 直接定位兄弟节点（CSS 选择器方式）
如果结构稳定、有足够区分度的类名或属性，最简方案其实是绕过“兄弟关系”这个概念，直接用相对选择器查。
比如目标总是“同一父容器下、在当前元素之后、带 data-role="hint" 的第一个 span”：
const btn = document.getElementById('btn');
const hint = btn.closest('*').querySelector(':scope > span[data-role="hint"]');
const text = hint?.textContent.trim() ?? '';
-
:scope表示从当前元素（这里是btn）开始查找；closest('*')是兜底写法，确保有可作用的父上下文（因为:scope在某些旧浏览器中需配合closest使用） - 更稳妥的写法是先获取父容器：
const parent = btn.parentElement; const hint = parent.querySelector('span[data-role="hint"]'); - 注意：这种写法依赖结构语义，若多个同类节点存在，
querySelector只返回第一个，不符合预期时得换querySelectorAll加索引
容易忽略的坑：文本节点、display:none 和 shadow DOM
实际项目里，看似简单的“取兄弟文本”，常因三类情况失败：
- 把
nextSibling误当成nextElementSibling：前者可能返回换行符生成的Text节点，textContent是空格或换行，不是你要的文本 - 目标兄弟元素设置了
display: none或visibility: hidden：用innerText会返回空字符串，但textContent仍能取到 —— 根据需求决定用哪个 - 目标在 Shadow DOM 内部（比如 Web Component）：普通
querySelector查不到，必须先访问shadowRoot，例如el.shadowRoot.querySelector('.hint')
DOM 关系不是树状图里画的那么干净，真实 HTML 总是混着空格、注释、样式控制和封装边界。动手前先 console.dir(el.parentNode.children) 看一眼结构，比硬套公式更可靠。
