JS实现选定指定HTML元素对象中指定文本内容功能示例

实现选定指定HTML元素对象中指定文本内容功能，可以通过JS中的DOM操作实现。具体步骤如下：

1. 获取指定HTML元素对象

通过JS的document.getElementById()或document.querySelector()方法获取到要操作的HTML元素对象。例如，如果我们要获取ID为"myDiv"的div元素对象，可以使用以下代码：

var myDiv = document.getElementById("myDiv");  // 通过ID获取
// 或者
var myDiv = document.querySelector("#myDiv");  // 通过选择器获取

1. 获取指定文本内容

在获取到HTML元素对象后，我们需要从中获取指定的文本内容。可以通过它的innerHTML、innerText或textContent属性来获取。例如，如果要获取myDiv中第一个<p>标签中的文本内容，可以使用以下代码：

var p = myDiv.querySelector("p:first-child");
var text = p.textContent;  // 获取p元素中的文本内容

1. 操作选定文本内容

获取到文本内容后，我们可以使用String对象提供的方法来操作它。例如，如果要将上面获取到的文本内容转成大写，可以使用以下代码：

var upperText = text.toUpperCase();

1. 替换选定文本内容

如果我们要在HTML元素对象中替换指定的文本内容，可以通过String对象提供的replace()方法来实现。例如，如果我们要将myDiv中所有<h1>标签中的文本内容都替换成"Hello World"，可以使用以下代码：

var h1List = myDiv.getElementsByTagName("h1");
for (var i = 0; i < h1List.length; i++) {
  var h1 = h1List[i];
  h1.textContent = "Hello World";
}

示例1：改变指定div中p元素的文本，在每行末尾加上"..."。

var myDiv = document.getElementById("myDiv");  // 获取指定div对象
var pList = myDiv.querySelectorAll("p");  // 获取所有p元素
for (var i = 0; i < pList.length; i++) {
  var p = pList[i];
  var text = p.textContent;  // 获取p元素中的文本内容
  var newLines = text.split("\n");  // 根据换行符分割行数
  var newText = "";  // 新文本内容
  for (var j = 0; j < newLines.length; j++) {
    var line = newLines[j];
    newText += line + "...";  // 在每行末尾加上"..."
    if (j !== newLines.length - 1) {
      newText += "\n";  // 如果不是最后一行，在末尾添加换行符
    }
  }
  p.textContent = newText;  // 替换p元素文本内容
}

示例2：将指定div中所有h1标签替换成"Hello World"。

var myDiv = document.getElementById("myDiv");  // 获取指定div对象
var h1List = myDiv.querySelectorAll("h1");  // 获取所有h1元素
for (var i = 0; i < h1List.length; i++) {
  var h1 = h1List[i];
  h1.textContent = "Hello World";  // 替换h1元素文本内容
}