如何使用JavaScript获取虚拟DOM（#document）内的信息？

Got it, let's break this down for you. You've already targeted the iframe element correctly—now the key is accessing its internal #document, which is sandboxed inside the iframe element. Here's how to do it:

Step 1: Store the iframe element in a variable (optional but cleaner) #

First, let's make your existing selector easier to work with by saving the iframe to a variable:

const targetIframe = document.getElementsByClassName("x-border-panel x-border-layout-ct")[1].getElementsByClassName("x-border-panel")[0];

Step 2: Access the iframe's internal document #

To get the #document inside the iframe, use the contentDocument property (supported in modern browsers). For older IE compatibility, you can fall back to contentWindow.document:

const iframeDocument = targetIframe.contentDocument || targetIframe.contentWindow.document;

Step 3: Query elements inside the iframe's document #

Now you can interact with the iframe's DOM just like you would with the main page's document. For example, to get the text inside that .listTitle span:

const listTitleText = iframeDocument.querySelector(".listTitle").textContent;
console.log(listTitleText); // Should log "Example"

Important Note: Same-Origin Policy #

Keep in mind that this only works if the iframe's content is from the same origin (same domain, protocol, and port) as your parent page. If the iframe loads content from a different origin, browsers will block access to contentDocument due to security restrictions. In that case, you'd need to use something like postMessage to communicate between the parent and iframe if you control both sides.

内容的提问来源于stack exchange，提问作者Ryan Ayton