"JavaScript and the Document Object Model (DOM)"

What is Dom

DOM is a way for JavaScript to see and change the content, structure, and style of a webpage

Example:

If your HTML is:

<p>Hello World</p>

Then JavaScript can access and change it like this:

document.querySelector("p").textContent = "Hello DOM!"; 

2.Accessing Elements

getElementById()

getElementsByClassName()

getElementsByTagName()

querySelector()

querySelectorAll()

3. Changing HTML Content

element.innerHTML

element.textContent

4. Changing CSS/Style

element.style.property = value

5. Changing Attributes

element.setAttribute()

element.getAttribute()

element.removeAttribute()

6. dom events

onclick, onmouseover, onchange, etc.

addEventListener()

1. Create/Remove Elements

document.createElement()

element.appendChild()

element.removeChild()

8. DOM Tree Navigation

parentNode, childNodes, firstChild, lastChild, nextSibling