如何在没有使用jQuery的情况下通过标题获取iframe中的元素?

3

我有一些关于jQuery的性能问题,因此我想尝试使用JS而不是jQuery来循环7000长度。因为我读到了jQuery的性能始终非常糟糕。

我尝试将我的jQuery选择器转换为JS,但它仍然无法正常工作:

从:

var i;
for (i = 0; i < e.detail.length; i++){
    $("iframe").contents().find(".timeline-node[title='" + i + "']").css("background-image", "url( \"imgs/" + e.detail[i] + ".png \") ");
}

亲爱的:

var i;
for (i = 0; i < e.detail.length; i++){
   document.getElementById('#iframe').querySelector("[title=\"" + i + "\"]").css("background-image", "url( \"imgs/quality_3/" + e.detail[i] + ".png \") ");
}

我新的代码出现了错误:无法读取null的querySelector属性,在HTMLDocument。我认为JS无法找到我的带有attr.i的标题。但是我的jQuery代码运行得很好,但处理7000条索引需要80秒。

2
document.getElementById('#iframe') 改为 document.querySelector('iframe') - ponury-kostek
document.getElementById('iframe') OR document.querySelector('#iframe') if the iframe has the id="iframe" otherwise document.querySelector('iframe') - mplungjan
从最初的循环中可以看出,@mplungjan选择的是元素,而不是ID:$("iframe") - Derek Pollard
是的,但我的评论仍然是正确的 :) - mplungjan
此外,对于将来的 jQuery 转换为原生 JavaScript,检查这个网站总是很有帮助的:http://youmightnotneedjquery.com/。 - tcj
将7000张图像插入DOM需要一些时间。我认为你需要重新考虑,并进行一些分页处理。 - mplungjan
1个回答

3

仅查询一次 iframe

var i, iframe = document.querySelector('iframe').contentWindow.document;
for (i = 0; i < e.detail.length; i++){
   iframe.querySelector("[title=\"" + i + "\"]").style.backgroundImage = "url( \"imgs/quality_3/" + e.detail[i] + ".png \") ";
}

您可以尝试仅使用一个查询并筛选结果。

document.querySelector("iframe").contentWindow.document.querySelectorAll("[title]").forEach(function (elm) {
    var id = +elm.getAttribute("title");
    if (id < e.detail.length) {
        elm.style.backgroundImage = "url( \"imgs/quality_3/" + e.detail[id] + ".png \") ";
    }
});

多 iframe 版本

document.querySelectorAll("iframe").forEach(function (iframe) {
    iframe.contentWindow.document.querySelectorAll("[title]").forEach(function (elm) {
        var id = +elm.getAttribute("title");
        if (id < e.detail.length) {
            elm.style.backgroundImage = "url( \"imgs/quality_3/" + e.detail[id] + ".png \") ";
        }
    })
});

性能比较

console.time("loop");
var i;
for(var a = 0; a < 10; a++) {
  for (i = 0; i < 20; i++){
     document.querySelector("[title=\"" + i + "\"]");
  }
}
console.timeEnd("loop")

console.time("singleQuery");
var i;
for(var a = 0; a < 10; a++) {
   document.querySelectorAll("[title]").forEach(function(elm) { 
     if(+elm.getAttribute("title") < 20) { 
      // change background 
     }
   });
}
console.timeEnd("singleQuery")
<p title="0"></p>
<p title="1"></p>
<p title="2"></p>
<p title="3"></p>
<p title="4"></p>
<p title="5"></p>
<p title="6"></p>
<p title="7"></p>
<p title="8"></p>
<p title="9"></p>
<p title="10"></p>
<p title="11"></p>
<p title="12"></p>
<p title="13"></p>
<p title="14"></p>
<p title="15"></p>
<p title="16"></p>
<p title="17"></p>
<p title="18"></p>
<p title="19"></p>


首先,最重要的问题是能否获取它,不是吗?然后,将7000个图像插入DOM中无论如何都需要一些时间。 - mplungjan
@mplungjan OP说脚本执行需要80秒,在我的第二个例子中,它应该快得多。 - ponury-kostek
哇,现在看起来非常好,但是我只有一个错误:“无法读取空值的属性'style',位于HTMLDocument”。但是我的所有带有元素标题的Div都有style =“”。你知道为什么JS找不到样式吗? - Sam Toorchi
@mplungjan 是的,我测试过了。请检查代码片段。 - ponury-kostek
@samTT 请查看更新后的答案。 - ponury-kostek
显示剩余5条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接