通过 JavaScript 控制台查找项目时遇到问题答案

【问题标题】：Trouble finding an item through JavaScript Console通过 JavaScript 控制台查找项目时遇到问题
【发布时间】：2021-07-21 21:48:12
【问题描述】：

您好，我是 javascript 的初学者，所以遇到了麻烦。我正在尝试使用控制台获取页面元素。代码如下：

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

我想从元素中得到一个特定的东西：

ELEMENT.__reactProps$81cjqqgfk4j

简单吗？不完全的。每次访问该页面时， .__reactProps$ 都会发生变化。有时会是 __reactProps$25jwbxmtle 或者有时会是 __reactProps$94maqnwnty（你明白了）。我可以在这里做什么？

当我执行 ELEMENT.attributes 时，会出现以下情况：

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

.__reactEvents 项总是以与 .__reactProps 项相同的内容结尾。有没有办法从属性中获取这个项目的名称（因为这对我来说已经足够了）

【问题讨论】：

您为什么要获取这些内部数据？您可能根本不应该使用它，因为它不是确定性可用的
@Dominik 我正在尝试自动化网站上的某些内容。虽然它是完全无害的
不要依赖该属性。 React 在内部使用它，就像我为您的目的所说的那样，它是不确定的。
使用 react 来跟踪组件。像这样使用 vanilla JS 会以各种方式破坏
我不知道你想做什么。您刚刚描述了您正在做的一件不可行的事情。描述您实际在做什么，我们可以提供帮助

标签： javascript console

【解决方案1】：

您可以使用Object.keys(ELEMENT) 获取该元素的所有键，然后搜索所需的键。这将提取前缀，随机 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);

【讨论】：

谢谢。我用类似的方法想通了，但你仍然是帮助我的山羊