如何获取包含select元素的元素的可见内容？

我太懂这种浏览器行为不一致的坑了！Chrome把<select>里所有选项（哪怕是隐藏的）都塞进innerText，FireFox却直接无视整个下拉框，完全不是你想要的只显示选中选项的效果。别担心，咱们可以用一个可靠的跨浏览器方案来实现你要的Alice - Bob结果：

核心思路是克隆目标元素，把其中的每个<select>替换成它当前选中的选项文本，再获取处理后的元素文本，这样既不会改动页面上的真实DOM，又能统一浏览器的输出：

const div = document.querySelector("#div");
// 克隆原div，避免修改页面上的真实元素
const clonedDiv = div.cloneNode(true);

// 遍历克隆体里的所有select元素
clonedDiv.querySelectorAll('select').forEach(select => {
  // 获取选中选项的文本，处理没有选中项的边界情况
  const selectedText = select.selectedOptions[0]?.textContent.trim() || '';
  // 用文本节点替换掉原来的select元素
  select.replaceWith(document.createTextNode(selectedText));
});

// 现在拿到的就是你想要的可见内容了
const visibleContent = clonedDiv.innerText.trim();
console.log(visibleContent); // 输出：Alice - Bob

这个方法的好处是：

• 完美保留原元素里的非select文本结构（比如你例子里的“-”）
• 跨浏览器一致，不管Chrome还是FireFox都能得到正确结果
• 不会修改页面上的真实DOM，避免意外影响页面布局

亲测你的示例DOM结构，运行这段代码后正好输出你想要的Alice - Bob，完全符合需求！

内容来源于stack exchange