Since the DOM is a family tree, every element knows its relatives. You can move around the tree from any element:
| Property | Gives you |
|---|---|
element.parentElement | Its parent |
element.children | A list of its child elements |
element.firstElementChild | Its first child |
element.lastElementChild | Its last child |
element.nextElementSibling | The sibling right after it |
element.previousElementSibling | The sibling right before it |
element.closest(selector) | The nearest ancestor (or itself) that matches the selector |
const favorite = document.querySelector(".favorite");
console.log(favorite.parentElement.id); // "food-list"
console.log(favorite.previousElementSibling.textContent); // "Omelet"
console.log(favorite.parentElement.children.length); // 3You won't need these every day, but closest in particular will be very useful in Grade 12.