在 Chrome 控制台中选择 DOM 元素

Question

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

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

d3.select("#para")

I'm returned with the DOM node and can access all the properties and methods of the paragraph element.

Why this difference?

Answer 1

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.

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

Answer 2

The best method in my opinion is this:

• open the chrome console
• type: $x("//input[@id='para']")

With a click on the found element you can also see it selected