document.querySelector 跳过不存在的元素

Question

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

这个元素在某些页面上，但在其他页面上不存在，所以我如何 "skip it" 在它不存在的页面上

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>');
});

所以上面的工作现在感谢下面的答案，非常感谢：下一个问题是它现在给出错误，因为我的预投标文件试图将 "slots" 放置在 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 吗，因为当 divs 在页面上生成时取决于那里有哪些元素，有一个 div class="ad-reporter-ahytrfg35423"> ，所以我可以用它来确定要触发 "slots" 中的哪一个？

Answer 1

您需要确保 querySelector 在尝试访问之前调用 returns 某些内容。

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

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

例如：

//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>

document.querySelector 跳过不存在的元素

document.querySelector skip element that's not there

javascript

prebid.js