DEV Community: Asmaa Hamdy

Navigating the Web: A Guide to the DOM

Asmaa Hamdy — Tue, 07 May 2024 21:10:03 +0000

What is the DOM?

If you have been learning HTML and CSS then moving to JavaScript, you might have heard about the DOM(Document Object Model). Maybe with a vague understanding of what it means.
Today we will break down what the DOM actually is.

All the website on the internet rely on three key components HTML, CSS and JavaScript. These need to work together to make the magic happen. HTML lays the basic backbone and CSS make things look pretty and JavaScript achieve interactivity.
JavaScript can add more HTML to a page without the need to reload it and it can detect when an event happens on the page like a mouse click or a key press.

But how exactly does JavaScript have access to HTML elements? It's the DOM!
The DOM is a tree-like representation of the web page that gets loaded into the browser. If we are to change something in HTML, the DOM changes as well. The browser takes care of that synchronization.

For everything inside the HTML file, there is a different representation for it as an object or node; that way, a programming language like JavaScript can interact with the page.

The DOM is a web API that's part of the browser and is used to build websites.
.
The top object of the DOM holds the entire page is the Document object which nests inside the rest of the objects representing the page.

Traversing the DOM:

Document.querySelector(selectors): This method will return an element object of the first element in the document that matches the specified selector. Here's an example:

as you can see, I used the element selector to get the h1 element.

Document.querySelectorAll(): This method returns a NodeList of all elements in the document that match the specified CSS selector. Here it will return a collection of two p element nodes.

Document.createElement(): This method creates a new HTML element with the specified tag name.
Element.innerHTML: This property sets or returns the HTML content inside the selected element.
Element.setAttribute(): This method sets the value of a specified attribute on the current element.
Element.getAttribute(): This method returns the value of a specified attribute on the current element.
EventTarget.addEventListener(): This method attaches an event listener to the specified event target (e.g., a DOM element).
HTMLElement.style: This property represents the inline style of an HTML element and can be used to get or set CSS properties.
Node.appendChild(): This method adds a new child node to the end of the list of children of a specified parent node.
window.onload: This event is fired when the initial HTML document has finished loading.
window.scrollTo(): This method scrolls the window to a particular set of coordinates in the document.

and many more others...

In summary, the DOM is a crucial part of how JavaScript interacts with and manipulates web pages. It provides a tree-like representation of the HTML structure, allowing developers to access and modify individual elements programmatically.
The DOM is a fundamental concept in front-end web development, as it forms the bridge between the static HTML/CSS structure and the dynamic, interactive functionality powered by JavaScript. Mastering DOM manipulation is an essential skill for any aspiring web developer, as it unlocks the ability to create engaging and user-friendly web experiences. With the knowledge provided in this article, you now have a solid foundation to continue exploring and leveraging the power of the Document Object Model in your future projects.

CSS Specificity: Why Your Div Isn't Blue? 👩‍💻

Asmaa Hamdy — Thu, 18 Apr 2024 21:58:15 +0000

Being someone who leans more towards logic and coming from desktop development, CSS felt (and sometimes still feels) like a mysterious beast!

Early on, I struggled to understand why my styles weren't always working. Then I discovered the concept of CSS specificity. It explains how browsers resolve conflicts when multiple rules target the same element. Basically, the browser has a set of criteria to determine which style rule takes precedence!

To demonstrate here are five different divs:

I have targeted all of them with element selector and gave some background color and bottom margin.

div {
  width: 100%;
  height: 100px;
  margin-bottom: 2px;
  background: blue;
}

How specificity work?

I see CSS specificity and place value in math both determine which rule takes precedence. In place value, the leftmost digit holds the most weight, similar to how an ID selector in CSS has a higher specificity than a class selector. Just like how a number with a 3 in the hundreds place is greater than a number with a 3 in the tens place, a more specific CSS rule will override a more general one.
so let take this number: 00000

As Shown in the image above if we have an element or a pseudo-element in the selector, we get the value of 1 in the units place: 00001 and the more we add we add them to the units value so for example:

div a {
  width: 100%;
 }

we have div and a and both of them are elements so we get score of 2: 00002. and the pseudo-element has the same weight of 1 so this:

div::after {
  width: 100%;
 }

will also count as 2.

The tens place Value:

The tens place we have the class and pseudo-class selectors.
so if I did this:

.element {
  background: red;
}

because this is a class selector the value becomes 10: 00010
so it takes precedence over the element selector so we see all divs with the class element are now red.

and if we changed our minds and do this:

.element {
  background: red;
}
.element {
  background: green;
}

Because both selectors have the same specificity, the last one will be applied as you see here.

If we want to first one(Red) to be applied we shall increase it's specificity for example:

div.element {
  background: red;
}
.element {
  background: green;
}

Adding the div will increase the value to 11 so the first 4 divs will go back to red.

Another example with data attribute:

The last selector has the same specificity value as the one in line 7 but because it's last it will be applied over the element with the data attribute of name.

And the more classes we add to the selector, the more specificity value we're adding
For example the selector on line 7 will have the value of 21 so it would take precedence:

The hundreds place Value:

This is reserved for id selector, it has the value of 100 00100

If we added classes selector to it or pseudo-class selector that would add to the tens place.

The Thousands place:

This is for the inline style tag. It takes the specifitcty value of 01000

The !important exception:

Having the !important flag, the important declaration is applied no matter the specificity.

Using !important to override specificity is considered a bad practice and should be avoided for this purpose. Understanding and effectively using specificity and the cascade can remove any need for the !important flag.

In a nutshell, the more specific the selector is the more it will have precedence over other conflicting selectors.

Here are some resources for CSS specificity weight calculations:

The CodePen demonstrated above
Specificity Calculator.
CSS tricks.
Specifishity 😂: