queryselector() + textcontent 是最直接获取首个匹配元素文本的方式，它不依赖渲染、不触发重排、不处理空白，行为稳定；但需判空防错，且 input/textarea 应用 value 属性。
querySelector() + textContent 是最直接的组合
想取第一个匹配元素的文本，querySelector() 配合 textContent 就够了。它不依赖渲染状态，不触发重排，也不拼接子节点的 innerText 那种隐式换行/空格处理，行为稳定。
常见错误是误用 innerText：它会受 CSS visibility、display 影响，还自动折叠空白，比如 <p>Hello<span style="display:none">world</span></p> 的 innerText 是 "Hello"，但 textContent 是 "Helloworld"（无空格）——这往往不是你想要的“可见文本”。
-
querySelector('p.title')找不到时返回null，必须判空再取textContent，否则报Cannot read property 'textContent' of null - 如果目标元素是
<input>或<textarea></textarea>，得用value属性，textContent拿不到用户输入值 -
textContent会包含所有子文本节点内容（包括注释节点的文本），但不会解析 HTML 标签；若要纯“渲染后可见文本”，才考虑innerText，但需接受它的兼容性和副作用
遇到文本节点嵌套在标签中间怎么办
像 <p><strong>Time:</strong> 13:45</p> 这种结构，querySelector('p').textContent 返回的是 "Time: 13:45"，没法单独抠出 "13:45"。这时候不能靠 textContent 切分字符串——HTML 属性顺序、空格、换行都不可控。
真正可靠的做法是定位父元素后，用 JavaScript 遍历其 childNodes，找 nodeType === 3（文本节点），再过滤掉空白或前导符号：
const p = document.querySelector('p');
if (p) {
const textNode = Array.from(p.childNodes).find(n => n.nodeType === 3 && n.textContent.trim());
const value = textNode ? textNode.textContent.trim() : '';
}
- 别用
lastChild.textContent——如果末尾有空格、换行或注释节点，lastChild可能不是你要的文本节点 -
innerHTML或outerHTML不适用：它们返回带标签的字符串，还得二次清洗，容易漏掉边界 case - 如果结构固定且已知文本总在
<strong></strong>后，可用p.querySelector('strong').nextSibling，但前提是 nextSibling 确实是文本节点，否则是null
用正则从 outerHTML 提取文本？别这么做
有人图省事写 el.outerHTML.match(/>([^，这种写法在 <code><div>A<span>B</span>C</div> 场景下会错匹配成 "A"，而实际想要的是 "AC"（即父元素直系文本）。更糟的是，一旦 HTML 里出现 或 <code>> 字符（比如代码块、JSON 字符串），正则直接崩。
- 正则无法理解 DOM 层级，对嵌套、转义、属性值中的尖括号完全无感
- 浏览器原生 API（
textContent/childNodes）已经足够快，没必要用正则给自己埋坑 - 唯一可容忍正则的场景：预处理极简、格式严格的静态 HTML 片段（比如服务端吐出的模板片段），且你 100% 控制输出格式
Go / Python 等后端提取时注意节点有效性
在 Go 用 goquery、Python 用 BeautifulSoup 时，querySelector() 类似逻辑同样适用，但要注意：这些库解析的是原始 HTML 字符串，不执行 JS，也不渲染样式，所以 innerText 类语义不存在。
-
goquery.Find("p").First().Text()相当于前端的querySelector().textContent，它拼接所有文本子节点，但不处理 CSS 隐藏逻辑 -
BeautifulSoup.find('p').get_text()默认会合并空白、换行，等价于innerText行为；如需严格对应textContent，得传参数strip=False, separator="" - 所有后端解析器都可能把孤立文本（如
<p>abc</p> def中的"def"）忽略掉——它不属于任何标签，只在顶层document的childNodes里，这点常被忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
