DEV Community: Falaye Promise

The Document Object Model (DOM)

Falaye Promise — Mon, 06 May 2024 22:52:17 +0000

Hey there! Let's jump into the world of the Document Object Model, or DOM for short. If you're already familiar with HTML, CSS, and JavaScript, that's great! But even if you're new to these, we'll cover the basics to get you started.

Imagine a website as a house. HTML is the blueprint, defining the structure of the rooms, doors, and windows. CSS is the interior decorator, making everything look snazzy with colors, fonts, and layouts. Finally, JavaScript is like the electrician and plumber, adding interactivity – like turning on lights (changing content) when you click a button.HTML, CSS and JS are the building blocks of the web.

Javascript and the DOM

So, you may ask, how does JavaScript make a webpage interactive? This is where the DOM comes in. JavaScript needs a way to understand the content of the webpage, which has been defined by HTML. The DOM acts as a bridge, creating a tree-like structure of all the elements on the page and making it accessible to JavaScript.

The DOM structure is hierarchical, like an upside-down family tree. The entire document is the root node, with branches for different elements. The cool thing is, most browsers have built-in DOM viewers (like the Elements tab in Chrome DevTools) to help you as the developer to visualize this structure.

The DOM can be navigated with different programming languages but of all javascript is the most common.

What can you do with the DOM?

Change content: Update text, add new elements, or remove existing ones.
Style manipulation: Control the look and feel of the page by changing fonts, colors, and backgrounds.
Respond to user interaction: Make elements react to clicks, hovers, or other user actions.

Structure of the DOM

We mentioned the DOM tree – a visual representation of the webpage's elements. Each element in the DOM is like an object with properties and methods that let you access and manipulate its content.

Nodes: The Building Blocks of the DOM Tree
Every element on the webpage is a node in the DOM tree. The document itself is also the root node. Nodes aren't limited to elements, though. They can also be text content or attributes within elements.

Nodes come with built-in properties you can use to navigate and access other elements in the DOM. Here are a few:

node.childNodes - returns a nodelist containing all the child nodes of the selected node
node.firstChild - returns the first child of the selected node
node.lastChild - returns the last child of the selected node
node.parentNode - returns the parent node of the specified node
node.nextSibling - returns the node that comes directly after the specified node in their parent nodelist
node.previousSibling - returns the node that comes directly before the specified node in their parent nodelist
node.hasChildNodes - a method. Returns true or false indicating whether the selected node has any child nodes

The Document Object: The Entry Point
Remember the document being the root node? This "document object" also acts as the entry point for accessing other nodes in the DOM tree. It has its own methods and properties for manipulating the webpage content:

querySelectorAll - Grabs all elements matching a CSS selector. The selector could be class, ID, tag name, or even a combination of these.It returns a NodeList containing all the elements in the document that match that selector. Very powerful! because it can query class, id or tag.
createElement - creates a new HTML element of the specified type (e.g., "div", "p", "h1").
getElementById - Gets an element by its unique ID. It's a quick way to target a single element with a known ID. Very fast!
getElementsByTagName - Gets all elements with a specific tag name. It returns a NodeList containing all the elements in the document with that specific tag name.
appendChild - Adds a new child element to the end of another element.
innerHTML- Gets all the content inside an element.
addEventListener - Makes an element listen for events and run code when they happen. The listener function is triggered when a specific event like a click, mouseover, or keypress occurs on that element.
replaceChild- Takes two nodes as input. Replaces an existing child node of a parent node with a new child node.
insertBefore - Takes two nodes and a reference node as input. Inserts a new child node before a specified reference node within the same parent
setAttribute - Changes or sets the value of an element's attribute. This method sets the value of a specified attribute on an element.

Now you've got a foundational understanding of the DOM! We explored its role in bridging JavaScript and HTML, how it structures the webpage content, and how you can use it to manipulate the webpage dynamically. With this knowledge, you can start building more interactive and engaging web experiences!

