Have you ever visited a webpage and wondered how is this thing made? Well in this article I will attempt to explain exactly that with the rudimentary knowledge that I have of the DOM. Webpages at their base are usually made of 3 components HTML, CSS, and JavaScript. Although other languages can modify the DOM such as Python, JavaScript and the DOM are twins that started off life intertwined and JavaScript remains the most popular language of the web.
One helpful tool in visualizing the makeup of the DOM is using a DOM tree.
The picture above shows the DNA of a webpage translated into code that in the dev tools (command + option + j) elements tab would look like this:
<!DOCTYPE HTML>
<html>
<head>
<title> "My title </title>
</head>
<body>
<h1>My header</h1><a href="http://website.com">My Link</a>
</body>
</html>In real world instances, between the <head> tags will be your metadata such as links to JavaScript files and CSS files. Inside the body will be your raw HTML data that you can manipulate using the console tab in your dev tools. Although these changes will revert to their original values when you refresh the page.
JavaScript can be used to manipulate the DOM in a number of ways, for example adding a new element to a previously created one. An example of this:
<div id = "character-bar"><!-- show characters names here --></div>
Here we have HTML element of div created in the DOM.
function renderAllChars(){ fetch('http:/localhost:3000/characters') .then(resp => resp.json()) .then(charArr => { charArr.forEach(charr => { const name = document.createElement('span') name.textContent = charr.name name.dataset.id = charr.id //const charBar = document.querySelector('div#character-bar') charBar.append(name)});})}
In the code above we are getting data from a database using fetch and then creating a HTML <span> element using document.createElement, setting inner text <span>Inner text </span> to the name of the object from the database. Finally adding it span tag into the <div> tag that was already provided. This is one example of how JavaScript and the DOM communicate with each other.
