为什么此Javascript代码有效，但该代码无效？

Question

我正在从事我的第一个真正的Web开发项目，因此决定建立一个像bot这样的Google chrome扩展程序instagram。我在网上找到了一个视频，为我提供了一个起点，但遇到了问题。

这是他的代码：

    var counter = 0;
setInterval(function() {
  var heart = document.querySelector('.glyphsSpriteHeart__outline__24__grey_9.u-__7');
  var arrow = document.querySelector('a.coreSpriteRightPaginationArrow');
  if (heart) {
    heart.click();
    counter++;
    console.log(`You have liked ${counter} photographs`)
  }
  arrow.click();
}, 3000);

这是我的代码：

let heart = document.querySelector('.glyphsSpriteHeart__outline__24__grey_9.u-__7');
let arrow = document.querySelector('a.coreSpriteRightPaginationArrow');
let counter = 0;


let likeAndSkip = function() {
  document.querySelector('.glyphsSpriteHeart__outline__24__grey_9.u-__7');
  console.log(heart);

  if (heart) {
    document.querySelector('.glyphsSpriteHeart__outline__24__grey_9.u-__7').click();
    counter++;
    console.log(`You have liked ${counter} photographs`)
  }

  arrow.click();

}

setInterval(likeAndSkip, 3000);

我很困惑为什么他的代码可以按预期工作，但是当我在浏览器中运行代码时（例如：https://www.instagram.com/p/B6uDw1kg_JH/），程序无法获取该document.querySelector（'。glyphsSpriteHeart__outline__24__grey_9.u- __7'）；现在为空？

希望这是足够的信息。我想弄清楚这一点，因为我知道它将来会绊倒我的。

谢谢大家。