jquery-dom-traversal-notes.md

Dom Traversal

Describe what DOM traversal is and why it is useful.

• AKA-walking or navigating the DOM.
• The act of selecting an element from another element
• It's easier to move from one element to another rather than starting from the beginning and re-searching
• Ex: it's easier to move from your house to your friend's when you already know their address instead of having to google search and get directions.

What can the siblings(), parent(), and children() methods do?

• .children() Gets the children of each element in the set of matched elements, optionally filtered by a selector
• .parent() Gets the parent of each element in the current set of matched elements, optionally filtered by a selector
• .siblings( Gets the siblings of each element in the set of matched elements, optionally filtered by a selector

What is prepend(), append(), and what are their differences?

• .prepend() Inserts content, specified by the parameter, to the beginning of each element in the set of matched elements
• .append() Inserts content, specified by the parameter to the end of each element in the set of matched elements
• Difference: prepend inserts content into the beginning of each element, append inserts to the end.

What is the difference between parent() and parents()? Why would I want to use either?

• .parent()
  • Gets the parent of each element in the current set of matched elements, optionally filtered by a selector
  • Traverse a single level up the selected element and returns that element
  • Does not accept a parameter
  • Returns the parent of the selected elements
• .parents()
  • Gets the ancestors of each element in the current set of matched elements, optionally filtered by a selector
  • Allows us to search through the ancestors of these elements in the DOM tree and construct a new JQuery object from the matching elements ordered from immediate parent up.
  • The elements are returned in order from closest parent to the outer ones

Describe closest() and find(). What are their use cases?

• .closest()
  • For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
  • Begins with the current element and travels up the DOM tree until it finds a match
• find()
  • Get the decendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element
  • You can target elements to be changed together ex: $('li.item-2).find('li').css('background-color', 'red'); This will change the backgroud items on every li element that is a child of the li elements with a class of 'item-2'

Create a couple demos (in CodePen) using DOM traversal methods.

• https://codepen.io/zoekharvey/pen/NWKpoaJ

Where do you go to find the official jQuery docs?

• https://api.jquery.com/category/traversing/tree-traversal/

On the parents() method doc page it says the return value is a jQuery object (Returns: jQuery near the top right of the page). On the text() method doc page, what is the return value, and why is this important?

• The result of the .text() method is a string containing the combined text of all matched elements
• The text() method cannot be used on form inputs or scripts.
  • To set or get the text value of input or textarea elements, use the .val() method