js取text值

在JavaScript中获取元素的文本内容常见的有以下几种方法：

一、基础概念

1. DOM（Document Object Model）
   • 浏览器将HTML文档解析为一个由节点组成的结构化对象模型。每个HTML元素都是一个DOM节点，可以通过JavaScript来操作这些节点以获取或修改页面内容。

• 文本节点（TextNode）
  • 在DOM中，包含纯文本内容的节点就是文本节点。例如，在<p>Hello World</p>这个段落元素中，“Hello World”就是一个文本节点。

二、获取文本内容的方法及示例

1. 使用innerText属性
   • 优势：
     • 它会考虑CSS样式，忽略隐藏元素的文本，并且会合并相邻元素的文本内容为一个单一的字符串。
   • 示例代码：
   • 示例代码：
   • 在上述示例中，div.innerText会输出“This is some text inside a div.”，即使<span>元素存在也不会单独显示其文本内容。

• 使用textContent属性
  • 优势：
    • 它会获取元素及其所有后代元素的文本内容，不会考虑CSS样式，也不会忽略隐藏元素的文本。
  • 示例代码：
  • 示例代码：
  • 这里div.textContent会输出“This is some text and hidden text inside a div.”，包含了隐藏元素的文本内容。
• 通过querySelector或getElementById结合firstChild.nodeValue（针对特定情况）
  • 优势：
    • 当需要更精确地获取某个特定元素的文本内容时可以使用。例如在一个复杂的DOM结构中，如果知道目标文本节点是某个元素的第一个子节点，可以使用这种方法。
  • 示例代码：
  • 示例代码：
  • 在这个例子中，p.firstChild.nodeValue会输出“Hello World”。不过这种方法相对比较脆弱，如果DOM结构发生变化（例如在<p>元素中添加了其他元素或者空白字符等情况）可能会导致获取失败。

三、应用场景

1. 表单验证
   • 在用户提交表单之前，可以使用JavaScript获取输入框（<input>元素）的文本内容（值）来进行验证，例如检查用户名是否符合要求（长度、特殊字符等）。
   • 示例代码：
   • 示例代码：
   • 这里虽然获取的是<input>元素的value属性（也是一种文本内容相关的操作），但体现了获取文本内容用于验证的场景。

• 动态内容更新
  • 当需要根据用户的操作或者从服务器获取的数据来更新页面上的文本内容时，就需要先获取原有的文本内容或者相关的元素，然后进行修改。例如，在一个新闻阅读应用中，当用户点击“下一篇文章”按钮时，需要获取当前文章标题元素的文本内容并进行替换。
  • 示例代码：
  • 示例代码：
  • 在这个例子中，通过获取<h1>元素的文本内容（innerText）来更新文章标题。