Dom traversal

getDescendants.js

function overlayEl(rect) {
  const el = document.createElement('div');
  el.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
  el.style.position = 'absolute';
  el.style.transform = `translate(${rect.left}px, ${rect.top}px)`;
  el.style.left = `${window.pageXOffset}px`;
  el.style.top = `${window.pageYOffset}px`;
  el.style.width = `${rect.width}px`;
  el.style.height = `${rect.height}px`;
  return el;
}

function getDescendants(node, accum, level = 0) {
  var i;
  accum = accum || [];
  for (i = 0; i < node.childNodes.length; i++) {
    if (node.childNodes[i].nodeType === 3) {
      accum.push({ t: node.textContent, node: node.childNodes[i], level })
    }
    getDescendants(node.childNodes[i], accum, level + 1);
  }
  return accum;
}

const iframe = document.getElementsByClassName('k-content')[0];
const innerBody = iframe.contentDocument.body;

let ts = getDescendants(innerBody);
// Get rand text node
let randIdx = 8;
let t = ts[randIdx];

let r = document.createRange();
r.setStart(t.node, 2);
r.setEnd(t.node, 4);

let c = overlayEl(r.getBoundingClientRect());

// document.body.appendChild(c);
// OR

innerBody.appendChild(c)