Question

我发现了一个问题...... 我正在编写一个用于润滑脂和tampemonkey的用户脚本，这应该会改变网站的外观。

我的一项任务是删除标题为New Post的每张图片（<img src="..." title="New Post" alt="...">）

我有以下信息：

elements = document.getElementsByTagName('img');

alert(elements.length); // FIRST

for (i=0; i < elements.length; i++) {
    image = elements[i];

    if (image.title.search(/New\ Post/) > -1) {
        image.remove();
    }
}

alert(i); // SECOND

此snipplet删除图像，但仅限每秒。第一个提醒为我提供了号码19，但第二个提醒给出了10 ...

脚本应删除具有给定标题的每个图像标记。我做错了什么？

Answer 1

看起来您正在删除元素，同时循环浏览您要删除的列表。在您删除的内容超过剩余时间点时，i与elements.length相同，因此循环会在删除之前退出。

尝试按相反的顺序删除它们：

for (i=elements.length - 1; i >= 0; i--) {
    image = elements[i];

    if (image.title.search(/New\ Post/) > -1) {
        image.remove();
    }
}

这样，从列表末尾删除元素不会影响您在列表中的位置。

Answer 2

因为document.getElementsByTagName('img')返回实时列表，这意味着当您在返回列表中的元素上调用remove（）时，删除的项目也将从数组中删除。

document.getElementsByTagName

返回具有给定标记名称的元素的HTMLCollection。该搜索完整文档，包括根节点。 返回 HTMLCollection是实时的，这意味着它会自动更新与DOM树保持同步而不必打电话 document.getElementsByTagName（）再次。

试

var log = (function() {
  var $log = $('#log');
  return function(msg) {
    $('<p/>', {
      text: msg
    }).appendTo($log)
  }
})();


var elements = document.getElementsByTagName('img');

log('initial: ' + elements.length);

for (i = 0; i < elements.length;) {
  image = elements[i];

  if (image.title.search(/New\ Post/) > -1) {
    image.remove();
    log('remove: ' + elements.length);
  } else {
    i++
    log('not: ' + elements.length);
  }
}

log('end: ' + elements.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img title="New Post" src="//placehold.it/64/fff000" />
<img title="New1 Post" src="//placehold.it/64/000fff" />
<img title="New Post" src="//placehold.it/64/fff000" />
<img title="New1 Post" src="//placehold.it/64/000fff" />
<img title="New Post" src="//placehold.it/64/fff000" />
<img title="New1 Post" src="//placehold.it/64/000fff" />

<div id="log"></div>

Answer 3

如果您没有删除图像，则只增加循环计数器：

for (i=0; i < elements.length; ) {
    image = elements[i];

    if (image.title.search(/New\ Post/) > -1) image.remove();
    else i++;
}

javascript只删除每一个元素

3 个答案: