DOM Node Navigation Quiz

Navigating Between DOM Nodes

• DOM nodes offer properties and methods to traverse the DOM tree and make changes easily.
• Diagram shows relationships between HTML elements.

DOM Node Navigation

• document is the root element
• document.documentElement points to the element
• document.body points to the element (if inside the body)
• parentNode points to the parent node
• previousSibling points to the previous sibling
• nextSibling points to the next sibling
• childNodes returns all child nodes (including text and comment nodes)
• firstChild points to the first child
• lastChild points to the last child
• firstElementChild returns the first child element, skipping text nodes.
• lastElementChild returns the last child element, skipping text nodes.
• hasChildNodes() method used to check if an element has child nodes, before looping.

Example of FirstChild and LastChild

• nodeName of the first child of the #main div is #text.
• nodeName of first child from #hint is SPAN.
• Whitespace (spaces, tabs, newlines) form text nodes, part of DOM tree.

Avoiding Text/Comment Nodes

• firstElementChild and lastElementChild properties return only the first and last element nodes.

childNodes Property

• Returns all child nodes, including text and comment nodes.
• Use the children property to get a collection of element nodes only.

parentNode Property

• Returns the parent of a specified node in the DOM tree.
• Returns null for the document node since it doesn't have a parent.

previousSibling and nextSibling

• previousSibling returns the previous sibling node.
• nextSibling returns the next sibling node in the DOM.
• previousElementSibling returns the previous sibling element (skipping text nodes)
• nextElementSibling returns the next sibling element (skipping text nodes)

Changing HTML Content

• innerHTML modifies or retrieves HTML content of an element.
• Example: element.innerHTML = 'new content';
• Modifies/retrieves HTML content, including text and tags.

textContent property

• Returns only the text content of an element, ignoring tags.
• Example: console.log(news.textContent); outputs only the text

Creating and Inserting Elements

• Three steps to add HTML elements in the DOM:
• Creating the element
• Assigning attributes
• Inserting element in the DOM
• createElement() method creates a new element (e.g., <a>)
• appendChild() method adds an element as a child to another element.
• Example: document.getElementById('myP').appendChild(newLink);
• createTextNode() method creates a text node (e.g, "Mon site")

Test your knowledge of navigating DOM nodes and understanding their properties and methods. This quiz covers crucial concepts such as parent nodes, sibling nodes, and child node retrieval methods. Refresh your skills in managing the HTML structure with ease.