JavaScript DOM manipulation
Tags: javascript, webdev, devops
Published: 2020-12-16 14:08:44

The Document Object Model plays a dominant role for all the Web Developers out there, isn't it? Frequent manipulation of the DOM should be an art in the fingertips of the developers. But why is DOM manipulation becoming a key minister in the court of Web developers?

The browsers use the Object Model to structure the web pages logically, which in turn contribute to the elements of HTML on the screen. In simple words, DOM is a structural representation of the objects that are subjected to changes (both in content and structure) on the web. So DOM is nothing but the lord of the objects in your web pages.

<h1>Why JavaScript?</h1>

As a developer, you might be aware of the fact that jQuery is a reliable source for the selection of elements. Though an undeniable fact, how do we consider it as the answer for the changing elements or styling elements or even creating elements on the web page? JavaScript has the option for all the above modifications. 

The browser while creating the representation of the documents of HTML and CSS known as the Document Object Model creates a provision that enables the JavaScript to seep in and make the required modifications and style of the website. So don't you think that JavaScript is quite capable to ease your work and lead you to a better result?

<h1>How do I manipulate DOM?</h1>

Manipulating DOM using JavaScript has a number of methods. But an efficient Programmer starts with finding out the element for manipulation.

* Finding an element isn't a herculean task if you can access the element with the following methods:

<b><code>.querySelector()</code></b>: This method stands in par with the first element matching either one or more CSS selectors.

Usage:
<div class="highlight"><pre class="highlight shell"><code>document.querySelector('#tagname')

<span class="c">The '#tagname' option picks the first '#tagname 'tag found in the HTML document</span>
</code></pre></div>

<b><code>.getElementById()</code></b>: If you require a single element by id then this method would be the right choice for your action.

Usage:
<div class="highlight"><pre class="highlight shell"><code>document.getElementById('#element') 
<span class="c">Returns the first element that has the id of #element</span>
</code></pre></div>

<b><code>.getElementsByClassName()</code></b>: This methods aids in getting two or more objects resulting in an array of elements.

Usage:
<div class="highlight"><pre class="highlight shell"><code>document.getElementByClassName('element') 
<span class="c">Returns the array</span>
</code></pre></div>

<b><code>.querySelectorAll()</code></b>: It is similar to the .querySelector() method. This methods selects all the tags desired by the programmer.
		
Usage:
<div class="highlight"><pre class="highlight shell"><code>document.querySelectorAll('elementtag')
<span class="c">Return all the element tags of the document </span>
</code></pre></div>

* Creating and deleting elements would be another efficient call which can be done through the following methods:

<b><code>.createElement()</code></b>: Taking a tag name as input, this method creates a new element.

Usage: 

<div class="highlight"><pre class="highlight shell"><code>document.createElement(‘tagname’)
<span class="c">creates a new element which can be accessed with the tag name given here</span>
</code></pre></div>

<b><code>.removeChild()</code></b>: This method deletes the specific child element.

Usage:

<div class="highlight"><pre class="highlight shell"><code>ele.removeChild(childEle)</div></pre></div>

* Appending a new child element to the previously existing element or a newly created element can be done by <code>.appendChild()</code>
		
Usage:

<div class="highlight"><pre class="highlight shell"><code>ele.appendChild(childEle)
</code></pre></div>

* If you are interested in styling, try out the following command:

<div class="highlight"><pre class="highlight shell"><code>document.getElementById(id).style.property = new style
</code></pre></div>

* Replacing an element doesn't take much effort if the following method is executed.

<div class="highlight"><pre class="highlight shell"><code>x1.parentNode.replaceChild(x2, x1)
<span class="c">newDiv is the new child to be replaced while the div is the existing child that is to be replaced</span>
</code></pre></div>

* Handling events is also another provision given to JavaScript by DOM.

<b><code>.addEventListener()</code></b>: Assigning event listeners to your HTML elements can be done using this method.

Usage: 

<div class="highlight"><pre class="highlight shell"><code>document.getElementById(“btn”).addEventListener(event,ele)
</code></pre></div>

* HTML code can have its events defined by using the attributes on tags.

Example:

<div><pre class=" language-javascript"><code class=" language-javascript">
<span class="token operator">&lt;</span>h1 onclick<span class="token operator">=</span>”<span class="token keyword">this</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> ‘Good to see you!<span class="token operator">!</span>’”<span class="token operator">&gt;</span>Hello!<span class="token operator">!</span><span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span>

<span class="c">After clicking on the 'Hello!' button, you can comfort your user with the former message on the click of a mouse</span></code></pre></div>

DOM manipulation has always been an interesting topic for all the developers, be it the students or the professional web developers. jQuery isn't a requirement for the DOM manipulation but is agreeably a good choice though JavaScript to can be considered for simplification of complex manipulation tasks.

<h2>Key Takeaways</h2>

* <a href="https://www.learn-js.org/">Learn JavaScript from scratch</a>
* <a href="https://christianheilmann.com/stuff/JavaScript-DOM-Cheatsheet.pdf">Most common DOM methods</a>

<code><p><br>
<footer style="height:auto"><h3>*Follow our community for more goodies, stickers,<br>t-shirts*</h3><table><tr><td><a href="https://gitlab.substack.com/p/coming-soon">![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hplp6opfpywirwur2vmz.png "Official Website")</a></td><td><a href="https://twitter.com/GitlabC">![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/00qhd8v9ma2t2l2xv4xh.png "Twitter")</a></td><td><a href="https://www.meetup.com/GitLab-Meetup-Coimbatore/">![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aqq6pi897bk687d3kwwa.png "Meetup Community")</a></td><td><a href="https://www.linkedin.com/groups/8955040/">![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8u4886rik46g1bvvrx8d.png "LinkedIn")</a></td></tr></table></footer></p></code>