How to get DIV sub-elements using javascript

Question

HTML Code

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

user_11850259 · 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")
  };
})

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

user_17716837 · Answer

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

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

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

you can also use this custom google event for the ads https://developers.google.com/publisher-tag/samples/ad-event-listeners without reinventing the wheels
so it will work if the ads will be successful after some time.

just see the docs.
here a example: https://googleads.github.io/google-publisher-tag-samples/advanced/ad-event-listeners/demo.html

user_11850259 · Answer

As you told me that data is coming from async way I have added setTimeOut() function to wait for around 2 seconds here.
I do not have access to how data is coming so this time for 2s is hard coded. change it's value and try to run it. and I am sure it will solve your problem.
But use asyn-await function and make selectAd() wait till you data get loaded.

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

How to get DIV sub-elements using javascript

3 Answers