Exploring JavaScript DOM, BOM, and CSS Selectors

Learn how to use CSS advanced selectors, including simple selectors and the four combinator selectors—descendant, direct child, adjacent sibling, and general sibling—plus the universal selector, with practical examples.

learn how to use attribute selectors in css to target elements by name and value, including starts with, ends with, and contains, with examples using img, a, and input attributes.

Explore css pseudo classes and selectors such as first child, last child, and only child. Learn to use nth child, nth last child, and nth of type for precise targeting.

Explore CSS pseudo-classes, including only type, first of type, last of type, empty, not, lang, and link selectors with hover, visited, and active states.

Explore practical CSS pseudo-classes such as target, focus, checked, enabled and disabled, required and optional, and in range and out of range, with real form and anchor examples.

Explore CSS pseudo-classes for forms, including read-only and read-write inputs, invalid and valid states, default selections, and root variables, with practical demonstrations of styling and behavior.

Learn the css fullscreen pseudo-class and how to toggle a div into fullscreen with javascript's request fullscreen, then style it in fullscreen using background color, font size, and text color.

Explore how the CSS :has pseudo-class selects a parent element based on its children, demonstrated with h1, span, p, and direct child selectors, applying underline.

Master the CSS is() pseudo-class to target multiple elements with a single selector. See practical examples that reduce code size and boost page speed through precise, hover-enabled styling.

Explore CSS pseudo elements, including first letter, first line, selection, and placeholder, and learn how to style these selectors in HTML with practical examples.

Explore how to use css ::before and ::after pseudo elements to insert content, style a paragraph, and create hover effects, with practical demos.

Learn to color list markers with the marker pseudo element and apply it to unordered lists. Style marker color independently from text, noting that only color is currently supported.

Explore the JavaScript DOM, its document object model, the DOM tree, and how to access, create, modify, and delete HTML elements, attributes, and text using get and set.

Target and manipulate DOM elements using JavaScript document methods by id, class name, and tag name, and inspect head, title, body, links, images, and doctype through hands-on examples.

Learn dom targeting methods, including URL, domain, and base uri, and practice selecting elements by id, class name, and tag name.

Master DOM get and set methods to extract and assign values from elements, including inner text, inner HTML, and get attribute, get attribute node, and attributes.

Learn to manipulate the DOM with set methods to update inner HTML, inner text, attributes, and inline styles, including add, replace, and remove attribute operations.

Explore how to target DOM elements using querySelector and querySelectorAll, selecting by id, class, or tag with CSS selectors, and access or modify innerHTML.

Explore how to style DOM elements with JavaScript using style, className, and classList; get and set CSS values, apply classes, and manage class lists for dynamic styling.

Learn to attach events to HTML elements using the addEventListener method, replacing inline handlers, by selecting elements with the DOM and getElementById, wiring click and mouse enter.

Explore the addEventListener method in JavaScript, including the optional useCapture parameter, and compare event flow between inner and outer divs with practical listener examples.

Learn how to manipulate elements with classList methods in JavaScript, including add, remove, toggle, length, item, and contains, demonstrated with a live coding example in HTML and VS Code.

Explore JavaScript DOM traversal methods, focusing on parentElement and parentNode with practical getElementById examples on inner and outer divs, and note when null vs value is returned.

Explore dom traversal methods by comparing the children and childNodes methods and practice targeting children with a parent node, including working with an HTML collection and index-based selections.

Learn DOM traversal using first element child and last element child, and compare with first child and last child; understand element methods return tags while text nodes may appear.

Explore dom traversal with next element sibling, next sibling, previous element sibling, and previous sibling. Learn differences between element and text node handling, with practical html and javascript examples.

Learn to create HTML elements, text nodes, and comments with JavaScript using document.createElement, document.createTextNode, and document.createComment, and see these elements logged in the console.

Learn to use JavaScript DOM append methods, appendChild and insertBefore, to attach text nodes and elements. Explore creating elements and text with createElement and createTextNode, and moving them within page.

Explore insertAdjacentElement, insertAdjacentHTML, and insertAdjacentText to create and insert DOM content, and learn their positions beforebegin, afterbegin, beforeend, afterend, compared to append.

