javascript - 检索.textContent包括伪元素

给定

<div><span>first</span><span>second</span></div>

和

span + span::before {
  content: ', ';
}

我想在JavaScript中检索呈现的字符串'first, second'，但.textContent忽略伪元素的内容，因为它不是DOM的一部分。有没有一种方法可以获取实际的渲染文本？

示例：https://jsfiddle.net/silverwind/nyr5kohj/2/

最佳答案

使用getComputedStyle使它正常工作。它尚不支持::after，但添加起来应该不会太困难。

let text = '';
for (const child of children(document.querySelector('div'))) {
  if (child.nodeType === 1) {
    const before = window.getComputedStyle(child, '::before').getPropertyValue('content');
    if (before && before !== 'none') {
      text += before.replace(/^['"]/, '').replace(/['"]$/, '');
    }
  } else if (child.nodeType === 3) {
    text += child.textContent;
  }
}

alert(text);

function children(node) {
  const ret = [];
  for (let i = 0; i < node.childNodes.length; i++) {
    const child = node.childNodes[i];
    ret.push(child, ...children(child));
  }
  return ret;
}

关于javascript - 检索.textContent包括伪元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60258551/