10 JavaScript Methods For DOM Manipulation for Web Developers : JavaScript

To Specify the logical structure of the web pages, we web developers need to manipulate the DOM of the web page. Using this structure we could render HTML elements on the web page.

HTML defines the DOM structure. But in many cases we need to disturb this DOM structure to get the required output. We can JavaScript to manipulate this DOM structure.to add more functionalities to it.

HTML DOM STRUCTURE

Here are some functions using which you can manipulate the HTML DOM structure.

< 1 > querySelectore()

The querySelecor() methods returns the first element that matches with the mentioned name. If no match found it returns null.

Although getElementById() is a useful method, querySelector() and querySelectorAll() methods are used to target element based on any CSS selector freely which makes it more flexible.

Syntax:

var ele = document.querySelector(selector);

ele – First matching element or null (if no element matches the selectors)

selector – one or more CSS selectors, such as "#fooid", ".fooClassName", ".Class1.Class2", or ".class1, .class2"

Code Example:

In this example, first < Div > gets selected with the querySelector() and its colour gets changed. Test the querySelector() method in the following interactive demo. Just type a selector matching the ones you can find inside the blue boxes (e.g. #three ) and click the select button. Note that if you type .block then only first element will get selected.

< 2 > querySelectorAll()

Unlike querySelector() that returns only the first instance of all matching elements, querySelectorAll() returns all elements that match. those elements are returned as NodeList object that will be an empty object is no matching elements are found.

Syntax:

var eles = document.querySelectorAll(selector);

eles - A NodeList object with all matching elements as property values.

Code Example:

HTML:

<p>paragraph one</p>
<p>paragraph two</p>
<div>div one</div>
<p>paragraph three</p>
<div>div two</div>

JavaScript:

var paragraphs = document.querySelectorAll('p');for(
for(var p of paragraphs)p.style.color = '
p.style.color = 'blue';

< 3 > addEventListener()

Events refer to what happens to an HTML element, such as clicking, focusing, or loading, to which we can react with JavaScript. We can assign JS functions to listen for these events in elements and do something when the event had occurred.

There are three ways you can assign a function to a certain event.

If foo() is a custom function, you can register it as a click event listener (call it when the button element is clicked) in three ways:

HTML

<button onclick=foo>Alert</button>

JavaScript

var btn = document.querySelector('button');

btn.onclick=foo;

JavaScript

var btn = document.querySelector('button');

btn.addEventListener('click', foo);

Syntax:

ele.removeEventListener(evt, listener, [options]);

evt - The targeted event.
listener - Typically, a JavaScript function.
option - (Optional) An object with a set of Boolean properties.

Code Example:

Assign the foo() custom function as an event listener to any of the following events: input, click or mouseover & trigger the chosen event in the bottom input field by hovering, clicking or typing in it.

< 4 > removeEventListener()

The removeEventListener() method detaches an event listener previously added with the addEventListener() method from the event it is listening for.

Syntax

ele.removeEventListener(evt, listener, [options]);

Code Example:

Following the Code Example we used at addEventListener(), here we remove the click event listener called foo from the <button&gt; element.

JavaScript

btn.removeEventListener('click',foo);

< 5 > createElement()

The createElement() method creates a new HTML element using the name of the HTML tag to be created, such as 'p' or 'div'.
You can later add this element to the web page by using different methods for DOM insertion, such as AppendChild().

Syntax

document.createElement(tagName);

tagName – The name of the HTML tag you want to create.

Code Example:

To create a new paragraph element:
var pEle = document.createElement('p');

< 6 > appendChild()

The appendChild() method adds an element as the last child to the HTML element that invokes this method.
The child to be inserted can be either a newly created element, or an already existing one. In the latter case, it will be moved from its previous position to the position of the last child.

Syntax:

ele.appendChild(childEle);

childEle – The HTML element added as the last child of ele.

Code Example:

Letters from #a to #r are the child elements of the #parent-one, #parent-two, and #parent-three id selectors.
Check out how the appendChild() method works by typing one parent and one child selector name into the input fields below. You can choose children belonging to another parent as well.

< 7 > removeChild()

The removeChild() method removes a specified child element from the HTML element that calls this method.

Syntax:

ele.removeChild(childEle);

childEle – The child element of ele.

Code Example:

Here we remove the <strong> element we added as a child to the <div> tag at the Code Example for the previous appendChild() method.
div.removeChild(strong);

< 8 > replaceChild()

The replaceChild() method replaces a child element with another one belonging to the parent element that calls this method.

Syntax:

ele.replaceChild(newChildEle, oldChileEle)

newChildEle – Child element of ele that will replace oldChildEle.
oldChildEle – Child element of ele, that will be replaced by newChildEle.

Code Example:

Here the child element <strong> belonging to the <div> parent element is replaced with a newly created <em> tag.

HTML

<div>
<strong>hello</strong>
</div>

JavaScript

var em = document.createElement('em');
var strong = document.querySelector('strong');
var div = document.querySelector('div');
em.textContent = 'hi';
div.replaceChild(em, strong);

< 9 > setAttribute()

The setAttribute() method either adds a new attribute to an HTML element, or updates the value of an attribute that already exists.

Syntax:

ele.setAttribute(name, value);

name – The name of the attribute.
value – The value of the attribute.

Code Example:

Here we add the contenteditable attribute to a <div> by making use of the setAttribute() method, which will turn its content editable.

HTML

<div>hello</div>

JavaScript

var div = document.querySelector('div');
div.setAttribute('contenteditable', '')

< 10 > getAttribute()

The getAttribute() method returns the value of a specified attribute belonging to a certain HTML element.

Syntax:

ele.getAttribute(name);

name – The name of the attribute.

Code Example:

Here we alert the value of the contenteditable attribute belonging to the <div> element with the help of the getAttribute() method.

HTML

<div contenteditable=true>hello</div>

JavaScript

var div = document.querySelector('div');

alert(div.getAttribute('contenteditable'));