Learn to manipulate the DOM using JavaScript by replacing and removing list items with replaceChild and removeChild, including creating elements, text nodes, and targeting parents by id.

Learn to clone dom nodes using cloneNode, copy a list item from the fruit list to the vegetable list, and append the cloned element with appendChild, including attributes and text.

Learn how the JavaScript contains method checks if an element's container includes a given id, using a parent element and a target element, returning true or false.

Explore how to use hasAttribute and hasChildNodes to inspect DOM elements, check for attributes like class, and determine if a node has child elements with practical examples.

Discover how to use the isEqualNode method to compare two DOM list items by node type, node name, node value, child nodes, and matching attributes.

Using setInterval and clearInterval, animate a DOM element by updating margin-left every 1000 milliseconds. Store the interval id and stop the animation with clearInterval at a target value.

Learn to use setTimeout and clearTimeout to run a one-time animation after a millisecond delay. See how to extend width after delay and stop the animation with a stop button.

Master the basics of JavaScript events, including mouse and keyboard actions, and browser events like load, resize, and scroll, with practical function calls.

Explore focus, blur, and on input events in javascript form handling, highlighting fields on focus and turning inputs yellow during typing using id targeting and the this keyword.

Explore JavaScript form events by implementing onchange, onselect, onsubmit, and oninvalid across input, select, and textarea elements. Learn practical validation, custom alerts, and extracting values with getElementById and required attributes.

Explore keyboard and clipboard events in the DOM, focusing on on copy, on cut, and on paste, and see how functions update page content via inner HTML.

Explore the browser object model and how the window object lets you access height and width, scroll, open or close windows, and navigate history in JavaScript.

Learn to get the browser window's inner and outer height and width using window.innerHeight, window.outerHeight, window.innerWidth, and window.outerWidth. Implement a resize handler to update values on viewport changes.

Learn to open new windows with window.open using url and name, with width, height, left, and top specs, and to close them with window.close, demonstrated in html.

Open a new window and move it with moveTo and moveBy. Learn absolute versus relative positioning and focus handling.

Learn how resizeTo explicitly sets a window's height and width, while resizeBy adds to the current dimensions.

Explore how to control page scrolling with scrollBy and scrollTo in JavaScript, manipulating vertical and horizontal scroll bars using x and y axis values, including positive and negative offsets.

Master the JavaScript location object by exploring properties like host, host name, origin, path, port, protocol, href, and methods like assign, reload, and replace for reading and setting URL values.

Learn how the JavaScript history object works, including length, and the back, forward, and go methods to navigate pages, with practical examples.

Learn to read vertical and horizontal scroll distances using window.pageYOffset and window.pageXOffset through a scroll event, logging values with console.log and clearing the console for exact results.

Target an element with querySelector and log its offsetTop and offsetLeft using JavaScript. Discover how body margins affect these offset values and how to reset margins to zero.

Learn to read vertical and horizontal scroll positions with scrollTop and scrollLeft on a container, using overflow, a scroll event, and querySelector to target elements.

Learn to measure content size with JavaScript scrollWidth and scrollHeight in the DOM, handle overflow and padding, and observe horizontal and vertical scrollbars in a sample div.

Learn how JavaScript's offsetWidth and offsetHeight return an element's total width and height, including padding, border, and scrollbar (excluding margins), with practical examples using a box element.

Learn how to use JavaScript clientWidth and clientHeight to measure an element's inner size, including padding but excluding border, scrollbar, and margin, with practical examples.

Learn to capture mouse coordinates within the browser viewport using clientX and clientY with a mousemove event, and log x and y values via an addEventListener in JavaScript.

Learn how pageX and pageY track cursor position relative to the document using mouse events, and compare with clientX and clientY relative to the viewport, including scrolling effects.

Discover how to use screenX and screenY to measure the cursor's position relative to the monitor screen resolution, not the browser viewport, via mouse events.

Learn to get mouse coordinates relative to a specific element using offsetX and offsetY during mouse events, and log them to the console.