title: Is there a non-naïve way of calculating a logical offset from a DOM offset?
body: <p>I have <a href="https://stackoverflow.com/q/49721966/5223757">highlighted</a> some of the text inside my parent element by placing it in <code>&lt;span&gt;</code>s, and now want to work out what part of it is selected. I have retrieved the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Selection" rel="nofollow noreferrer"><code>Selection</code></a> object, but it doesn't contain directly useful information. I want to get the offsets relative to the start of the text, but they're relative to the the text nodes <em>inside the highlighting <code>&lt;span&gt;</code>s</em> and don't line up with <code>parent.textContent</code>.</p>
  
  <p>Given:</p>
  
  <ul>
  <li>A reference to the <code>parent</code> element<br>
  This element contains nothing but inline elements (specifically, <code>&lt;span&gt;</code>s) and text nodes, but they are arbitrarily nested.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Selection/anchorNode" rel="nofollow noreferrer"><code>Selection.anchorNode</code></a> / <a href="https://developer.mozilla.org/en-US/docs/Web/API/Selection/focusNode" rel="nofollow noreferrer"><code>Selection.focusNode</code></a><br>
  This is a reference to the text node that contains the fragment of text containing the offset position.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Selection/anchorOffset" rel="nofollow noreferrer"><code>Selection.anchorOffset</code></a> / <a href="https://developer.mozilla.org/en-US/docs/Web/API/Selection/focusOffset" rel="nofollow noreferrer"><code>Selection.focusOffset</code></a><br>
  This is a non-negative integer, where <code>0</code> is before the first character.</li>
  </ul>
  
  <p>is there a way more efficient than the naïve "explore the tree with a cumulative count" technique to pretend that the <code>&lt;span&gt;</code>s don't exist for the sake of measuring the <code>Selection</code> focus and anchor points?</p>