In a simple language, it is structure representation of an HTML document or it is like a tree of nodes.
By tree of nodes, I mean html tags, head tags, body tags, and everything which come inside it including the doctype.
DOM is object-oriented means whatever comes in it have its own methods and properties.
And we can manipulate these elements by using JavaScript.
DOM selectors for single elements
There are two types of single element selectors.
document.getElementById( );
As you may understand by using document.getElementById you can select any element by their Ids.
By getting them with their Ids you can change their stylings, get things from the element and can change the content.
ex: for inserting Html content you can use document.getElementById( “whatever the id is” ).innerHtml = ‘ content ‘
for changing content you can use document.getElementById.( “whatever the id is” ).textcontent / innertext = ‘ content ‘
document.querySelector( );
By using this you can select elements from everything like classes, ids, and by selecting element itself.
Ex: if you want to select list item then you can select li and can change whatever you want to whether you want to style it or want to change its content.
DOM selectors for Multiple elements
As you understood from its name that by using this you can select multiple elements.
There are three types of Multiple Selector
document.getElementsByClassName( );
By using this you can select elements by their class name and can style them or change content the same as the single selector.
It is html collection, not an array that’s why you cannot use array methods in it but you can use array methods by changing the html collection to an array.
document.getElementsByTagName( );
By using this you can select elements by their tag name and can style them or change content the same as the single selector.
It is also an html collection, not an array that’s why you cannot use array methods in it but you can use array methods by changing the html collection to an array.
document.getElementsByquerySelectorsAll();
By using this you can select elements not only by their class name or tag name but by selecting element itself and can style them or change content the same as the single selector.
It is node list, this is not an array but you can use array methods without changing it to an array.
