javascript 在 Chrome 控制台中选择 DOM 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16510234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Selecting DOM elements in Chrome console
提问by plalx
I'm a bit puzzled by the following: Let's say I've got a paragraph element with the id of para. Using Chromes console, if I say
我对以下内容感到有些困惑：假设我有一个 id 为para. 使用 Chromes 控制台，如果我说
document.getElementById("para")
I'm returned with the HTML snippet <p id="para">....</p>, whereas if I use for instance the Javascript library D3's selection method and say
我返回的是 HTML 片段<p id="para">....</p>，而如果我使用例如 Javascript 库 D3 的选择方法并说
d3.select("#para")
I'm returned with the DOM node and can access all the properties and methods of the paragraph element.
我返回了 DOM 节点，可以访问段落元素的所有属性和方法。
Why this difference?
为什么会有这种差异？
回答by plalx
By default, when logging a DOM node in Chrome, it displays as markup. To log the DOM node as a normal object use console.dir. The reason d3.select("#para")shows as a normal object is that this method probably doesn't return a DOM node, but an object that wraps over the DOM node.
默认情况下，在 Chrome 中记录 DOM 节点时，它显示为标记。要将 DOM 节点记录为普通对象，请使用console.dir. d3.select("#para")显示为普通对象的原因是该方法可能返回的不是 DOM 节点，而是一个包裹在 DOM 节点上的对象。
console.dir(document.getElementById("para"));
回答by melfore
The best method in my opinion is this:
我认为最好的方法是这样的：
- open the chrome console
- type:
$x("//input[@id='para']")
- 打开 Chrome 控制台
- 类型：
$x("//input[@id='para']")
With a click on the found element you can also see it selected
单击找到的元素，您还可以看到它被选中
