An Intro to DOM Manipulation

Hello Enthusiasts of the Computer Science World!

What is DOM?

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 JavaScript Engine, each browser has one of these to look at the JavaScript file, read it line by line and execute. When first learning this I thought to myself well, how do these even tie together? The answer is that now we can use JavaScript to talk with the DOM, so in essence a web browser has a window object, the major parent of a web page that has a property document that specifies what should get displayed, to decide what to get displayed the DOM reads the HTML and CSS, finally the JavaScript that is read by a JavaScript Engine reads though it and if it ever needs to change anything JavaScript can speak with DOM and modify the HTML and CSS. Soon you can start manipulating DOM to make your projects more interactive.

Example of how DOM would look like as explained:

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

Changing Styles

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, innerHTML.

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.

Example

//While making a website we can create a button in html and manipulate its action in Javascript adding whats called an eventlistener

button.addEventListener("click",function() {
   console.log("click is working") // to see if working
}
//Click is also an event which when the user clicks on the button it returns the notification from the console.log

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!