What the DOM?
Tags: javascript, beginners, programming
Published: 2022-07-15 01:02:49

so there I am in the middle of lecture, asking myself, what the **DOM???**
 
I recently started on a programmers journey. I enrolled in a coding bootcamp. you know, one of those intensive 15week courses that can change the trajectory of you're career.. I have been in need of a career change for a while. There is a saying "find something you love doing, and you'll never work again." Ha! the person that said that has clearly never taken a **Dom Manipulation** course.

So What the Dom?
**Dom** stands for _document object model_. 


If  you're like me, which i hope you're not. story for another time. you see things as they are, and question how they came to be?  The **Dom** does so so much.
It is the "middle layer" that presents the HTML, CSS and JavaScript loaded by the browser when we visit a page. It uses a tree of nodes or elements by the browser. Javascript can manipulate these nodes present on the DOM. Javascript is able to do this because the **DOM **is _object oriented_, meaning it has a set of _properties_ and _methods_ that you can change, add or create. It renders this information faster than the eye can see. lets break this down. for illustrative purposes lets imagine the **DOM** to be a like tree with branches, and roots and leaves.  


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02fskhrxf0bqhg78awo9.png)
 




The browser is made up of the _window object_, which has the document object as the first node. The _root element_, which is the HTML element, is the next node. The HTML element is further divided into the head tag and body tag. The head tag has children elements such as the _meta tags_ and _title tags_. The body also has children elements such as header tags and link tags.




https://www.w3.org/TR/WD-DOM/introduction.html for more information on DOM.

JavaScript DOM Elements

You can access these elements from the DOM and manipulate them using JavaScript to give a desired result.

Selecting Elements from the DOM
You can use different JavaScript DOM selectors to select various elements. These DOM selectors are document object methods; they pull the element that you need to access. You can change, alter, replace or style the accessed elements based on your preference.

Some JavaScript DOM selectors are:

`getElementById()` – Here, selection is based on the id name. This selector returns only the first matched element.
`getElementByClassName()` – This method returns all elements that match a specified class name.
`getElementByTagName()` – This method returns all the elements that match a specific tag name.
`querySelector()` – This method returns the first element that matches a specific CSS selector in the document.
`querySelectorAll()` – It returns all elements that match the specified css selector in the document.
Let’s get this more exciting by trying some examples:

<div id = “test”> Hello world </div>
<script >
console.log(document.getElementById("test"));
</script>
In this example, we used the getElementById method to access a div with the ID name ‘test’ and log it into the console. You can style this element based on your preference using the style property.

 //styling the accessed element
`document.getElementById('test').style.color = "pink";`
This automatically changes the text color to pink.

What if you want to change not just the text color, but the text content? You can use various properties to do this, here is one:

//changing the text content
document.getElementById("test").textContent=" Have a great day!";
We accessed the element in the examples above by using the getElementById() method, now let’s change the background color, using the querySelector() method:

document.querySelector("div").style.backgroundColor='blue';
For more information on DOM selectors: https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors 

Traversing the DOM
The DOM tree is a collection of nodes and elements, having a parent-child or a sibling relationship. Traversing basically means moving up and down the DOM and accessing and altering either parent or child of specific nodes or elements.

Properties used in traversing the DOM are the previous sibling, next sibling, child nodes, first child, and last child.

Let’s work with an example:

<div>
    <ul class="list">
        <li  class="list-item">first child</li>
        <li class="list-item">second child</li>
    </ul>
</div>
script>
  let list = document.querySelector("ul");
  let parentElement =list.parentNode;
  console.log(parentElement);
</script>
The console will return the div tag, because it is the parent element of the ul. We can add the style property to the parent element.

list.parentNode.style.color='yellow';
Check out this, for more information on traversing the DOM: https://www.w3.org/wiki/Traversing_the_DOM

Conclusion
CSS is all style it really brings flare to a page, JavaScript allows us to change the page and make it more dynamic. while DOM brings it all together. Thank you for stopping by