getBoundingClientRect() で可視性を確認する

HTML

<div class="visible">
  <span></span>
  <div></div>
</div>

<div class="hidden">
  <div style="margin-left: -9999px">margin-left: <span>-9999px</span></div>
  <div style="margin-top: -9999px">margin-top: <span>-9999px</span></div>
  <div style="margin-bottom: -9999px">margin-bottom: <span>-9999px</span></div>

  <div style="position: absolute; left: -9999px">div<span>span</span></div>
  <div style="position: absolute; right: -9999px">div<span>span</span></div>
  <div style="position: absolute; top: -9999px">div<span>span</span></div>

  <span style="display: none">span<span>span</span></span>

  <div style="width: 0;">div<span>span</span></div>
  <div style="height: 0;">div<span>span</span></div>

  <div style="visibility: hidden">div<span>span</span></div>

  <div style="opacity: 0;">div<input type="text"></div>
</div>

<ul>
 <li><a href="https://teratail.com/questions/325107">JavaScript - Js特定の要素にフォーカス移動する｜teratail</a></li>
</ul>

JavaScript

console.info('visible');
for (let element of document.querySelectorAll('.visible *')) {
  console.log(element, element.getBoundingClientRect())
}

console.info('hidden');
for (let element of document.querySelectorAll('.hidden *')) {
  console.log(element, element.getBoundingClientRect())
}