Document Object Model
Browser provides a web API called 'document' which contains total style and struncture of the web page.
browser has its own js engine called v8.....we might have seen when we click a button then color change automatically, or an alert comes etc....
js changes html ... ... that means js changes html so it must need html code so that it can change or manipulate it... so browser puts all html into an object called document and js will take this document and change whatever it wants....
we write in html == hi
browser will create a document and write 'hi' js access document and changing to 'bye'
but ultimate output is document...
so user will see bye that's why js is powerful....
JavaScript can access, change HTML/CSS by using document object.
**i. DOM Selection:** You can select html elements in javascript multiple ways. Most popular are
**a. getElementsByTagName('tag'):** It returns an array of all the tag elements from HTML.
**b. getElementsByClassName('class'):** It returns an array of all the class named elements from HTML.
**c. getElementById('id'):** It selects elements with specific id from HTML.
**d. querySelector('queries'):** It is used to select an element based on query but it selects the first element that matches the query.
**e. querySelectorAll:** It is used to select an element based on query but it selects all elements which matches the condition
** ii. DOM Manipulation:**
**a. textContent:** textContent is used to access/ manaipulate the text inside an element.
**b. innerText:** innerText is also used to access/manipulalte the text inside an element but it also considers CSS
**d. innerHTML:** innerHTML is used to access / change complete HTML code
**e. value:** value is used to access/change input valaues
**f. classList/ className:** used to access/change class names
**g. style:** style is used to access/change style of an element
**iii. DOM Creation:** DOM Creation is used to create HTML elements using DOM. We can use methods "createELement"
To attach the element we can use,
append : it id used for appending multiple elements
appendChild: it is used for appending single element