DOM Manipulation With JavaScript
I'm a recent graduate with a degree in Mechanical Engineering but I have a passion for web development. I have hands on in ReactJS and I have experience building responsive, user-friendly web applications using this framework. I gained hands-on experience in web development through several projects . I'm proficient in HTML, CSS, JavaScript, and I have experience working with various front-end technologies such as ReactJS, Redux, and Bootstrap. I'm also familiar with back-end development such as Node.js and Express.js.
In this article, we will discuss how DOM gives access to manipulate web pages.
Before going forward, you must have knowledge related to how to access HTML elements. please read DOM.
There are several ways to manipulate elements in the DOM, such as changing their content, attributes, styles, and position.
Changing Element Text
To change the content of an element, we can simply update its textContent or innerHTML property.
the innerHTML property sets or returns the HTML content of an element including all nested elements, tags, and text.
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
const list = document.getElementById("list");
console.log(list.innerHTML)
// return "<li>Item 1</li><li>Item 2</li><li>Item 3</li>" as a DOMString not a string
list.innerHTML += "<li>Item 4</li>";
// add a new *li* tag with **itme 4** as content
The textContent property sets or returns the text content of an element
The innerText property sets or retrieves the text content of an element
<ul id="list">
<li class="list__item">Item 1</li>
<li class="list__item list__item--hidden">Item 2</li>
<li class="list__item">Item 3</li>
</ul>
...
.list__item--hidden{
display: none;
}
...
const list = document.getElementById("list");
console.log(list.textContent);
// return Item 1 Item 2 Item 3
console.log(list.innerText);
// return item 1 item 3 because Item 2 is hidden by css style
Changing Element Attributes
To change the attributes of an element, we can simply update its attribute values using the setAttribute method. It sets the value of the specified attribute on an element.
The setAttribute(name,value) method takes two arguments: the name of the attribute and its new value.
removeAttribute(name) It removes the specified attribute from an element.
const img = document.querySelector('img');
img.setAttribute('src', 'path/to/new/image.jpg');
// to remove attribute
img.removeAttribute('src');
Changing Element Styles
To change the styles of an element, we can apply its style properties using the style object. The style object contains properties for all the CSS styles of an element.
const body = document.body;
body.style.backgroundColor = 'blue';
The position properties include position, top, bottom, left, and right.
const element = document.querySelector('.element');
element.style.position = 'absolute';
element.style.top = '100px';
element.style.left = '100px';
Adding and Removing Elements
we can use the createElement method to create a new element.
Here's an example of how to add a new <div> element to the <body> element:
document.createElement("p") // to create a paragraph element
document.createElement("div") // to create a div element.
you can also create a new text node using the createTextNode() method
const newText = document.createTextNode('I am the text for the paragraph!');
<!DOCTYPE html>
<html lang="en">
...
<body>
<h1 id="title">Home page title</h1>
<div class="container">
</div>
<script src="./index.js"></script>
</body>
</html>
const container = document.querySelector(".container");
// to select the container div
const newPara = document.createElement("p");
// to create a paragraph element
container.appendChild(newPara);
// to add a paragraph in the container div
appendChild()method add the element at the end of the "parent selected", it means , the element added withappendChild()method will be the last child of the selected parent.appendChild()method must always be called on an existing element
The append() method inserts a set of Node objects or DOMString (text) after the last child.
const container = document.querySelector(".container");
// to select the container div
const newPara = document.createElement("p");
// to create a paragraph element
// case 1: append a node
container.append(newPara);
// to add a paragraph in the container div , this looks like <div><p></p></div>
//case 2: append a DOMString
container.append("this is a text in container")
// the div will look like <div>this is a text in container</div>
//case 3: append multiple nodes or DOMString.
const secondPara = document.createElement("p");
const thirdPara = document.createElement("p");
const form = document.createElement("form");
container.append(secondPara, thirdPara, form, "this is a text in container");
Element.append() vs Node.appendChild()
Element.append()allows us to add DOMString, whileNode.appendChild()only acceptsNodeobjects.
Element.append()has no returned value, whileNode.appendChild()returns the appendedNodeobject
Element.append()can append several nodes and strings, whileNode.appendChild()can only append one node
