DOM querySelector() usage

Making this to figure out and document how various querySelector queries work

by Matt Rummler

HTML

<section id='s1' class='section1'>
    <div id='d0' class='buttonBar'>
    <button id='focusdv1'>Go to the first Div</button>
    <button id='focusdv1'>Go to the first Div</button>
    <button id='focusdv1'>Go to the first Div</button>
    </div>
    <div id='d1' class='div1'>
        <br>
        <p>Some text in the div named</p>
        d1 but it's class is div1<br>
        Also
        <br> trying to make this long
            <br>
Failed to make this <br>
Long enough<br>
so<br>
I<br>
will<br>
make this<br>
longer than<br>
it was<br>
...<br>
...<br>
...<br>
...<br>
    </div>
    <div id='d2' class='div2'>
        <p>Some text in the div named</p>
        d2 but it's class is div2<br>
        Also
        <br> trying to make this long
...<br>
...<br>
...<br>
...<br>
            <div id='dind2' class='divInDiv2'>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>                
            </div>
    </div>
</section>

CSS

section
{
    width:100%;
    height:100%;
}
.buttonBar
{
    position: fixed;
    top: 0%;
    background-color: #99eeee;
    width: 80%;
}
.div1
{
    background-color: #eefeff;
}
.div2
{
    background-color: #ffe79f;
}
.divInDiv2
{
/*    width: 75%;*/
    left: 50%;
    right: 5%;
    background-color: #f9ff9f;
}

JavaScript

var elementDiv1=document.querySelector('#d1');
var elementDiv2=document.querySelector('#d2');
var elementDivInDiv2=document.querySelector('.divInDiv2');