CODEWITHSUNDEEP
javascripthtml
Sam Millendo
Sam Millendo

Reputation: 13

How to traverse dom dot notation with a div element with an id

I would like to traverse the dom with just dot notation

e.g. document.body

Under body I have a div with id mydiv. I know about querySelector() or getElementById() but that's not my question. I simply want to open the JS console and using dot notation drill down into elements using dot notation.

document.body.#mydiv # doesnt work

Would like the console to return #mydiv with the ability to expand and look at it in Chrome

Upvotes: 0

Views: 1353

Answers (3)

Karthik
Karthik

Reputation: 1452

You will need to use firstElementChild, lastElementChild or children to get to the next child. .children will give you an array of all the children of a node. You can loop through it and find the div with specific id. Here is an example

document.querySelector('body').children[2].firstElementChild.children[0]

This is get the 2nd child of the body's first child's first child.

getElementById is more easier and cleaner in your case.

Upvotes: 1

kiranvj
kiranvj

Reputation: 34147

For an element with id you can always use below in console

$('#myDiv');

or

$$('#myDiv')

This will show that element in console, from there you can see all details of that element.

This should also work with any selector

eg: Try below in this page

$$('.user-details')

You will see something like this

enter image description here

Upvotes: 0

Kamil Kiełczewski
Kamil Kiełczewski

Reputation: 92617

To traverse tree using dot notation you need to use children nodes

console.log( myDiv.children[0].innerText );
<div id="myDiv">
  <div>Hello</div>
</div>

Upvotes: 0

Related Questions