如何通过Chrome DevTools Protocol用JS定位特定DOM对象获取RemoteObjectId

核心问题说明 #

你之前用window.document.body.div.p只能拿到第一个<p>，是因为这种点语法是浏览器提供的非标准快捷方式——它等价于调用querySelector()，只会返回匹配选择器的第一个元素，无法指定索引或后续匹配项。要定位到第一个<div>下的第二个<p>，需要用标准的DOM选择方法。

可行的解决方案 #

以下几种写法都可以在Runtime.Evaluate中执行，直接获取目标节点的RemoteObjectId：

1. 使用CSS伪类精准定位

用nth-of-type(2)直接选中父元素下的第二个<p>，语法简洁且精准：

document.body.querySelector('div:nth-of-type(1) > p:nth-of-type(2)')

• 解释：div:nth-of-type(1)匹配body下的第一个<div>，> p:nth-of-type(2)匹配该div下的第二个<p>。

2. 通过querySelectorAll取索引

如果更习惯用索引定位，可先获取所有匹配的<p>再取对应下标（注意DOM集合是0基索引，第二个元素下标为1）：

document.body.querySelectorAll('div > p')[1]

• 若需要更严格限定是第一个div，可调整为：

document.body.querySelectorAll('div:nth-of-type(1) > p')[1]

3. 原生DOM遍历方法

如果结构固定，也可以用原生DOM属性遍历：

// 先拿到body下的第一个div（假设body的第一个子元素就是目标div）
const targetDiv = document.body.children[0];
// 再取该div下的第二个p元素
targetDiv.getElementsByTagName('p')[1]

• 这种写法适合DOM结构完全确定的场景，避免选择器冲突。

后续步骤 #

执行上述任意代码后，从Runtime.Evaluate的返回结果中提取result.remoteObject.id，即可用该ID调用DOM.getEventListeners或Runtime.getEventListeners（取决于CDP版本）获取目标节点的所有事件监听器。

内容的提问来源于stack exchange，提问作者Jin