0

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

Eddie
  • 26,593
  • 6
  • 36
  • 58
Sam Millendo
  • 13
  • 1
  • No. But in the Chrome inspector, there are a lot of ways to search for elements, and expand them, but not like this. It's also unclear **exactly** what are you trying to do, so please clarify the question, if you can. – FZs Aug 21 '19 at 04:20
  • I'm familiarizing myself with the dom. I have the JS console open and am exploring by typing `document.body` and when I press enter I see the body element and all of it's contents within the console. If I want to get more granular and drill down into the div element with id 'mydiv' that is a direct child of body, is there no way to do that? – Sam Millendo Aug 21 '19 at 04:22
  • Clearly, you are trying to do something with this result, but yet not discussing the main issue here. Typical like a [XY Problem](http://xyproblem.info/). Please include the specific scenario which you are trying this. – Nidhin Joseph Aug 21 '19 at 04:22
  • @Sam You can do it, but as I've mentioned, not like that. First, `#` is invalid identifier name, so using it in dot notation is syntactically invalid in JS. Second, `document`'s `body` property is special (you can get the ``, but you can't go deeper this way). You can use `.children`, to see a list of children of any DOM node, or `querySelector` to search for a selector, like `#mydiv`. – FZs Aug 21 '19 at 04:30

3 Answers3

1

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.

Karthik
  • 1,332
  • 1
  • 12
  • 21
0

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>
Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345
0

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

kiranvj
  • 32,342
  • 7
  • 71
  • 76
  • `$()` is not a JavaScript built-in function. What JavaScript library are you using? – Elis Byberi Jun 25 '22 at 00:07
  • @ElisByberi These are native functions of Google Chrome, Safari and Firefox browsers. See [this](https://stackoverflow.com/questions/13933157/what-is-the-difference-between-and) – kiranvj Jun 27 '22 at 03:59
  • 1
    Warning: These functions only work when you call them from the Chrome DevTools Console. They won't work if you try to call them in your scripts. – Elis Byberi Jun 27 '22 at 21:28