Decoding CSS: Mastering Cascade, Selectors, and Specificity for Smarter Styling.

Falaye Promise — Thu, 18 Apr 2024 22:50:52 +0000

In the ever-evolving world of web development, mastering CSS (Cascading Style Sheets) is crucial for creating visually appealing and technically sound websites. At the heart of CSS lie three fundamental concepts: the cascade, selectors, and specificity, and understanding these concepts is key to writing efficient and effective style sheets. This article delves deep into these concepts, explaining each one with clarity and providing examples.

CSS SYNTAX

Generally, a syntax is a set of rules that define what the various combinations of symbols mean. In computer science, a syntax is essentially a set of keywords and characters that a computer can read, interpret, and convert into tasks that it knows it needs to do.
They are like recipes which have to be followed to get the desired result. If a particular step in the recipe is missed, the meal wouldn’t turn out as it should, this is the exact same thing when an incorrect syntax is used in CSS and even programming languages in general.

A computer program is a set of instructions written in a programming language that tells the computer what to do. Like humans, computers cannot get a sense of what instructions you are passing across if the instruction is not given in its entirety. The closest thing you can get to this are Integrated Development Environments that can point out where an error is from, but even with this, you still have to write the correct syntax. A coding syntax must be exact and specific if not, there will be errors.

To understand the CSS syntax, let us learn about CSS rulesets first. The structure of CSS rule set is

P {
Color:red
}

The above is known as a ruleset. Where P is the selector, color is the rule property and red the property value. Color:red is referred to as a declaration.
CSS rulesets are the fundamental building block of stylesheets. This means a stylesheet contains lots and lots of rulesets.

The syntax of a CSS rule set

Each rule set must be wrapped in curly braces.
A colon should be used to separate a property from its value.
A semicolon is used to separate one property declaration from the next.
Multiple selectors are separated by commas.

SELECTORS

CSS selectors are patterns used to select and style HTML elements. In the ruleset example given earlier, it is seen that CSS rules are usually added to selectors to specify the styling of the selected element. CSS selectors go hand in hand with CSS combinators which are symbols that specify the relationship between selectors.

CSS selectors allow elements to be targeted based on their type, class, id, attributes among others WHILE combinators allow elements to be targeted based on their position in relation to other ones. CSS combinators gives more precision in selecting an element(s). There are different types of selectors and combinators that have been made available by CSS.

Types of selectors

Element or type selector - target HTML elements by their type.
In this example, the h1 element selector is used in the CSS rule. This rule will style all h1 elements on the page.

<h1>Element Selector</h1>
<p>Targets HTML elements by their element type (tag name)</p>
<h1>Id Selector</h1>

h1 {
    color: greenyellow;
}

Id selector - Targets a unique HTML element by its assigned ID.

<h1>Element Selector</h1>
<p>Targets HTML elements by their element type (tag name)</p>

<h1>Id Selector</h1>
<p id="text">Targets HTML elements by their Id</p>
<p>This paragraph won't be affected by the ID selector</p>

h1 {
    color: greenyellow;
}
#text {
    color: red;
}

Class selector - Targets HTML elements by their assigned class

<h1>Class Selector</h1>
<p class="blue">targets HTML elements by their class</p>
<p>More than one element can have the same class</p>
<p class="blue">Classes are used to group elements to which same style wants to be applied</p>

h1 {
    color: greenyellow;
}
.blue {
    color: blue;
}

Attribute Selector - Targets HTML elements based on the presence of a specific attribute and optionally its value

<h1>Attribute Selector</h1>
<form action="">
    <label for="name">Name:</label>
    <input type="text" name="" id="">
    <br>
    <br>
    <label for="email">Email:</label>
    <input type="email" id="">
    <br>
    <br>
    <label for="password">Password:</label>
    <input type="password" id="password">
</form>

h1 {
    color: greenyellow;
}
input[type="text"] {
    background-color: yellow;
  }
input[type='password'] {
    background-color: palevioletred;
}

