What is Dom??

Document Object Model is what the DOM in javascript's dom-manipulation stands for. A tree-like structure called the Document Object Model (DOM) shows the hierarchical relationships between different HTML components. It is simply a tree of nodes produced by the browser, which makes sense. JavaScript may be used to modify the particular attributes and methods that each node possesses.

Dom Manipulation

The first step of dom manipulation is selecting the elements or accessing them or finding them and the second is to manipulate them. The elements can be manipulated with the help of various methods. We can also edit the content or update the value of attributes with the help of various dom properties. Dom manipulation can help the user to interact with the web, there are various actions that can be performed.

Selecting elements

There are various ways to select elements in dom , let's have a look at them :

• getElementById - It helps to select element based on their respective ID.

• getElementByTagName - It helps to select element based on their respective TagName.

• getElementsByClassName - It helps to select element based on their respective given class name .

• querySelector - When a selection is provided, the document's first element that matches that selector is returned by the selector. It only displays the element that meets one or more of the provided CSS selectors.

• querySelectorAll - Using one or more selectors, the static NodeList of elements that match is returned by the function selectorAll. An empty NodeList is returned if no element matches.

Traversing elements

We can traverse or move around in some of the following ways:

• The first way can be getting the node of the parent element

  

• The second is to get the child element

  

• And third way to traverse is getting the siblings of an element

  

Manipulating elements

When building a web application with HTML and JavaScript, DOM manipulation is a crucial component. To alter or change an HTML page that will be shown in a web browser, one must interact with the DOM API. This HTML page is editable, meaning that components can be added, removed, updated, rearranged, etc.

By modifying the DOM, we can build web apps that can change the layout of a website page without reloading it and update the data on it without doing so. Items in the document can be removed, moved, or rearranged at any time.

Here are some of the important ways to manipulate the dom 👇

Let's manipulate the style of the element

This helps to change the height or width of the element , or you can also change the color of the element . We can set the visibility we can set display to none to hide the elements and there are many other stuff which can be done

• style property – get or modify an element's inline styles.

• getComputedStyle() –return an element's calculated style.

• className property –provide a list of CSS classes, separated by commas.

• classList property – alter an element's CSS classes.

• Element’s width & height – retrieve an element's width and height

Event Handling

Event handling has been a component of dom manipulation in javascript since the language's inception. When you move your mouse over a link, click on it, or submit a form, you are performing precise, user-imitated actions on the webpage. Our scripts may now be more interactive and conduct different tasks based on the user's thanks to event handling.

• unload event – show you how to handle the unload event that fires when the page is completely unloaded.

• Mouse events – how to handle mouse events.

• Keyboard events – how to deal with keyboard events.

• Scroll events – how to handle scroll events effectively.

• scrollIntoView – learn how to scroll an element into view.

• Focus Events – cover the focus events

Conclusion:

Here we come to the end of this article , hope you enjoyed reading it , this article was all about dom in javascript for beginners, how to select them , and modify them with the help of various methods and properties.