Nobody likes applications that are based on the console... Can you imagine using Uber from the command line?
1$ "uber" request-trip --from home-- to work --pool
Thankfully, we have browsers! They let us render our application in a visual interface that we call a website.
As you already know, the responsibility of the browser is to transform HTML/CSS code into visual elements. Those elements are mapped into a hierarchy that is stored in RAM memory, and it’s called The DOM.
With JavaScript we can manipulate the DOM (website elements) during runtime (during the application's life cycle).
NOTE: Please always remember that all JavaScript code that you write in your HTML document MUST be wrapped inside a <script>
tag, like this:
1<script> 2 // Your code here 3</script>
There are several ways to manipulate the DOM, but the most simple one is document.write()
. Every time you create a document.write()
you will be writing onto the HTML whatever string you decide to pass as a parameter to the write function.
It does not matter where you write the code. The only thing that matters is that it is wrapped inside a <script>
tag. For example:
From the moment a website starts being loaded, the browser creates a hierarchy that is called The DOM. Each HTML element you coded in your HTML document as a developer has a place in that hierarchy, and you can access it using JavaScript anytime you want during the runtime.
Just like we did with CSS, we can select any element in the document. There are 4 methods that allow us to search for whatever we want:
Returns an instance of the first element found that fits the CSS selector that you specified.
Returns an instance of the element with the id="elementId"
in the HTML document.
Returns an array of all elements with the class="exampleClass"
in their HTML tag property.
Returns an array with all the instances representing each paragraph element in the HTML document.
Returns an array with all the elements that have name="name_value"
in the name property of their HTML tag in the HTML document.
1let elem = document.getElementById("xyz"); 2elem.style.color = "red"; // change color to red 3 4let myList = document.getElementsByTagName("p"); 5let howManyElements = myList.length; 6myList[0].style.color = "red"; // make the first one red 7 8let myList = document.getElementsByClassName("abc"); 9myList[0].style.color = "red"; // make the first one red 10 11let xyz = document.getElementsByName("xyz"); 12xyz[0].style.color = "red"; // make the first one red
It is very common to need to change an element’s child. For example:
<li>
children of a specific <ul>
to make their background red.<tr>
row of a <table>
.The best way to retrieve the child elements of any DOM element is by using its childNodes properties, like this:
This returns an array with all the element’s children nodes.
1let x = document.getElementById("myDIV"); 2x.querySelector(".random").style.background = "green"; 3// get the first #myDIV child with the .random class 4 5let x = document.getElementById("myDIV"); 6x.querySelector("h3,h2").style.background = "blue"; 7// get the first #myDIV child with the tag <h3> or <h2> 8 9let tableElm = document.getElementById("people"); 10let trArray = tableElm.querySelectorAll("tr"); 11trArray[3].style.background = "red"; 12// get an array with all of #people's children with tag <tr>
As you already know, each element in the HTML document can have some sort of HTML content. It does not matter if it is a <p>
, <div>
, <a>
or any other HTML element; it can have its own innerHTML combined with more HTML content.
The .innerHTML
property gives you the ability to retrieve or set the content of whatever element you have in your JavaScript. For example:
1document.getElementsByTagName("div")[0].innerHTML = "abc"; 2// innerHTML can be used to insert plain text content or HTML, this creates a list inside a <div> element
☝️ You can find another 2 properties on the internet:
nodeValue
andtextContent
, but they are not really universally used and are more limited in functionality.
There are 2 functions we can use for that: appendChild()
and insertBefore()
.
Let's say that you have selected a <div>
with the id="myFirstDiv"
and you want to add a new <h1>
inside of that <div>
.
You can use the appendChild function like this:
1let divElem = document.getElementById("myFirstDiv"); 2let myNewHOne = document.createElement("h1"); 3let t = document.createTextNode("Hello World"); 4myNewHOne.appendChild(t); // This adds the text content to the <h1> 5divElem.appendChild(myNewHOne); // This adds the <h1> into the "myFirstDiv" element
Now, let's say that we have a <ul>
with 2 elements, but we want to insert a new <li>
at the beginning of that list.
We can use the function insertBefore
for that case – like this:
1let newItem = document.createElement("li"); 2let textNode = document.createTextNode("Water"); 3newItem.appendChild(textNode); 4let list = document.getElementById("myList"); 5list.insertBefore(newItem, list.childNodes[0]); // adding the newItem before the FIRST child of the list
The removeChild()
function is great for removing an element from the DOM and, consequentially, from the HTML document as well. You will have to specify who is the parent of the element that you are trying to delete.
For example, if we want to remove all the elements from a
1// Removing all children from an element 2let element = document.getElementById("myFirstUL"); 3while (element.firstChild) { 4 element.removeChild(element.firstChild); 5}
To change any attribute of any object in the DOM, we need to use the .attribute
property just like this:
1// Changing attributes 2let element = document.getElementById("myElementId"); 3element.attribute = "whatever";
You can also change any CSS rule or property applied to the HTML elements by using the .style
attribute, like this:
1// Changing styles 2let element = document.getElementById("myElementId"); 3element.style.color = "red"; 4element.style.background = "blue";
For more information about accessing the DOM, see: https://developer.mozilla.org/en-US/docs/Web/API/Document