Exploring JavaScript DOM, BOM, and CSS Selectors

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 how to use css ::before and ::after pseudo elements to insert content, style a paragraph, and create hover effects, with practical demos.

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

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 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 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.

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.

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.

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.

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 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.