Hello Enthusiasts of the Computer Science World!
Document Object Model, we need DOM to change, get, add, or delete HTML elements. The DOM is something the browser creates to allow us to modify the HTML and CSS. DOM works along with its partner a
Now that we know that the web page
Document is an object with attributes and properties which we can access and
modify them. For example the most simple yet highly compulsory methods that we need to use are the Selector and Query methods to change, add, or delete whatever that we want for to be displayed and available to human eye wandering over our project.
First we have the Selector Method
document.getElementByTagName("any element") //Put any TagName for example "h1" so the console returns it document.getElementByClassName("any class element") //Put any class element in the html file so the console returns it document.getElementById("any ID element") //Put any ID element so the console returns it
Next we have the Query Method you can choose your preference.
document.querySelector("anything") //Selects first element of any tagname //Keep in not that if you decide to put a class or id you will have to use the CSS tpyes such as the # for id and . for classes document.querySelectorAll("anything") //Selects all elements of any tagname //Same rules apply
How to Find and Change Attributes
document.querySelector("anything").getAttribute("anything"); //Gets the attribute of any certain element you call document.querySelector("anything").setAttribute("anything"); //Gets and changes the attribute of the element you called
document.querySelector("anything").style.background = "blue"; //I used background but you can change any type of style //This is an *okay* way of changing the CSS but it would just be like changing CSS from HTML so lets look at better ways anything.className = "anything" //This would change your element to a different class document.querySelector("anything").classList //Gives you all the attriubtes in the element you called for //This classList will help us accomplish much more document.querySelector("anything").classlist.add("addanything") //This adds to our element any attribute that we want document.querySelector("anything").classlist.remove("removeanything") //This removes any attribute from the put element that we want document.querySelector("anything").classlist.toogle("anything") //This just alternates the attributes between true and false useful for something like switches
So far we have learned that we should use query selectors to grab the element and change the styles with our newly found classlists. Now lets use one that's even more useful,
document.querySelector("anything").innerHTML = "anything" //this changes the actual html of any element you desire
These which we have just learned are basic methods to Manipulate the DOM.
Finally I would like to introduce you coders into DOM events, DOM events basically notify you when something has happened in your page. Events give you everything and anything through the event interface and can be combined with functions to gain additional information which is what will do.
References for more events can be found here: https://developer.mozilla.org/en-US/docs/Web/Events
That's it! Although this is basic information they are crucial fundamentals and you can go beyond limits with just these few methods and events creating a riveting and amusing project, good luck, don't forget to work hard!