获取多个 html 文档中的元素

Posted 2023-05-09

【中文标题】获取多个 html 文档中的元素

【英文标题】：Get elements inside several html documents

【发布时间】：2021-03-06 08:54:28

【问题描述】：

我的系统中有一个功能，可以使用外部库将语音转录为文本。 This is what the library renders:我需要的非常简单：从生成的 textareas 中获取文本。 textareas 渲染时没有任何名称或 ID，因此我只能在 Google Chrome 控制台中按类访问它们。每当我尝试在我的 javascript 代码中按类获取它们时，我都会得到一个 [0] 元素的数组。

我认为问题在于这个库呈现了一个新的#document，而我无法在我的$(document).ready 函数中获取它的内容，因为它限定了“父”文档的范围。 How it renders. 对此有什么想法吗？谢谢。

【问题讨论】：

听起来您需要确定 iframe 何时加载。试试***.com/questions/751435/…。

【参考方案1】：

我希望下面的代码有所帮助。

// Get you iframe by Id or other way
let iframe = document.getElementById("myFrame");

// After iframe has been loaded
iframe.onload= function()    
    // Get the element inside your iframe
    // There are a lot of ways to do it
    // It is good practice to store DOM objects in variables that start with $
    let $elementByTag = iframe.contentWindow.document.getElementsByTagName("p")[0];
    let $elementById = iframe.contentWindow.document.getElementById("elementId");
    let $elementByClass = iframe.contentWindow.document.getElementsByClassName("classHere");
    let $elementBySelector = iframe.contentWindow.document.querySelector("#dad .classname");
    
    // After get the element extract the text/html
    let text = $element.innerText
    let html = $element.innerHTML
;