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 ?

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

Targeting, manipulating and slapping it on the DOM.

  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

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

Styling

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

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

Appending Content

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