3

Hi I am a beginner to javascript so I am having trouble. I am trying to get an element of a page using Console. Here is the code:

var ELEMENT = document.querySelector('div.flexCenter-3_1bcw.flex-1O1GKY.justifyCenter-3D2jYp.alignCenter-1dQNNs')

And I want to get a specific thing from the element:

ELEMENT.__reactProps$81cjqqgfk4j

Simple? Not quite. The .__reactProps$ thing changes every time I visit the page. Sometimes it'll be __reactProps$25jwbxmtle or sometimes it'll be __reactProps$94maqnwnty (you get the point). What can I do here?

When I do ELEMENT.attributes, this comes up:

NamedNodeMap {0: class, class: class, length: 1}
    0: class
        ownerDocument: document
            .__reactEvents$81cjqqgfk4j

The .__reactEvents item always ends with the same thing as the .__reactProps item. Is there a way I can get the name of this item from the attributes (because that will be enough for me)

user14736072
  • 53
  • 5
  • Why are you trying to get this internal data? You should likely not be using that at all because it is not deterministically usable – Dominik Jul 21 '21 at 21:52
  • @Dominik I am trying to automate something on a website. It's completely harmless though – user14736072 Jul 21 '21 at 22:03
  • 1
    Don't rely on that attribute. React uses that internally and like I said for your purposes it's nondeterministic. – Dominik Jul 21 '21 at 22:06
  • Use react to keep track of components. Using vanilla JS like that will break in all sorts of ways – Dominik Jul 21 '21 at 22:06
  • I haven't been able to find alternatives. Could you please help me regardless? – user14736072 Jul 21 '21 at 22:09
  • 1
    I don't know what you're trying to do. You just described a thing you're doing that isn't feasible. Describe what it is that you're actually doing and we can help – Dominik Jul 21 '21 at 22:15
  • "*Is there a way I can get the name of this item from the attributes*" - no, [it's not an attribute but a DOM property](https://stackoverflow.com/questions/22151560/what-is-happening-behind-setattribute-vs-attribute). Sure, there are ways to enumerate properties as well, but you shouldn't use this approach anyway. React developers made it deliberately hard to access these *internals* by randomising the property name, because you really shouldn't use it. Whatever you're trying to do, this is the wrong way, and you're nudged to use the proper way because it'll be easier. – Bergi Jul 21 '21 at 22:36
  • Thank you all for the pep talk but that's not what I asked for. I asked somewhere where people are more willing to be helpful and solved the issue. Damn... – user14736072 Jul 21 '21 at 22:45
  • Does the element have an attribute with that name? – vanowm Jul 21 '21 at 23:48
  • I don't think it was an attribute @user1476072 – user14736072 Jul 22 '21 at 04:10

1 Answers1

6

You can use Object.keys(ELEMENT) to get all the keys for that element and than search for the needed one. This will extract prefix, the random ID:

var ELEMENT = document.querySelector('div.flexCenter-3_1bcw.flex-1O1GKY.justifyCenter-3D2jYp.alignCenter-1dQNNs');

let id = null;
for(let i = 0, keys = Object.keys(ELEMENT); i < keys.length; i++)
{
  if ((id = keys[i].match(/^__react[^$]*(\$.+)$/)))
  {
    id = id[1];
    break;
  }
}

console.log(id);
vanowm
  • 9,466
  • 2
  • 21
  • 37