能否通过JavaScript实现同时选中多个DOM元素的文本内容？

核心原因 #

原有代码选中状态丢失是因为selectElement函数中执行了selection.removeAllRanges()，这行操作会清空所有已有的选中文本范围，再添加新范围，因此每次点击都会覆盖之前的选中效果。

原生Selection多范围选中方案（仅Firefox兼容） #

需要注意的是，目前仅Firefox浏览器原生支持多文本范围选中，Chrome、Edge等基于Chromium的浏览器受限于原生Selection API的实现，默认仅支持单个选中范围，调用addRange添加多个范围时会自动忽略后续添加的范围。

适配Firefox的修改代码如下：

const selectElement = (element) => {
  const range = document.createRange();
  range.selectNode(element);
  
  const selection = window.getSelection();
  // 判断当前元素是否已经在选中范围内，避免重复添加，同时支持点击取消选中
  for (let i = 0; i < selection.rangeCount; i++) {
    const existingRange = selection.getRangeAt(i);
    const ancestor = existingRange.commonAncestorContainer;
    if (ancestor === element || ancestor.parentElement === element) {
      selection.removeRange(existingRange);
      return;
    }
  }
  // 移除清空范围的逻辑，直接添加新范围
  selection.addRange(range);
}

const container = document.getElementById("container");
container.addEventListener('click', (event) => {
  // 避免选中容器本身
  if (event.target === container) return;
  selectElement(event.target);
});

全浏览器兼容方案（样式模拟） #

你补充的样式修改方案可以实现全浏览器兼容的多选效果，优化后可支持点击切换选中状态，是更推荐的生产环境实现方案：
首先提前定义选中样式类：

.selected {
  background-color: blue;
  color: white;
}

修改逻辑代码：

const selectElement = (element) => {
  // 切换选中状态
  element.classList.toggle('selected');
}

// 如需获取所有选中的文本，可遍历所有带selected类的元素拼接textContent即可
const getAllSelectedText = () => {
  return Array.from(document.querySelectorAll('.selected'))
    .map(el => el.textContent.trim())
    .join('\n');
}

const container = document.getElementById("container");
container.addEventListener('click', (event) => {
  if (event.target === container) return;
  selectElement(event.target);
});

内容的提问来源于stack exchange，提问作者pibocik125