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

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)