有没有办法提取DOM元素周围的文字？

Question

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<sup>2</sup> Tecum
    optime, deinde etiam cum mediocri amico.<sup>2</sup> Idem iste, inquam, de voluptate
    quid sentit?
  </p>

  <p>
    Bonum liberi: misera orbitas. Oratio me istius philosophi non offendit; Hoc
    sic expositum dissimile est superiori. Cave putes quicquam esse verius. Quae
    ista amicitia est?
  </p>

  <p>
    Duo Reges: constructio interrete.<sup>3,4</sup> Ita nemo beato beatior.
    Efficiens dici potest.<sup>5</sup> Consequentia exquirere, quoad sit id,
    quod volumus, effectum. Tubulo putas dicere?
  </p>

  <p>
    Haec para/doca illi, nos admirabilia dicamus. Bonum valitudo: miser morbus.
    Equidem e Cn. Respondent extrema primis, media utrisque, omnia omnibus. At
    ille pellit, qui permulcet sensum voluptate.
  </p>

  <p>
    Recte dicis; Frater et T. Cur post Tarentum ad Archytam? De quibus cupio
    scire quid sentias. Primum quid tu dicis breve?<sup>5</sup> 
  </p>
</div>

对于每个 sup 元素，我如何检索该元素周围的文本？

对于第一个 <sup>2</sup>，我怎么能检索到 "cing elit. "左边的10个字呢？<sup>2</sup> 和右边的10个字（"Tecum opti"）。<sup>2</sup>?

[...document.querySelectorAll('sup')].forEach(sup => {
    // for e.g. the current sup element is the first <sup>2</sup>
    // how would someone be able retrieve the text around it.
    // i.e.
    // ... adipiscing elit.<sup>2</sup> Tecum optime ...
})

我找不到任何可行的方法来实现这个目标。我甚至不知道这在技术上是否可行。

谢谢你的帮助。

Answer 1

你可以使用 previousSibling (和 nextSibling):

Array.from(document.querySelectorAll("sup"), function (elem) {
    console.log(elem.previousSibling.textContent.slice(-10));
});

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<sup>2</sup> Tecum
    optime, deinde etiam cum mediocri amico.<sup>2</sup> Idem iste, inquam, de voluptate
    quid sentit?
  </p>

  <p>
    Bonum liberi: misera orbitas. Oratio me istius philosophi non offendit; Hoc
    sic expositum dissimile est superiori. Cave putes quicquam esse verius. Quae
    ista amicitia est?
  </p>

  <p>
    Duo Reges: constructio interrete.<sup>3,4</sup> Ita nemo beato beatior.
    Efficiens dici potest.<sup>5</sup> Consequentia exquirere, quoad sit id,
    quod volumus, effectum. Tubulo putas dicere?
  </p>

  <p>
    Haec para/doca illi, nos admirabilia dicamus. Bonum valitudo: miser morbus.
    Equidem e Cn. Respondent extrema primis, media utrisque, omnia omnibus. At
    ille pellit, qui permulcet sensum voluptate.
  </p>

  <p>
    Recte dicis; Frater et T. Cur post Tarentum ad Archytam? De quibus cupio
    scire quid sentias. Primum quid tu dicis breve?<sup>5</sup> 
  </p>
</div>