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

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

(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, },
},

我可以添加一个查询选择器吗，因为当页面上的 div 取决于其中的元素时，有一个 div 类 =“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>