HTML Code

<ins  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">

I have checked : https://www.w3schools.com/js/js_htmldom_elements.asp and tried but it not help.

I want to take this element data-ad-status="unfilled" from HTML using javascript. So, i can use it in if else statement.

Like

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

CodePudding user response：

we can use document.querySelector to select our element (if there is only one)

but in this case we need to use querySelectorAll for selecting all the ads elements in html (<ins>)

also now we can loop your logic on every element with that status, using forEach

with forEach you can get 3 other information,
- the element itself (which you can do your logic with, or console.log it)
- the index of the element
- the array of all the elements

---

with this order (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"  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"  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"  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"  style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1714167228247329" data-ad-slot="8611448539" data-adsbygoogle-status="done"></ins>

---

you can also generalize [data-ad-status] by selecting all the elements and then do a simple if, else (checking the result)

CodePudding user response：

/*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  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  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'] this one is electing particular one with data-ad-status="unfillded"

• document.querySelectorAll("[data-ad-status]"); this one is selecting all with the data-ad-status attribute.

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