1

With this code, I get into the class "v1Nh3 kIKUG _bz0w" , so basically first_pic.className equals "v1Nh3 kIKUG _bz0w". I get the same result by using the line which I have commented out. But now how can I use this to get the href link (I marked it blue in the picture below) and print it out with window.alert?

var x = document.getElementsByClassName("SCxLW  o64aR ")[0].children;
var x_in = x[0].children;
var x_in_in = x_in[3].children;
//window.alert(document.querySelector("main.SCxLW.o64aR article div div div div").className);
var first_pic = x_in_in[0].children[0].children[0].children[0].children[0];
window.alert(first_pic.href);

enter image description here

isherwood
  • 58,414
  • 16
  • 114
  • 157
kathelk
  • 237
  • 1
  • 6
  • try this `document.querySelector('article.ySN3v .kIUG a').href;` – Sarout Jan 25 '22 at 19:20
  • @Sarout Is there a way to do this slightly different? Because the names are not always same for me, – kathelk Jan 25 '22 at 19:22
  • well, you can do it without classes `document.querySelector('main div div article div div div div a').href` ... – Sarout Jan 25 '22 at 19:24
  • If the class names change can you guarantee the structure of the document won't change too? – Andy Jan 25 '22 at 19:25
  • this is generated code from a framework (like react, vue, ...) The elements are not rendered on page load. Best solution is the modify the component which will render this html – Sysix Jan 25 '22 at 19:27
  • 1
    @Sarout Works thanks! If someone has a working solution that is not using qerySelector but something else, please feel free to share it because I'm interested to see it! :) – kathelk Jan 25 '22 at 19:27
  • no, I can't guarantee but when you say the class names change I get it **only** class names changes... anyway if I find another way I'll write it here directly – Sarout Jan 25 '22 at 19:29
  • @kathelk does [this](https://stackoverflow.com/questions/21975881/how-to-select-element-that-does-not-have-specific-class) helps? – Sarout Jan 25 '22 at 19:32
  • You're asking the wrong question. `className` refers to a single class, not the entire value of the class attribute. – isherwood Jan 25 '22 at 19:35

1 Answers1

3

Since you cannot rely on the changing classes, you should focus on the tag names.

I would try this:

let link = document.querySelector("main article:nth-child(1) a")
console.log(link.href)

EDIT

Another thing to try would be to focus on something unique and "stable"... like the tabindex attribute:

let link = document.querySelector("[tabindex='0']")
console.log(link.href)

Another EDIT (answer to OP comment under his question)

If someone has a working solution that is not using querySelector but something else...

If the link is the very first of the article, this would work:

let article = document.getElementsByTagName("article")[0]
let link = article.getElementsByTagName("a")[0]
console.log(link.href)
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64