THE DOM, THE DOM, THE DOM, What exactly is that?(part 2)

Gloria Ojukwu (tech_bella) — Tue, 24 Dec 2019 13:25:41 +0000

DOM Manipulation with Javascript.

In part 1 of this article . https://dev.to/gloriaojuks/the-dom-the-dom-the-dom-what-exactly-is-that-ank , we looked at the basics of DOM and what the DOM really is. We also saw that we could use javascript to manipulate the DOM but didn't dive dip into that. In this article, we'll look at how we can manipulate the DOM with javascript.

In the last article, we established the foundation that the DOM is an API to web pages and that's why programs like javascript can manipulate and change it.

To understand this easier, the concept of DOM Manipulation can be broken down into CRUD. CRUD basically stands for Create, Read, Update and Delete, but in the case of the DOM, we'll be performing these actions on the DOM Node so we have

Reading the DOM Nodes
Creating the DOM Nodes
Updating the DOM Nodes
Deleting the DOM Nodes

Reading the DOM nodes
There are many ways to read the DOM nodes but I will explain some of the most used ones. Some of the most used/important ones are:
• querySelector

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

Syntax: document.querySelector(‘<CSS Selector>’);

<!DOCTYPE html>
<html>
<body>

<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p> 

<p>Click the button to add a background color to the first element in the document with class="example".</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.querySelector(".example").style.backgroundColor = "blue";
}
</script>

</body>
</html>

In the example above, the element with the css selector inside the .queryselector() method is targeted, in this case, ".example". So in this example, the first element with the ".example" class name is targeted and the background is changed to blue when the code runs

Note that the querySelector() method only returns the first element that matches the specified selectors. To return all the matches, use the querySelectorAll() method instead.

Syntax: document.querySelectorAll(‘<CSS Selector>’);

<!DOCTYPE html>
<html>
<body>

<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p> 
<h3 class="example">this is a heading</h3>

<p>Click the button to add a background color all elements with class="example".</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.</p>

<script>
function myFunction() {
  var x, i;
  x = document.querySelectorAll(".example");
  for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
  }
}
</script>

</body>
</html>

So run the code and notice that with the querySelectorAll() method, all the elements with the CSS selector in question are targeted.

Creating the DOM Nodes
To create DOM Nodes, the createElement() is used. See example below:

<html>
<body>

<p>Click the button to make a BUTTON element with text.</p>

<button onclick="myFunction()">Try it</button>

<script>
 function myFunction() {
  let button = document.createElement("BUTTON");
  button.innerText = "CLICK us";
  document.body.appendChild(button);
}
</script>

</body>
</html>

Notice that to create a text, we used innerText or innerHTML property instead. Finally we added the button created to the DOM by using the appendChild() method with the element created as the parameter.

Updating the DOM Nodes

syntax: document.getElementById(id).innerHTML = new HTML

Using the innerHTML property is the easiest way to modify the content of an HTML element

See the example below

<html>
<body>

<h2>JavaScript can Change HTML</h2>

<h1 id="heading">Sup Guys</h1>

<script>
document.getElementById("h1").innerHTML = "I am the updated text!";
</script>

<h1>The paragraph above was changed by a script.</h1>

</body>
</html>

using the getElementById() method and the innerHTML property, the text in the DOM was updated to a new text. Try out the code in your editor and see the changes.

Deleting the DOM Nodes

Removing a DOM node is pretty straight forward, we simply access the parent node first, then from there, we delete the child.

Syntax: elementNode.parentNode.removeChild(elementNode);

See the example below;

<html>
  <head>
    <title>Manipualting the DOM</title>
  </head>
  <body>
    <p id="paraId">A paragrapgh</p>
  </body>
  <script>
    //accessing the node with id="paraId"
    let firstPara = document.querySelector('#paraId'); 

    //deleting the element node
    firstPara.parentNode.removeChild(firstPara);
  </script>
</html>

So you need to have the HTML code existing, then you introduce the script to see the content disappear.

Thanks for reading my article. For any concerns or questions, send me a DM @tech_bella on Twitter or leave comments below.

E go be! (Nigerian Pidgin version of saying bye)

THE DOM, THE DOM, THE DOM, What exactly is that?

Gloria Ojukwu (tech_bella) — Mon, 09 Dec 2019 08:35:47 +0000

I wrote HTML, CSS and Javascript codes up to 3 years ago without understanding the exact meaning of the DOM, in fact, I used to think my HTML code was the DOM, even though I made constant use of it. Weird right?

SO WHAT EXACTLY IS THE DOM?

The DOM stands for the Document Object Model.

The MDN Web Docs defines the DOM as "a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page."

Simply put, the DOM is an API to web pages. This is why programs like javascript can manipulate and change it.

You must have also heard some people refer to the DOM as a Tree.

From the image above, you can see the tree-like structure, people refer to it as a tree because the DOM starts with a single parent item that branches into children items and even more children items.

Note that the DOM is not;

the same as your HTML source code even though it is created from
there: this can be verified from an instance when you mistakenly leave
out a required element. You'll notice it in the DOM even though
you've left it out of your HTML. also after modifying the DOM with
Javascript, you'd also notice that the DOM is different from your HTML
source code.
the same as what you see in the Dev tools: If you're familiar with the
dev tools, you'd notice that it adds additional information that is
not in the Dom such as Pseudo-elements created using the ::before and
::after selectors, but these are not in the DOM.

In part 2 of this article, I will discuss how you modify the DOM with Javascript.

Summary:

The DOM is an API for HTML and XML documents. It represents the page so
that programs can change the document structure, style, and content.
The DOM is not the same as your HTM source code even though it is
generated from it.
The DOM is not the same as what you see in the Dev tools because the
dev tools contains extra information like the pseudo-elements (::before
and ::before)

Super thanks for reading my article about the DOM. Kindly follow me on twitter @tech_bella for interesting Tech tweets. You can ask questions or make comments in the comment section below.

DEV Community: Gloria Ojukwu (tech_bella)

THE DOM, THE DOM, THE DOM, What exactly is that?(part 2)

THE DOM, THE DOM, THE DOM, What exactly is that?