Trouble finding an item through JavaScript Console

user_14736072 0
Viewed 453

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)

console javascript
1 Answers

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