COMP9634 - Quiz #1

Test your beginner's DOM knowledge.

by Joshua Koudys

HTML

<section id="quiz-number-two">
    <p>Foo Bar</p>
</section>
<section class="span6">
    <p>I'm an interesting article.</p>
</section>
<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 newel = document.createElement("H1");
newel.textContent = "A new element";
document.body.appendChild(newel);
alert(document.body.innerHTML);
var paras = document.querySelectorAll("h1"); // this returns an array

for(var i = 0; i < paras.length; i++ ) {
    alert(paras[i].textContent);
}