Dynamically manipulating the DOM

demo code nodes that are not html elements

1. Look at the console to see how the DOM sees the nodes
2. Decide what the following will show then try it in the console.

Try some in the console:

     document.firstChild
     document.firstElementChild

This is what you are looking at (you can show source to see it )

    document.querySelector('#demo').firstChild.firstChild
    document.querySelector('#demo').firstChild.firstChild.textContent
    document.querySelector('#demo').firstChild.firstElementChild

the difference between demo and demo2 is that there is text before the first <p> what do you think will change?

    document.querySelector('#demo2').firstChild.firstChild
    document.querySelector('#demo2').firstChild.firstElementChild

Try a few more

document.querySelector('html').children   // child elements only
document.querySelector('html').childNodes   // child elements & others
document.querySelector(‘html’).firstChild.nodeName // name of the tag
document.querySelector(‘div’).firstChild.nodeType // element, text, comment

Grover
Beeker

Muppets!

Grover
Beeker