Quiero llegar al área que he marcado en azul e imprimir el nombre de esta clase ( Nnq7C weEfm ). Comencé desde la "clase principal" y llegué a la clase llamada ySN3v así:
var x = document.getElementsByClassName("SCxLW o64aR ")[0].children; var x_in = x[0].children; var x_in_in = x_in[3].children; window.alert(x_in_in[0].className); Lo que me da el nombre de clase ySN3v como salida. No veo forma de llegar al área azul y alertar el nombre de esta clase ("Nnq7C weEfm") de esta manera, ¿cómo se puede hacer esto?
Si mi pregunta no es clara por favor hágamelo saber! :)
Le daría una oportunidad a document.querySelector, debería hacer la vida considerablemente más fácil.
const yourDiv = document.querySelector("main.SCxLW.o64aR article div div div"); console.log(yourDiv.className); <main class="SCxLW o64aR "> <div> <div> <article> <div> <div> <div class="find this"> </div> </div> </div> </article> </div> </div> </main>Si desea obtener el nombre de clase de la selección azul y todos sus hermanos, puede usar document.querySelectorAll :
// Get target and all it's siblings const targetElements = document.querySelectorAll('main article > div > *'); // The a list of unique class names if (targetElements.length) { const classNames = [...new Set( [...targetElements].map(({ className }) => className) )]; console.log(classNames); } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Class Name Example</title> </head> <body> <main> <div> <header></header> <div></div> <div></div> <div> <article> <div> <div class="target-class"></div> <div class="target-class"></div> <div class="target-class"></div> <div class="another-target-class"></div> </div> </article> </div> </div> </main> </body> </html>