如何实现兼容所有浏览器的innerText式Twitter关注按钮文本提取

嘿，我明白你的困扰——旧版Firefox不支持innerText，用textContent又会把所有隐藏的按钮文本都读出来，根本没法判断当前到底是关注还是已关注状态。从你贴的HTML结构来看，Twitter是把所有可能的状态按钮都提前写在DOM里，靠CSS控制显隐，所以才会出现这种情况。下面给你几个靠谱的解决办法：

方法1：直接抓取可见的按钮文本 #

只有当前生效的状态按钮是可见的，其他都是隐藏的，我们可以利用offsetParent来筛选可见元素（元素隐藏时offsetParent会是null）：

// 获取所有状态按钮，筛选出可见的那个
const allBtns = document.querySelectorAll('.user-actions-follow-button button');
const visibleBtn = [...allBtns].find(btn => btn.offsetParent !== null);

if (visibleBtn) {
  const currentStatus = visibleBtn.textContent.trim();
  console.log(currentStatus); // 只会显示当前可见的文本，比如"Follow"或"Following"
}

这个方法在所有浏览器（包括旧版Firefox）都能正常工作，非常可靠。

方法2：通过按钮类名直接判断状态（更高效） #

观察HTML里的按钮类名，每个状态都有对应的专属类：

• 未关注：follow-text
• 已关注：following-text
• 待确认：pending-text
• 已拉黑：blocked-text

我们完全可以不用获取文本，直接通过类名+可见性来判断状态：

const btnContainer = document.querySelector('.user-actions-follow-button');

// 判断是否已关注
if (btnContainer.querySelector('.following-text').offsetParent !== null) {
  console.log('已经关注@Google啦');
} 
// 判断是否未关注
else if (btnContainer.querySelector('.follow-text').offsetParent !== null) {
  console.log('还没关注@Google哦');
}

这种方法比读文本更高效，也避免了文本可能出现的变动问题。

方法3：模拟innerText的通用函数（适合所有场景） #

如果你需要一个通用的、模拟innerText行为的函数，也可以自己实现一个，只收集可见元素的文本：

function getVisibleText(element) {
  let result = '';
  const nodes = element.childNodes;

  for (let node of nodes) {
    if (node.nodeType === Node.TEXT_NODE) {
      result += node.textContent.trim();
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      const style = window.getComputedStyle(node);
      // 检查元素是否可见
      const isVisible = style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0';
      if (isVisible) {
        result += getVisibleText(node);
      }
    }
  }
  return result.trim();
}

// 使用示例
const followBtn = document.querySelector('.user-actions-follow-button');
const statusText = getVisibleText(followBtn);
console.log(statusText); // 效果和innerText一致，只返回可见文本

这个函数递归遍历元素的所有子节点，只把可见元素的文本拼接起来，完美模拟innerText的效果，兼容所有浏览器。

小建议 #

优先用方法2，因为Twitter的按钮类名是官方定义的，稳定性很高，判断状态直接又高效。如果一定要获取文本，方法1足够简单好用。

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