Pseudo-class and pseudo-element selectors -Pseudo-class selectors target elements based on their state or user interaction. Pseudo-Elements selectors target specific parts of an element and allow you to style them independently.

In the example below, the :hover pseudo-class is used to style an element when the user hovers over it with the mouse. The ::first-line pseudo-element targets the first line of text within an element.

<h1>Pseudo-class Selector</h1>
    <a href="#">Hover on this link to see the color change</a>
    <h1>Pseudo-Element Selector</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
       Est suscipit sequi vitae illo corrupti aspernatur
       necessitatibus, ex dolorem aliquam itaque ad provident 
       minima ea eius tenetur dicta laudantium omnis. Recusandae? 
       Lorem ipsum dolor sit amet consectetur adipisicing elit. 
       Voluptatibus, numquam beatae architecto nostrum voluptas 
       dolore sunt blanditiis deleniti temporibus, saepe dolores 
       nam quaerat cumque? Odit officia iste aperiam obcaecati 
       sunt?
    </p>

p::first-line {
    color: #ff0000;
    text-transform: uppercase;
  }

a:hover {
    color: #FF00FF;
  }

Universal selector - target all HTML elements on a page.

<h1>Universal Selector</h1>
<div>
The universal selector targets all HTML elements on the page
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est suscipit sequi vitae illo corrupti aspernatur </p>
<p>necessitatibus, ex dolorem aliquam itaque ad provident minima ea eius tenetur dicta laudantium omnis. Recusandae? </p>

* {
    color:crimson;
}

Types of combinators

Descendant combinator - denoted by a whitespace “ ”
Child combinator - denoted by the greater than sign >
Adjacent sibling combinator - denoted by the addition sign +
General sibling combinator - denoted by the tilde symbol ~

CASCADE AND SPECIFICITY

Sometimes when working on a project, directly or indirectly it is possible that you set two or more declarations with different values for the same element. This is known as conflicting rules. And more often than not, it is the value you do not want rendered that gets rendered(a typical case of CSS cssing). The understanding of specificity and cascading is required in this context as they are both the mechanisms controlling which declaration is “preferentially” picked over the other.

CSS specificity and cascade determines how styling is applied to HTML and how styling conflicts are resolved. Rule sets are said to be conflicting if and ONLY IF the value of the rules are different. For example if color is set to red in two different rulesets for a single element, they are not conflicting.

Cascading depends on three things, in the order of increasing importance, they are:

Source order

This means that when there is more than one ruleset declaration with the same weight targeted at an element, the one nearer to the element is applied to it. It is important to note that source order only applies when the specificity or weight of both rules is the same.

Specificity

This moves a step further than source order by applying to ruleset declarations with different weights. Ideally, different selectors have different specificity scores. A value, usually a number, is assigned to each type of selector by the browser. It is these values which when summed up gives the specificity score of a ruleset and determines which one will be picked over the other.

Below are the different types of selectors and their specificity scores:

Universal selectors and combinators = 0
Type(Element) ad pseudo-type selector = 1
Class, pseudo-class and attribute selector = 10
Id selector = 100
Inline styling = 1,000
!important flag = 10,000

The specificity score is determined based on the number of elements that each selector can point to on a page. For example the universal selector points to all elements on the page and inline styling just points to a particular element. Even without the numbers, you have an idea which is more specific than the other.

NOTE: Each selector has its specificity level that cannot be overwritten by another selector with low specificity. So, even if you try using 200 class selectors for an element and it has one id selector, the id selector will be picked over the 200 class selectors.

Importance

The !important is a flag which when added to a declaration, will override any other selector with a declaration that is conflicting no matter the type. Its specificity score is 10,000.

In conclusion, it is very evident now that by understanding and applying the right selectors and rules, developers can control the styling of web elements with precision, ensuring that the desired styles are applied in the right context. CSS may initially seem daunting, but with enough practice, mastering its core concepts is possible.