Working Your Way Around DOM Manipulation!
Intro:
As a Flatiron student, transitioning from Ruby to JavaScript can be a challenging obstacle to tackle. Learning JavaScript has made me appreciate all of the small but important features Ruby has done for us programmers. Ranging from giving specific error messages, non confusing syntax to not having to worry about returning!
What is the DOM?:
First, we need to know what DOM is.
DOM stands for:
Document
Object
Model
It is a programming interface for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. The DOM structure is similar to that of an upside down tree with “document” being at the top. The “DOM” tree structure represents the HTML of the website, and every HTML element is considered to be a node.
Setting Up <script>:
There are many ways to manipulate the DOM, but the first step is actually setting up the script tag. The script tag should be placed inside the index.html file (very similar to setting up a CSS styling sheet). The script tag should be placed right above the closing body tag. Here’s an example of this:
An alternative could be placing the <script> tag inside the <head> tag and place the defer attribute between the words script and type:
The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build the DOM. The script loads “in the background”, and then runs when the DOM is fully built. Whichever way you choose to write the script tag, both should be fine.
Accessing Elements Inside the DOM:
The good thing about JavaScript is that there are many ways of approaching a problem. Before doing any manipulation to the DOM, there are methods that we can use to find a specific element or node.
document.getElementById()➞ using this method can find a single element by its iddocument.getElementsByClassname()➞ returns an HTML collection which contains every descendant element that has the specified class name.document.getElementsByTagName()➞ similar togetElementByClassname(), this method returns an HTML collection that includes each descendant with the specific HTML tag.document.querySelectorAll()➞ returns a node list representing document’s elements that match the specified group of selectors.document.querySelector()➞ This is my favorite way to access a specific node because you can literally access anything on the DOM whether it is with an id or tag.
Creating & Manipulating Elements:
Create ➞We can create an element by using document.createElement(“selector”):
After creating an element, we can either add something in it or update using .innerHTML, innerText or textContent. For more info on how to use either of the three check the resources section at the bottom of this blog!
Adding to the DOM:
After querying for an element or simply just creating and then adding something or updating what’s inside, we finish the process by appending those changes. When we append, we’re usually just adding a child element into its parent. There are 2 ways to do this:
parentNode.appendChild()parentNode.append()
Either way is fine, I personally like using .append() because it’s easier to remember.
Conclusion:
If you still don”t understand DOM manipulation, it’s honestly okay! Learning a new language can be challenging, but not impossible. This blog is a beginner’s guide on just one of the three pillars that are going to be covered when learning JavaScript. Below I have added resources where you can find additional information about the topics I have discussed!
Resources:
- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
- https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
- https://javascript.info/script-async-defer
- https://www.w3schools.com/jsref/prop_node_innertext.asp
- https://www.w3schools.com/jsref/prop_html_innerhtml.asp
- https://www.w3schools.com/jsref/prop_node_textcontent.asp
