在Chrome控制台选择DOM元素

Selecting DOM elements in Chrome console

本文关键字：DOM 元素 选择 控制台 Chrome      更新时间：2023-09-26

我对以下内容有点困惑:假设我有一个id为para的段落元素。使用chrome控制台，如果我输入

document.getElementById("para")

返回的是HTML代码片段<p id="para">....</p>，而如果我使用例如Javascript库D3的选择方法并说

d3.select("#para")

返回的是DOM节点，可以访问段落元素的所有属性和方法。

为什么会有这种差异?

默认情况下，在Chrome中记录DOM节点时，它显示为标记。使用console.dir命令将DOM节点日志为正常对象。d3.select("#para")显示为正常对象的原因是该方法可能不返回DOM节点，而是封装在DOM节点上的对象。

console.dir(document.getElementById("para"));

我认为最好的方法是:

  • 打开chrome控制台
  • 类型:$x("//input[@id='para']")

点击找到的元素，你也可以看到它被选中

相关文章：