Browser DOM & BOM

For selectors add in notes the Dom relation parent, child, descendant, sibling chart

The window is the global object inside the browser

The browser provides us access to the Document Object Model and the Browser Object Model

DOM is a tree like structure of our entire HTML document

BOM gives us access to things like location, navigator, screen

DOM

The browser constructs a tree like JS object representation of the HTML document

This allows us to tweak and work with our HTML page dynamically through JS

This can be accessed using window.document or simply document

DOM Manipulation

This means to target and change values of HTML elements


// Targeting
document.querySelector(''); // Same as CSS targetting
document.getElementById();
document.getElementsByTagName();
document.getElementsByClassName();

// Changing text
el.textContent; // Safe
el.innerHTML // Can cause XSS
el.innerText

Event Listeners

We can use event listeners to list for events (actions)

An arrow function doesn’t bind its this


el.addEventListener('click', function() {
	console.log(this); // the current element
})

el.addEventListener('click', () => {
	console.log(this); // the Window Object
})

TODO: Current Target and Target in js

Event Bubbling, Capturing & Delegation

event delegation is the practice using which we only set an event listener on the parent instead of adding them on all the child elements, we handle them once making it more performant

Event Debouncer & Throttling

debouncer is the technique to invoke a function only after a certain type, like a user is ferociously changing the values in an input field and on every input change we are preforming some logic then in this case there will be so much useless calculations that can be avoided using debouncer

throttling on the other hand limits invocation to only a certain number in a time frame

Throttling is useful for controlling how often a function (e.g., one attached to the scroll event) is executed during rapid, repeated events like scrolling.

Passive event listeners

Help browsers optimize event handling by allowing them to process default behaviors (like scrolling) without waiting for the event handler to complete, improving performance.Using both together makes the scroll event handling much more efficient and responsive.

Document.First element child and first child also what are nodes

Tasks

Add sheryians dom task in notes

local storage (.getItem, .setItem) JSON.parse and JSON.stringify()

session storage

navigator

location

fetch

Current Target and Target in js

DOM Tasks

Create an HTML page with a button. When the button is clicked, change the text of a paragraph element. Pen Link

Create a page with two images and a button. When the button is double clicked, swap the source attribute of the images. Pen Link

Create a form with input fields and a submit button. Use JavaScript to validate the form and display an error message if the input is invalid. (We will be adding the event of input and not change for the text inputs. As the change event is only triggered once you change the input values and click outside of the input field, what we want instead is it to change whenever the input field is changed). Pen Link

Create an unordered list. Allow users to add and remove list items dynamically using buttons.

Build a countdown timer that starts when a button is clicked and updates the display in real-time.

Create a tabbed interface where clicking on tabs displays different content sections without page reload.

Display a progress bar that updates in real-time, showing the progress of download, or form submission.

Create a search bar that displays live search results as users type, updating the results without requiring a full page reload.

Build a character counter for a text area or input field, which updates in real user types and enforces a character limit.

Show a progress bar which shows how much page has been scrolled.

Use the <progress> element with two buttons and change the progress on button click