DOMinating the DOM

Would you believe me if i said that the DOM is just a visual representation of our HTML ? This means we can change the document structure, style and content without impacting our hard coded HTML 🤯.

Mind blown

Well here you are, having stumbled upon my blog, maybe your’e a fellow Flatiron student beginning, in the middle of or just hearing me present my blog for Mod 3.
Now i am not one to panic, but the DOM can be pretty intimidating. With no prior knowledge it might all sound like a lot of random acronyms. It’s just a matter of contextualizing and executing, in no time you'll be DOMinating that DOM.

What is the DOM ?

DOM is an acronym for the Document Object Model . The idea of a document object model stems from its main function: creating a visual representation of our HTML code.In laymen's terms this means, what we see projected is not our hard coded HTML but a representation of it.

The representation is comprised of a document and the objects that inhabit it. The objects are HTML elements that we will target and manipulate to create dynamic actions.None of our hard coded HTML will be impacted, its simply a representation of it.

A fun way i read about understanding the HTML/DOM relationship is imagining an old projector they had in schools.

A relic. I had completely forgotten about these.

The metaphor went like this :

1. The translucent paper placed on the projector is our HTML.
2. The projector is our browser , churning out HTML into DOM representation.
3. The projection on the board is the DOM representation of our HTML.
4. The notes the teacher would write on the sheet is us trying to manipulate our DOM.

Essentially no matter what changes we make to our paper our initial text will never be fully altered, it will maintain its initial structure and format.

DOM is an API

I also want to point out that the DOM is actually an API. It was not specifically designed for a single coding language(JS) but multiple coding languages. When HTML is served to a browser, it is parsed. This parsing converts the marked up content to an internal, tree structured, object graph, called a Document. The browser provides a collection of methods and properties through which this object graph can be read or manipulated. Each browser provides the same methods and properties regardless of its internal object graph.These methods and properties collectively form an application program interface(API).

Targeting, manipulating and slapping it on the DOM.

When we begin attempting to manipulate our DOM there are two things that come straight to my mind at-least.

1. How do i target the object?
2. How can I achieve the desired state I want ?

Having a goal and a plan make manipulating the DOM far more manageable. Learning how to first target elements and then how to apply changes give us the tools to DOMinate the DOM.

Target

Anything we intend to manipulate we need to have access to. In javascript we have a couple of methods that will do precisely that. The methods search our DOM for a value and return the associated object. The values can be tags, classes, IDs, parent-elements, etc.

Getting Elements by Methods

1. document.getElementByTagName(‘tag-name’)
2. document.getElementById(‘#AmazingBlog’)
3. document.getElementByClassName(‘.className’)

Query Selector Methods

1. document.querySelector(‘tagname’ || ‘#amazingBlog’ || ‘.className’)
2. document.querySelectorAll(‘tagname’ || ‘#amazingBlog’ || ‘.className’)

When invoking querySelectors or getElementsBy make sure to assign them to a const or let. By doing so we will be able to ruse our targets throughout our code.

Manipulating style and content

Now that we know how to target our content we can start manipulating it. Somethings we can do are adjust an object’s style, change text content or add a new element to our structure.

Styling

In order to style objects, we can do two things. We can use a .style method or create a class in our CSS and assign or toggle it via our JavaScript.

In using .style we can target an object’s CSS styles and apply any CSS property we want to it. However, when these are applied to our objects they're applied as inline styles.

By assigning it to one of our targeted objects such as a header for example, we could adjust. the background color when the function is executed. The code for that would look like this .

Our headers assigned to. variable. A function for changing the background is made. Background is adjusted within the function. Function is invoked in the bottom.

Text Content

Adjusting the text content follows a similar structure to .style. First we target our content then we can adjust their text content by implementing .textContent.

After assigning it to a variable we are able to change it. Simple fun and you've made the changes.

Appending Content

When it comes to adding to our DOM, we first need to create something, target a location where it will go, add content and then place it there.

Step 1: We use the .createElement to create an element.

Step 2: Target Location: With the methods we have, easily doable.

Step 3: Add content to our new element using .textContent.

Step 4: Append to the location: We can use a few methods to achieve this but it depends on where we want it within our main-content. In this case, we want to add it to the end of our content so we’ll use the .append method to do that.

Just like that our new p was added to our main-content. That intimidating DOM may not be as intimidating anymore. You have the knowledge and methods to dominate the DOM in subtle yet powerful ways. There are many more ways to manipulate the DOM and discovering them will only help you grow.

SLAP IT ON THE DOM

WOOH ! Get to it , there is nothing you cant do.

Sources

Why is the DOM itself referred to as an API?

Introduction to the DOM

What is the DOM? | CSS-Tricks