javascript - 检测子项是否已存在于父项中

Question

我正在开发一个用于 StackOverflow 的用户脚本，它基本上将所有图像替换为来自代理的同一图像的副本。

我想要的是将评论中发布的所有图像链接添加到评论内名为 imageContainer 的新容器中，如果它尚不存在，则应创建该容器，然后所有图像都应移至该容器中。

我目前所做的工作 - 除了评论中的每个图像，都会创建一个新容器。

这是我目前拥有的代码:

var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length ; i++) {
    var matches = containsAny(links[i].href, matchURLs);
    if(matches) {
        //link variables
        var link = links[i];
        var linkParent = links[i].parentNode;

        console.log(linkParent);

        //create <img> element
        var image = document.createElement("img");
        image.src = proxy + link.href;
        image.height = 50;
        image.width = 50;

        //alter <a> element
        link.href = proxy + link.href;
        link.target = "_blank";
        link.innerHTML = "";
        link.style.borderBottom = "none";

        //attach <img> to <a>
        link.appendChild(image);

        var result = linkParent.contains(document.getElementById("imageContainer"));
        console.log(result);
        if(!result) {
            //create imageContainer (div) element
            var container = document.createElement("div");
            container.id = "imageContainer";
            linkParent.prepend(container);
        }
        //append image to container that exists from last check
        linkParent.querySelector("#imageContainer").appendChild(link);
    }
}

这一行:

var result = linkParent.contains(document.getElementById("imageContainer"));

总是导致 false ，即使我已经在上一个循环中创建了容器，这意味着为代码转换的每个图像创建了一个新的 div，这使我更难正确格式化。

基本上，当前代码将在我正在测试的评论中生成以下 HTML:

<span class="comment-copy">
    <div id="imageContainer"><a href="http://web.archive.org/web//image/I8WNI.png" rel="nofollow noreferrer" target="_blank" style="border-bottom: none;"><img src="http://web.archive.org/web//image/I8WNI.png" height="50" width="50"></a></div>
    <div id="imageContainer"><a href="http://web.archive.org/web//image/I8WNI.png" rel="nofollow noreferrer" target="_blank" style="border-bottom: none;"><img src="http://web.archive.org/web//image/I8WNI.png" height="50" width="50"></a></div>
    currently testing my new userscript (relevant to discussion)  
</span>

如您所见，它包含 div imageContainer 的 2 个副本，即使我的循环应该检查它是否存在，并且只有在它不存在时才创建它。

我期望的结果如下:

<span class="comment-copy">
    <div id="imageContainer">
        <a href="http://web.archive.org/web//image/I8WNI.png" rel="nofollow noreferrer" target="_blank" style="border-bottom: none;"><img src="http://web.archive.org/web//image/I8WNI.png" height="50" width="50"></a>
        <a href="http://web.archive.org/web//image/I8WNI.png" rel="nofollow noreferrer" target="_blank" style="border-bottom: none;"><img src="http://web.archive.org/web//image/I8WNI.png" height="50" width="50"></a>
    </div>
    currently testing my new userscript (relevant to discussion)  
</span>

脚本在页面加载时从 tampermonkey 运行。

为什么要为每个链接创建一个新的 div？

一个发现:

上面的代码中提到了一个名为 matchURLs 的变量- 我刚刚发现了最奇怪的事情。

这个变量定义为

var matchURLs = ["/image/", "https://i.imgur.com/"];

它基本上只是检查图片是否来自的 URL(我不想代理每张图片，只代理来自上面 URL 的图片)

但奇怪的是，如果我从数组中删除第二个链接，例如，如果我将 matchURLs 定义为

var matchURLs = ["/image/"];

然后代码按预期工作并将所有图像放入单个 imageContainer div 而不是多个 div 中。这是问题的原因吗？为什么？

containsAny()函数定义为:

function containsAny(str, substrings) {
    for (var i = 0; i != substrings.length; i++) {
       if(str.startsWith(substrings[i])) {
         return true;
       }
    }
    return false;
}

Answer 1

使用 parentLink.querySelector( '.image-container' ) 尝试选择作为 .comment-copy 元素子元素的图像容器。如果它为 null，则它不存在，否则您将引用该元素。

运行代码片段可以看到第一条和第三条评论分别返回带有 innerHTML 1 和 3 的正确元素，第二条评论返回 null，因为图像容器尚不存在。

var links = document.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
  var link = links[i];
  var linkParent = links[i].parentNode;

  result = linkParent.querySelector('.image-container');

  console.log(result);
}

<span class="comment-copy">
    this comment has some links like <a href="/image/I8WNI.png" >image</a> and <a href="/image/I8WNI.png" >image</a>
        <div class="image-container">1</div>
</span>

<span class="comment-copy">
    this comment has some links like <a href="/image/I8WNI.png" >image</a> and <a href="/image/I8WNI.png" >image</a>
</span>

<span class="comment-copy">
    this comment has some links like <a href="/image/I8WNI.png" >image</a> and <a href="/image/I8WNI.png" >image</a>
        <div class="image-container">3</div>
</span>