Javascript Intermediate level 1 - Mastering the DOM

Navigate browser developer tools to inspect the DOM, edit elements, and run scripts, using keyboard shortcuts and docked views. Compare DOM with the page source, adjust styles, and simulate states.

Master chaining and querying the dom to find and modify inputs and navigation links using querySelector and querySelectorAll, and practice changing href and class attributes.

Access all forms with document.forms, target the first form to modify inputs and placeholders, and practice vanilla javascript to style and interact with form elements.

Learn to inspect and manipulate DOM nodes using node properties such as node name, value, type, and attributes, and access and modify elements in the browser console.

Master the DOM traversal by using properties like childNodes, parentNode, firstChild, lastChild, and nextSibling to navigate up, down, and across the node tree.

master the dom traversal by filtering out text nodes and focusing on element nodes using firstElementChild, lastElementChild, and previousElementSibling and nextElementSibling.

Learn to work with attributes in the DOM using methods like getAttribute, setAttribute, hasAttribute, and removeAttribute to inspect, modify, and manage element classes and other attributes.

Master managing element classes in the DOM with the class list: add, remove, toggle, and check for classes, while considering length and browser support.

Explore manipulating the DOM and HTML in the document by reading, replacing, and inserting HTML using innerHTML, outerHTML, and insertAdjacentHTML with beforebegin, afterbegin, beforeend, and afterend.

Learn to create dom elements, build a list item with an anchor tag, set href and class, append it to a nav bar, and style its background and color.

Master precise dom insertions by creating a list item and anchor tag, then insert the element at a chosen position using insertBefore in the navigation.

Learn to clone DOM elements and clone nodes with or without child nodes, create a link from an old one, and append it to nav bar after updating its text.

Learn to replace nodes by selecting nav bar elements, creating a new list item, and using replaceChild to swap an existing element, leveraging createElement and appendChild for updates.

Kick off a hands-on javascript project by styling with code, creating elements, and moving images across the page with a library, including a background that follows the window.

Set up the project by creating a dedicated folder, wiring index.html, css, bootstrap, and starter scripts, then link assets and prepare a bootstrap masonry grid for a foundation.

Activate the Masonry plugin to power the photo gallery in the project, configure its options including the item selector and animation, and verify the gallery works as you add elements.

Set up a self-executing script that runs when the document loads, selects car image elements, and attaches a click event listener to report the event target.

Click an image to trigger a dynamically created overlay and append it to the body, then style it for a translucent backdrop and image popups in the next lecture.

Style the overlay with absolute positioning, top: 0, and a translucent rgba background, then set the cursor to pointer to enable hover feedback.

Size the overlay by using the window inner width and height, applying them as pixel values to the overlay's width and height, then adjust opacity for a darker backdrop.

Create and display the image inside the overlay by obtaining the image source, constructing the image element, and wiring a pop-up image for the click-driven overlay.

Style the image with a simple block layout, set width to 50 percent, center it with margins, overlay the popup image on the body, and enable click-to-dismiss to hide overlay.

Add a click event to the overlay image to remove it when clicked. Align the overlay to follow window scrolling and plan a scroll listener to resize it.

Add a scroll event listener to make the overlay follow the page, using page offset and page y offset to position it, and handle resize to adjust width and height.

Master responsive overlays that resize with the window, using 100% width of the root element and dynamic inner width calculations, with tips for styling and event handling.