JavaScript 与 jQuery 怎样获取 DOM 节点特定文本内容

在网页开发中，经常需要获取DOM节点中的特定文本内容，JavaScript和jQuery都提供了相应的方法来实现这一功能。本文将详细介绍它们的具体用法。

一、使用JavaScript获取DOM节点特定文本内容

JavaScript原生提供了多种方式来操作DOM节点并获取文本内容。

1. 通过innerText属性 innerText属性可以获取节点及其后代节点的渲染后的文本内容，会忽略HTML标签。例如：

<p id="myPara">这是一段 <strong>重要</strong> 的文本</p>
<script>
  var para = document.getElementById('myPara');
  var text = para.innerText;
  console.log(text); 
</script>

2. 通过textContent属性 textContent属性与innerText类似，但它会返回所有的文本内容，包括被CSS隐藏的文本。例如：

<p id="myPara" style="display:none;">隐藏文本</p>
<script>
  var para = document.getElementById('myPara');
  var text = para.textContent;
  console.log(text); 
</script>

二、使用jQuery获取DOM节点特定文本内容

jQuery是一个广泛使用的JavaScript库，它简化了DOM操作。

1. 使用text()方法 text()方法可以获取匹配元素集合中所有元素的文本内容。例如：

<p class="myClass">这是一段文本</p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  var text = $('.myClass').text();
  console.log(text);
</script>

2. 使用html()方法并提取文本 html()方法获取元素的HTML内容，然后可以通过一些方法提取其中的文本。例如：

<p id="myPara"><span>文本内容</span></p>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  var htmlContent = $('#myPara').html();
  var text = $(htmlContent).text();
  console.log(text);
</script>

JavaScript和jQuery都有各自获取DOM节点特定文本内容的方法，开发者可以根据具体需求和项目情况选择合适的方式来实现。