With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects:
With the object model, JavaScript gets all the power it needs to create dynamic HTML:
- JavaScript can change all the HTML elements in the page
- JavaScript can change all the HTML attributes in the page
- JavaScript can change all the CSS styles in the page
- JavaScript can remove existing HTML elements and attributes
- JavaScript can add new HTML elements and attributes
- JavaScript can react to all existing HTML events in the page
- JavaScript can create new HTML events in the page
Refer to this link for more details: ⇨JavaScript HTML DOM w3school
DOM Selectors
DOM Selectors
--------------
getElementsByTagName
getElementsByClassName
getElementById
querySelector //select the first item that it finds**
querySelectorAll //select them all**
parentElement //select Parent
children
/******************
Changing Attribute
*******************/
getAttribute //document.getElementsByTagName("p")[0].getAttribute("id");**
setAttribute
/*****************
Changing Styles
******************/
style.{property} //ok
className //best **selector.className="" to attribut a classe to tag**
classList //best
classList.add
classList.remove
classList.toggle //To switch between alternate states.**
//It is important to CACHE selectors in variables
//Bonus
innerHTML //DANGEROUS
And here the full list of the Document Object Properties and Methods
JavaScript HTML DOM Events
Refer to this tutorial: ⇨JavaScript HTML DOM Events
Here the list of the Javascript HTML DOM Events:
⇨ Event reference w3school
⇨ Event reference MDN
For the Keyboard events, use this for the key codes:
⇨ Javascript Char Codes (Key Codes)