COMP9634 - Quiz #1

Test your beginner's DOM knowledge.

by Pearlin Lawrence

HTML

<section id="quiz-number-one">
    <p>Get my text!</p>
    <p>Show everything, including this <span>span</span> tag!</p>
    <p>Tell me if my child element equals 9633 + 1. <b>9634</b>
    </p>
    <article>You're almost there, just show what kind of node this is (the node's "name", if you will.)</article> <i>Super-bonus marks: open the url in the contents of the next element in a new window</i>

     <h5>http://coned.georgebrown.ca/owa_prod/cewskcrss.P_CrseGet?subj_code=COMP&crse_numb=9634</h5>

</section>

CSS

section {
    margin:25px 5px 0 5px;
    padding:20px;
    background-color:#efefef;
    box-shadow: 0 0 25px #000;
    border-radius:4px;
    font-family:Calibri, sans-serif;
}
p {
    padding:15px;
    margin: 25px 0;
    border:2px dashed #fff;
    border-radius:3px;
    font-size:19px;
}
p > b {
    display:none;
}
span {
    font-weight:100;
    font-family:"Courier", serif;
    font-size:1.5em;
}
span:after {
    content:">";
}
span:before {
    content:"<";
}
article {
    line-height:1.6;
    width:200px;
    border:14px solid #dedede;
    padding:10px;
    display:inline-block;
    vertical-align:top;
}
i {
    font-size: 9px;
}
i:before {
    content:">>>> ";
}
h5 {
    text-transform:uppercase;
    width:10em;
    height:1em;
    overflow: hidden;
    text-overflow: ellipsis;
    display:inline-block;
}

JavaScript

/*
 * Quiz #1
 * Demonstrate your newfound DOM knowledge by going through the elements above and doing what they tell you to do.
 * I'll ask you to re-do the quiz if I see a $ anywhere in this.
 * Don't use any fancy ways to select elements, e.g. by their ID or css selector. You don't need to loop either.
 * Use the following methods to finish this quiz:
 * document.nextElementSibling, document.previousElementSibling, document.body.firstElementChild, document.body.lastElementChild, .innerHTML, .nodeName, .textContent, window.open
 * Trick to look out for: remember that the <section> is the first element of the <body>, but we're trying to get the elements in <section> individually...
 */

var txt = document.body.firstElementChild;
alert(txt.firstElementChild.textContent);

var txt1 = txt.firstElementChild;
alert(txt1.nextElementSibling.innerHTML);

var txt3 = txt1.nextElementSibling.nextElementSibling;
if (txt3.firstElementChild.textContent == 9633 + 1) {
    alert("Child Element is Equal to 9633 + 1")
};

var txt2 = txt1.nextElementSibling.nextElementSibling;
alert(txt2.nextElementSibling.nodeName);

window.open(document.body.firstElementChild.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.textContent)