By the end of this worksheet, you will be able to:

Understand how the DOM works as a tree of nested HTML elements.
Understand what DOM traversal is.
Use jQuery commands like .next(), .prev(), and .find() to move between related elements in the DOM.
Apply $(this) to target the exact element you’re interacting with.
Build a simple interactive feature, like an accordion, using DOM traversal and events.
Recognise different types of events (click, mouseenter, mouseleave) and how they affect elements.
Change the look of elements by adding or removing classes with jQuery. </aside>

Introduction

Last week we looked at how jQuery syntax is constructed to target selectors. We also looked at how to use the inbuilt effects, animate() and css(), and how to trigger them from events such as click() or mouseenter().

This week we’ll be looking at some specific jQuery commands that help us navigate the Document Object Model. These commands, however, are only beneficial if we have good HTML structure.

Quick Aside: A note on quotes

When you’re writing jQuery selectors, you can use either single or double quotes. So:

$('p').fadeOut();

… works the same as:

$("p").fadeOut();

Both are used throughout class and these worksheets — and you can use whichever you prefer — but we tend to prefer single quotes, especially when using the attribute selector:

$('a[target="_blank"]').show();

… which requires nesting of quotes ("") within quotes ('').

</aside>

The Document Object Model

It’s useful for us to understand an HTML document as a tree:

When a web page is loaded, the browser creates a Document Object Model of the page. https://www.w3schools.com/js/js_htmldom.asp

As we know, HTML tags are frequently nested inside of one another. For example:

<section>
  <h1>A Heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis mi a
    nulla eleifend vitae sagittis <span>libero</span> imperdiet. Vivamus
    consequat risus sit amet tortor laoreet vitae mattis enim ornare.</p>
</section>

In the above code, we have a <h1> and <p> nested inside of a <section>. Additionally, there is a <span> nested inside of the <p>.

jQuery provides us with some tools for describing/working with the relationship between elements:

Command	Description
`.next()`	Refers to the next HTML element.
`.prev()`	Refers to the previous HTML element.
`.find('selector')`	Allows us to refer to a nested element.
`$(this)`	Refers to the particular instance of selector that is being currently interacted with.

These tools are incredibly handy because they allow us to get around a lot of unnecessary coding. (A thorough list can be found in the Appendix below, but the above will cover all we need to know today.)

What do these jQuery commands do?

If you remember that jQuery “selects” elements based on a CSS-style selector syntax (eg. $('h2')), when we use these actions on a selection (eg. $('h2').next()), they let us change our selection so that we can work with related elements.

This becomes useful if we want to contextually affect elements, according to the element we are interacting with. In class we’ll demonstrate this notion of “traversing” the Document Object Model.

</aside>