ie developer tools, finding an html element from console

Question

I'm in the console and find an interesting HTML element via my script. Or maybe I just enter

document.getElementById("foo")

in the console. What I get back is textual dump of some of the element's properties. For example:

[object HTMLDivElement] {
    align : "",
    noWrap : false,
    dataFld : "",
    dataFormatAs : "",
    dataSrc : "",
    currentStyle : [object MSCurrentStyleCSSProperties],
    runtimeStyle : [object MSStyleCSSProperties],
    accessKey : "",
    classList : tabbar,
    className : "tabbar"
    ...
}
Add to watch

From here, what I want to do is find that element in the HTML panel. Is this possible?

Answer 1

ID of an element should be unique, and hence, you should be able to find it out in the DOM-Explorer. DOM-Explorer also supports elements that are dynamically created using JavaScript (I've tested this on IE 11.0.7).

So, go to DOM-Explorer, and use the search box on the right hand side of the page to locate the element with the ID "foo".

Answer 2

Given that an ID is unique so there should only be one in your document, you will need to do a find:

• Give focus to the HTML tab
• Hit Ctrl-F and enter "foo"

I don't know of any automatic way to focus on an element in the HTML pane via the console.