Why can't I select nodes child by document.getElementById("node's_id").child?

Question

Suppose I have a simple html code sonsisiting a parent div and child span element as:

<div id="my_div"><span> Nothin' but the G thang </span></div>

It is said that every element in html DOM is an object. So we can select child objects as parent.child. E.g. window.document, window.document.body, window.document.head etc then my question is why does document.getElementById("my_div").span return undefined?

Similarly window.document.body works but I can't go one level down after that with window.document.body.div.

Possible duplicate: [best way to get child nodes](http://stackoverflow.com/questions/10381296/best-way-to-get-child-nodes). — Yogi, Apr 25 '16 at 10:36

score 5 · Accepted Answer · edited Jun 30 '17 at 14:06

5

With .(dot-notation), you are trying to access the span property of the object(Node/Element) returned by document.getElementById. As there is no span property associated with returned object, document.getElementById("my_div").span will be undefined

Use document.querySelector, Returns the first element within the document (using depth-first pre-order traversal of the document's nodes|by first element in document markup and iterating through sequential nodes by order of amount of child nodes) that matches the specified group of selectors

console.log(document.querySelector('#my_div span'));

<div id="my_div"><span>  Nothin' but the G thang  </span>
</div>

Or Node.chilren, read-only property that returns a live HTMLCollection of the child elements of Node.

console.log(document.getElementById('my_div').children[0]);

<div id="my_div"><span>  Nothin' but the G thang  </span>
</div>

edited Jun 30 '17 at 14:06

Jed Fox

2,979
5
28
38

answered Apr 25 '16 at 10:27

Rayon

36,219
4
49
76

1

And without extra JS stuff, getElementsByTagName would work once you have the parent element – zerohero Apr 25 '16 at 10:29
@zerohero, There are `n` number of ways! And there is not extra stuff required for `querySelector` – Rayon Apr 25 '16 at 10:32
Are `head` and `body` tags properties or objects in the DOM? – user31782 Apr 25 '16 at 10:39
Yes, `head` and `body` are properties of `document` object! – Rayon Apr 25 '16 at 10:43
Could you give a reference because w3school claim otherwise http://www.w3schools.com/jsref/dom_obj_head.asp – user31782 Apr 25 '16 at 10:50
`typeof document.head` and `typeof document.body` return `"object"`. – user31782 Apr 25 '16 at 11:01
As I have mentioned in the answer _"you are trying to access the span property of the object"_... It is of type object....You could say `documentObject` – Rayon Apr 25 '16 at 11:02
Perhaps I got you. `head` and `body` objects are properties of `document object`. – user31782 Apr 25 '16 at 11:04
Glad to help you mate ! – Rayon Apr 25 '16 at 11:05

score 2 · Answer 2 · answered Apr 25 '16 at 10:28

2

You can select span like this

var span = document.getElementById("my_div").querySelector('span');
console.log(span);

<div id="my_div"><span>  Nothin' but the G thang  </span>
</div>

Or in your case you can also use firstChild

var span = document.getElementById("my_div").firstChild;
console.log(span);

<div id="my_div"><span>Nothin' but the G thang  </span></div>

answered Apr 25 '16 at 10:28

Nenad Vracar

118,580
15
151
176

I've edited the question. I am not asking how to select the child. I am asking why can't I select it as `document.getElementById("my_div").span`? – user31782 Apr 25 '16 at 10:35
Yes it returns object but there is no span property inside https://jsfiddle.net/Lg0wyt9u/609/ here is a list of all properties https://jsfiddle.net/Lg0wyt9u/610/ – Nenad Vracar Apr 25 '16 at 10:43

Why can't I select nodes child by document.getElementById("node's_id").child?

2 Answers2