如何使用JavaScript获取DIV子元素

Question

如何使用JavaScript获取DIV子元素

3

HTML 代码

<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled">

我已经查看了：https://www.w3schools.com/js/js_htmldom_elements.asp，并尝试过了，但没有帮助。

我想使用Javascript从HTML中获取这个元素data-ad-status="unfilled"。这样，我可以在if else语句中使用它。

例如：

if (data-ad-status="unfilled") {
some fuctions; 
}

- Sunil Kumar

1

使用 document.querySelector();。https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector - Laaouatni Anas

如果您有多个广告，需要使用循环和querySelectorAll。 - Lawrence Cherone

请注意，还有 Element.querySelector() 可以限制搜索到 DOM 子树，可能允许更简洁的选择器并提高性能。 - collapsar

if ($(".adsbygoogle").data("ad-status") === "unfilled") { ... - freedomn-m

@freedomn-m不起作用。我尝试了你的代码。 - Sunil Kumar

3个回答

3

如果只有一个元素，我们可以使用document.querySelector来选择我们的元素。

但是在这种情况下，我们需要使用querySelectorAll来选择html中所有的广告元素（<ins>）。

此外，现在我们可以使用forEach循环处理每个具有该状态的元素。

使用forEach，您还可以获取3个其他信息，
- 元素本身（您可以对其执行逻辑或console.log）
- 元素的索引
- 所有元素的数组
顺序为：(element, indexOfElement, ArrayOfAllElements)

this is a example:

let unfilledAds = document.querySelectorAll(`.adsbygoogle[data-ad-status="unfilled"]`);
let successAds = document.querySelectorAll(`.adsbygoogle[data-ad-status="success"]`);;

/* not success */
unfilledAds.forEach((adElement) => {
    /* your logic */
    console.log(`❌ this Ad is not filled`, adElement);
});

/* success */
successAds.forEach((adElement) => {
    console.log(`✅ this ad is visible to the user`, adElement);
});

<!-- fail -->
    <ins data-ad-status="unfilled" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>
    <ins data-ad-status="unfilled" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>

    <!-- success -->
    <ins data-ad-status="success" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>
    <ins data-ad-status="success" class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>

您也可以通过选择所有元素并进行简单的 if、else 操作（检查结果）来概括 [data-ad-status]。

您还可以使用此自定义谷歌广告事件：https://developers.google.com/publisher-tag/samples/ad-event-listeners，而无需重新发明轮子，因此如果广告在一段时间后成功运行，则会起作用。

只需查看文档即可。
以下是示例：https://googleads.github.io/google-publisher-tag-samples/advanced/ad-event-listeners/demo.html

- Laaouatni Anas

我尝试了您的代码，但是没有起作用。这是我的链接：https://thebibleinformation.com/a-ad.php。也许需要1-2秒钟才能更新“未填充”或“已填充”？ - Sunil Kumar

@SunilKumar 好的，你可以使用Google提供的广告事件监听器 https://developers.google.com/publisher-tag/samples/ad-event-listeners 它们几乎有你所需的一切！这里有一个演示示例 https://googleads.github.io/google-publisher-tag-samples/advanced/ad-event-listeners/demo.html - Laaouatni Anas

3

您告诉我数据是以异步方式传输的，因此我在这里添加了setTimeOut()函数等待约2秒钟。
我无法访问数据的传输方式，因此这个2s的时间是硬编码的。请更改它的值并尝试运行它，我相信它会解决您的问题。
但请使用async-await函数，并使selectAd()等待数据加载完成后再进行操作。

const selecteAd = () => {
  const myDiv = document.querySelector("[data-ad-status='unfilled']");
  const selectAllWithAttributeAdStatus = document.querySelectorAll("[data-ad-status]");
  /*This(selectAllWithAttributeAdStatus) one is just for showing how to select elements with data-ad-status attribute */
  //let adStatus = myDiv.getAttribute("data-ad-status");
  selectAllWithAttributeAdStatus.forEach(ad => {
    if ((ad.getAttribute("data-ad-status")) === "unfilled") {
      ad.style.background = "red";
      ad.style.height = "100px";
      ad.style.width = "100px";
      ad.style.display = "inline-block";
    } else {
      ad.style.background = "green";
      ad.style.height = "100px";
      ad.style.width = "100px";
      ad.style.display = "inline-block";
    };
  })
}
const myTimeout = setTimeout(selecteAd, 2000);

<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled"></div>
<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="somethingelse"></div>

- Nikkkshit

这段代码运行良好，但是在2秒后，它会删除整个网页HTML并使网页变空白。链接：https://thebibleinformation.com/a-ad.php - Sunil Kumar

嘿，我已经运行了，它正常工作，现在你只需要使用适当的asyn-await函数来实现它。 - Nexo

检查页面的“查看源代码”。它有很多内容。您的代码运行良好，但是请勿删除整个网站内容并在“检查元素”中使HTML为空白。 - Sunil Kumar

脚本使用if else语句内定义的<div style="background:red; height:10px; width:10px"></div>来替换整个HTML。 - Sunil Kumar

你想做什么？你只是想用红色背景替换那些未填充的区域吗？ - Nexo

显示剩余6条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nikkkshit · Accepted Answer

/*SELECTING BY CLASSANEMES*/
const withClassName = document.querySelectorAll(".adsbygoogle");
withClassName.forEach(ad => {
  if ((ad.getAttribute("data-ad-status")) === "unfilled") {
    console.log("unfilled ad element")
  } else {
    console.log("other ad element")
  };
})

<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled"></div>
<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="somethingelse"></div>

-document.querySelector("[data-ad-status='unfilled'] 这个选择器选定了具有 data-ad-status="unfillded" 属性的特定元素。

document.querySelectorAll("[data-ad-status]"); 这个选择器选定了所有具有 data-ad-status 属性的元素。

const myDiv = document.querySelector("[data-ad-status='unfilled']");

const selectAllWithAttributeAdStatus = document.querySelectorAll("[data-ad-status]");
/*This(selectAllWithAttributeAdStatus) one is just for showing how to select elements with data-ad-status attribute */
//let adStatus = myDiv.getAttribute("data-ad-status");
selectAllWithAttributeAdStatus.forEach(ad => {
  if ((ad.getAttribute("data-ad-status")) === "unfilled") {
    console.log("unfilled ad element")
  } else {
    console.log("other ad element")
  };
})

<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="unfilled"></div>
<div class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done" data-ad-status="somethingelse"></div>