Element.getClientRects()

let rectCollection = object.getClientRects();

<h3>span을 안쪽에 포함하는 단락</h3>
<p>
  span과 단락 모두 테두리가 설정되어 있습니다. 클라이언트 사각형은 빨간색입니다.
  p는 단 하나의 테두리 박스를 갖는 반면 span은 여러 테두리 박스를 갖는다는 점을
  유의하세요.
</p>

<div>
  <strong>원본</strong>
  <p>
    <span>여러 줄에 걸쳐있는 단락</span>
  </p>
</div>

<div>
  <strong>p의 사각형</strong>
  <p class="withClientRectsOverlay">
    <span>여러 줄에 걸쳐있는 단락</span>
  </p>
</div>

<div>
  <strong>span의 사각형</strong>
  <p>
    <span class="withClientRectsOverlay">여러 줄에 걸쳐있는 단락</span>
  </p>
</div>

<h3>목록</h3>
<p>
  테두리 박스는 숫자를 포함하지 않으므로 클라이언트 사각형에 대해서도 숫자를
  포함하지 않음을 유의하세요.
</p>

<div>
  <strong>원본</strong>
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
  </ol>
</div>

<div>
  <strong>ol의 사각형</strong>
  <ol class="withClientRectsOverlay">
    <li>Item 1</li>
    <li>Item 2</li>
  </ol>
</div>

<div>
  <strong>각 li의 사각형</strong>
  <ol>
    <li class="withClientRectsOverlay">Item 1</li>
    <li class="withClientRectsOverlay">Item 2</li>
  </ol>
</div>

<h3>캡션을 갖는 테이블</h3>
<p>
  테이블의 테두리 박스가 캡션을 포함하지는 않지만, 클라이언트 사각형은 캡션을
  포함합니다.
</p>

<div>
  <strong>원본</strong>
  <table>
    <caption>
      캡션
    </caption>
    <thead>
      <tr>
        <th>thead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>tbody</td>
      </tr>
    </tbody>
  </table>
</div>

<div>
  <strong>table의 사각형</strong>
  <table class="withClientRectsOverlay">
    <caption>
      캡션
    </caption>
    <thead>
      <tr>
        <th>thead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>tbody</td>
      </tr>
    </tbody>
  </table>
</div>

strong {
  text-align: center;
}
div {
  display: inline-block;
  width: 150px;
}
div p,
ol,
table {
  border: 1px solid blue;
}
span,
li,
th,
td {
  border: 1px solid green;
}

function addClientRectsOverlay(elt) {
  /* 각 클라이언트 사각형에서 div를 절대적으로 배치하였기 때문에 div의 테두리 너비는 사각형의 너비와 동일합니다.
     Note: 유저가 크기를 조정하거나 확대/축소하는 경우 오버레이가 제 위치를 벗어날 수 있습니다. */
  var rects = elt.getClientRects();
  for (var i = 0; i != rects.length; i++) {
    var rect = rects[i];
    var tableRectDiv = document.createElement("div");
    tableRectDiv.style.position = "absolute";
    tableRectDiv.style.border = "1px solid red";
    var scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
    var scrollLeft =
      document.documentElement.scrollLeft || document.body.scrollLeft;
    tableRectDiv.style.margin = tableRectDiv.style.padding = "0";
    tableRectDiv.style.top = rect.top + scrollTop + "px";
    tableRectDiv.style.left = rect.left + scrollLeft + "px";
    // rect.width가 테두리 너비가 되어야 하므로 콘텐츠 너비는 2px 더 작습니다.
    tableRectDiv.style.width = rect.width - 2 + "px";
    tableRectDiv.style.height = rect.height - 2 + "px";
    document.body.appendChild(tableRectDiv);
  }
}

(function () {
  /* "withClientRectsOverlay" 클래스가 할당된 모든 엘리먼트에 대해 addClientRectsOverlay(elt) 함수를 호출합니다 */
  var elt = document.getElementsByClassName("withClientRectsOverlay");
  for (var i = 0; i < elt.length; i++) {
    addClientRectsOverlay(elt[i]);
  }
})();