JavaScript DOM Crash Course - Part 2

JavaScript DOM Crash Course - Part 2 - Notes

1. Summary:

This video dives deeper into JavaScript's Document Object Model (DOM), focusing on how to traverse and manipulate elements. It covers properties for navigating the DOM (parents, children, siblings) and techniques for creating and inserting new elements using `createElement()` and `createTextNode()`. The video sets the stage for the next part, which will focus on event handling to make web pages interactive.

2. Key Takeaways:

* **DOM Traversal:** Learn how to move around the DOM tree using properties like `parentNode`, `parentElement`, `childNodes`, `children`, `firstChild`, `firstElementChild`, `lastChild`, `lastElementChild`, `nextSibling`, `nextElementSibling`, `previousSibling`, and `previousElementSibling`.

* **Node vs. Element:** Be aware of the difference between `childNodes` (which includes text nodes, whitespace, and comments) and `children` (which includes only element nodes).

* **Creating Elements:** The `createElement()` method allows for dynamic creation of HTML elements within JavaScript.

* **Creating Text Nodes:** The `createTextNode()` method is used to create text content that can be inserted into elements.

* **Inserting Elements:** The `appendChild()` method inserts a child at the end and `insertBefore()` inserts an element before a reference node.

3. Detailed Notes:

#### I. Introduction (0:00:03 - 0:00:19)

* Recap of the previous video: covered selectors.

* Focus of this video: DOM traversal (moving up, down, and around the DOM).

#### II. Parent Nodes (0:00:19 - 0:03:59)

* **Definition:** The parent node is the element that contains another element.

* **Example:** The `h2` element's parent is the `div` with `id="main"`.

* **Property:** `parentNode` property is used to access the parent node of an element.

* Example: `item list.parentNode` would select the parent of an `ul` element.

* `parent node.style.backgroundcolor = "light gray"` - will change the style of the parent node.

* **Chaining:** `parentNode` can be chained to access parents of parents (e.g., `item list.parentNode.parentNode`).

#### III. Parent Element (0:04:02 - 0:04:51)

* **Property:** `parentElement` property is essentially the same as `parentNode` for practical purposes in this context.

#### IV. Children (0:04:51 - 0:07:19)

* **Property:** `childNodes` property returns a NodeList (an array-like object) of all child nodes (including text nodes, which represent whitespace).

* **Problem:** Text nodes and whitespace can complicate things.

* **Property:** `children` property returns an HTMLCollection (another array-like object) of only element nodes (no text nodes).

* **Accessing Specific Children:** Using index positions to select specific child elements, e.g., `item list.children[1]`.

* This index is zero-based, as with arrays in JavaScript.

#### V. First and Last Child / Element (0:07:19 - 0:10:38)

* **Property:** `firstChild` property returns the first child node (which can be a text node).

* **Property:** `firstElementChild` property returns the first child *element*. This is generally preferred over `firstChild`.

* **Property:** `lastChild` property returns the last child node (which can be a text node).

* **Property:** `lastElementChild` property returns the last child *element*. This is generally preferred over `lastChild`.

* **Text Nodes Considerations:** `firstChild` and `lastChild` can be affected by whitespace (line breaks).

#### VI. Siblings (0:10:38 - 0:13:59)

* **Definition:** Siblings are elements on the same level in the DOM tree.

* **Property:** `nextSibling` property returns the next sibling node (which can be a text node).

* **Property:** `nextElementSibling` property returns the next sibling *element*.

* **Property:** `previousSibling` property returns the previous sibling node (which can be a text node).

* **Property:** `previousElementSibling` property returns the previous sibling *element*.

* **Best Practice:** Use the `elementSibling` methods rather than `sibling`.

#### VII. Creating and Inserting Elements (0:14:12 - 0:20:25)

* **Method:** `createElement()` method is used to create new HTML elements dynamically.

* Example: `document.createElement('div')` creates a `div` element.

* **Adding Attributes:**

* `className` property to add a class to an element.

* `id` property to add an ID to an element.

* `setAttribute(attributeName, attributeValue)` method to add other attributes like "title" to the element.

* **Method:** `createTextNode()` method is used to create text nodes that contain text content.

* Example: `document.createTextNode('Hello World')`.

* **Adding Text to Element**

* `appendChild()` method to add a text node as a child of an element.

* **Inserting Elements into the DOM:**

* Get the element where we wish to insert.

* `insert before(new element, before element)` method to insert the new element before a reference element.

* Example: `container.insert before(new div, header h1)`

* **Styling:** Elements can be styled using JavaScript (e.g., `newDiv.style.fontSize = '30px';`).

#### VIII. Next Steps (0:20:25 - 0:22:05)

* The next video will cover events (click, keyboard, etc.) to add interactivity.

* The final video will create a simple application to add and delete list items.