document.querySelector 跳过不存在的元素

Question

我正在使用它在页面中添加广告，我在页面上大约有 5 个广告，每个广告都放入不同的元素中。我遇到的问题是在某些页面上所有元素都不存在，所以如果它们不存在，我想“跳过”它们，此时它找到第一个元素，添加广告，如果下一个页面上没有元素，它会出错，然后不会在以下元素中显示广告。希望这是有道理的？

此元素在某些页面上，但不在其他页面上，所以我如何在它不存在的页面上“跳过它”

document.querySelector("#spacer1").insertAdjacentHTML('afterbegin',........

完整代码使用：

//shows the slots on the page
window.addEventListener("DOMContentLoaded", function() {
  document.querySelector(".p-body-inner").insertAdjacentHTML('afterbegin', '<div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid13Slot"></div></div><br>');
  document.querySelector("#spacer1").insertAdjacentHTML('afterbegin', '<div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid9Slot"></div></div><br><br><br>');
  document.querySelector(".block.block--category.block--category99").insertAdjacentHTML('beforeend', '<br><div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid8Slot"></div></div>');
  document.querySelector("#spacer2").insertAdjacentHTML('beforebegin', '<br><div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid5Slot"></div></div><br>');
  document.querySelector(".p-breadcrumbs.p-breadcrumbs--bottom").insertAdjacentHTML('afterend', '<br><div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid4Slot"></div></div><br>');
  document.querySelector("#adfooter").insertAdjacentHTML('afterbegin', '<br><div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid6Slot"></div></div><br>');
});

由于以下答案，上述工作现在有效，非常感谢： 下一个问题是它现在给出错误，因为我的 prebid 文件正试图在页面上放置“插槽”，由于有用的答案，div 插槽已被排除/跳过，所以我认为我需要一些逻辑来停止插槽当该插槽 div 已被排除时发送到页面？ 这是从预投标文件发送槽的代码：

(window.googletag, window.pbjs, {
definitons: {
inreedvid13Slot: { adUnitPath: "/slotnumber/slotname", size: [[970, 90],[970, 250],[728, 90],[468, 60],[320, 50],[320, 100]], sizeMapping: "mappingleaderslot", timeout: site_config.refresh_rate, },
inreedvid9Slot: { adUnitPath: "/slotnumber/slotname", size: [[300, 600],[300, 250],[250, 250],[160, 600],[120, 600]], sizeMapping: "mappingmenuslot", timeout: site_config.refresh_rate, },
inreedvid5Slot: { adUnitPath: "/slotnumber/slotname", size: [[300, 600],[300, 250],[250, 250],[160, 600],[120, 600]], sizeMapping: "mappingmenuslot", timeout: site_config.refresh_rate, },
inreedvid8Slot: { adUnitPath: "/slotnumber/slotname", size: [[550, 310],[728, 90],[300, 250],[250, 250],[468, 60],[320, 50],[336, 280],[580, 400],[320, 100]], sizeMapping: "mappinginreedvidslot", timeout: site_config.refresh_rate, },
inreedvid4Slot: { adUnitPath: "/slotnumber/slotname", size: [[550, 310],[728, 90],[300, 250],[250, 250],[468, 60],[320, 50],[336, 280],[580, 400],[320, 100]], sizeMapping: "mappinginreedvidslot", timeout: site_config.refresh_rate, },
inreedvid7Slot: { adUnitPath: "/slotnumber/slotname", size: [[550, 310],[728, 90],[300, 250],[250, 250],[468, 60],[320, 50],[336, 280],[580, 400],[320, 100]], sizeMapping: "mappinginreedvidslot", timeout: site_config.refresh_rate, },
inreedvid10Slot: { adUnitPath: "/slotnumber/slotname", size: [[550, 310],[970, 250],[970, 90],[728, 90],[300, 250],[250, 250],[468, 60],[320, 50],[336, 280],[580, 400],[320, 100]], sizeMapping: "mappinginreedvidslot", timeout: site_config.refresh_rate, },
inreedvid6Slot: { adUnitPath: "/slotnumber/slotname", size: [[970, 90],[728, 90],[468, 60],[320, 50],[320, 100]], sizeMapping: "mappingfooterslot", timeout: site_config.refresh_rate, },
},

我可以为此添加一个 querySelector，因为当 div 在页面上生成时，取决于那里的元素，有一个 div class="ad-reporter-ahytrfg35423"> ，所以我可以用它来确定要触发哪个“插槽”？

Answer 1

在尝试访问之前，您需要确保 querySelector 调用返回一些内容。

为此，您需要添加一个条件。

您还可以使用数组来帮助使这个过程在代码方面更加优雅。

例如：

//shows the slots on the page
window.addEventListener("DOMContentLoaded", function() {
  const ads = [
    {
      "selector": ".p-body-inner",
      "location": "afterbegin",
      "html": '<div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid13Slot"></div></div><br>',
    },
    // This selector doesn't exist in this snippet and will be skipped by the condition below without crashing...
    {
      "selector": "#spacer1",
      "location": "afterbegin",
      "html": '<div class="ad-reporter-ahytrfg35423"><div id="advertisement" style="border: 0pt none; margin: auto; text-align: center; color: #999; text-transform: uppercase; font-family: sans-serif; font-size: 9px; font-weight: 400; letter-spacing: .2em; line-height: 1; margin-top: 0px; position: relative; top: -4px;">Advertisement</div><div id="inreedvid9Slot"></div></div><br><br><br>',
    },
    // Add your other ads here using similar structure above...
  ];
  ads.forEach(ad => {
    adContainer = document.querySelector(ad.selector);
    if (adContainer) {
      adContainer.insertAdjacentHTML(ad.location, ad.html);
    }
  });
});

<div class="p-body-inner"></div>