javascript - 渲染后如何获取在检查元素窗口中看到的 DOM 内容？

Question

我正在尝试使用 JS 获取使用 MathJax 生成的 SVG 并将其设置为动画 here

在我的代码中，我有

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    SVG: {
      useGlobalCache: true,
      useFontCache: false
    }
  })
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_SVG"></script>

<div id="sup">$$a$$</div>

当我使用 inspect 元素检查呈现的 DOM 时，我得到了 div 的内容，其 id sup 为

<span class="MathJax_Preview" style="color: inherit; display: none;"></span>
<div class="MathJax_SVG_Display" style="text-align: center;">
    <span style="font-size: 100%; display: inline-block; position: relative;" class="MathJax_SVG" id="MathJax-Element-1-Frame" tabindex="0" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;><mi>a</mi></math>" role="presentation">
        <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="1.23ex" height="1.454ex" style="vertical-align: -0.227ex;" viewBox="0 -528.2 529.5 625.9" role="img" focusable="false" aria-hidden="true">
            <g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
                <path stroke-width="1" d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z"></path>
            </g>
        </svg>
        <span class="MJX_Assistive_MathML MJX_Assistive_MathML_Block" role="presentation">
            <math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><mi>a</mi></math>
        </span>
    </span>
</div>
<script type="math/tex; mode=display" id="MathJax-Element-1">a</script>

但是当我尝试使用 id sup 获取 div 的 innerHTML 时

window.addEventListener('load', function(){
  console.log(document.getElementById("sup").innerHTML);
})

我得到 $$a$$ 作为输出。

如何获得与 inspect element 中显示的相同的输出？

Answer 1

您的问题是，当您在window.load 上console.log 时，从未加载MathJax。

首先，您需要等到 MathJax 加载并呈现才能获得所需的输出结果。

我找到了 This question which might help you

The way to synchronize with MathJax's startup actions it to register a StartupHook that will fire when the startup is complete. For example, you can use MathJax.Hub.Register.StartupHook("End",function () { console.log(document.getElementById("sup").innerHTML); });