código 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">Revisé: https://www.w3schools.com/js/js_htmldom_elements.asp y lo intenté, pero no ayudó.
Quiero tomar este elemento data-ad-status="unfilled" de HTML usando javascript. Entonces, puedo usarlo en la declaración if else.
Me gusta
if (data-ad-status="unfilled") { some fuctions; } /*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'] este está eligiendo uno en particular con data-ad-status="unfillded"
document.querySelectorAll("[data-ad-status]"); éste está seleccionando todo con el atributo 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>podemos usar document.querySelector para seleccionar nuestro elemento (si solo hay uno)
pero en este caso necesitamos usar querySelectorAll para seleccionar todos los elementos de anuncios en html ( <ins> )
también ahora podemos hacer un bucle de su lógica en cada elemento con ese estado, usando forEach
con
forEachpuede obtener otras 3 informaciones,
- el elemento en sí (con el que puede hacer su lógica, o consola.regístrelo)
- el índice del elemento
- la matriz de todos los elementos
con este orden(element, indexOfElement, ArrayOfAllElements)
este es un ejemplo:
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>también puede generalizar
[data-ad-status]seleccionando todos los elementos y luego hacer un simple if, else (comprobando el resultado)