More In Detail DOM

Question 1

Answer the following three questions:

1. What are the outermost elements called?
2. What are the elements directly inside of it called?
3. What are the elements called with the same parent, on the same level?

Answer 1

1. Parent
2. Children
3. Siblings

Question 2

What is the difference between the closest and next methods.

Answer 2

The closest method finds the closest acestor of the selected element. So parent, grandparents etc.

The next method finds the next sibling of the selected element.

Question 3

Based on the code below, using a certain method, how could you select the heading one element?

<div class="container">
<h1> Welcome Home </h1>
<p> You can rest easy</p>
<p> Relax</p>
</div>

Answer 3

$(‘.container’).find(‘h1’);

Question 4

Based on the code below, if you wanted to toggle the class ‘highlight’ for the div ‘info’ but not the div ‘container when you clicked on the element with the id ‘go’, which answer would accomplish that?

<div class="container">
<p> we all go home at some point</p>
<div class="info">
<h1> Welcome Home </h1>
<p> You can rest easy</p>
<p> Relax</p>
<p> You belong here</p>
</div></div>

Answer 4

$(‘#go’).on(‘click’, function() {
$(‘#rest’).closest(‘div’).toggleClass(‘highlight’);
})