DEV Community: Kingsley Uwandu

Best Practices for Writing Clean and Maintainable Html, Css, and JavaScript Code

Kingsley Uwandu — Mon, 03 Jun 2024 09:03:17 +0000

Every developer should know this: Building well-structured and lasting websites require more than just functionality. For instance, you are tasked with the responsibility of adding a new feature to an existing website, or fix a bug in a critical application. But, in this situation when you get in to the codebase, you find a rough and scattered HTML, a difficult to understand CSS, and disorganized JavaScript - The code is hard to read and understand, let alone to modify; making you spend more hours trying to understand what each piece does. All these, only to realize that making any change risks affecting something else. This is many developer’s experience. They, at some point in their career, have experienced the frustration of dealing with unclean and poorly structured code. This does not just slow down development – it also leads to increase in bugs, high maintenance costs, and worst, a frustrating work environment.

However, all these can be avoided with some straight-forward and simple coding practices for writing clean and maintainable HTML, CSS, and JavaScript. Following these practices ensures efficient development, improves productivity, easier collaboration, and a long-term and better user experience.

Html Best Practices

a. Use Semantic HTML:

Semantic HTML involve using HTML tags that gives meaning and purpose of the content they enclose. Elements like <header>, <nav>, <article>, <section>, and <footer> are semantic – They provide useful information to browser, search engines, and technologies that assists in the different roles of a webpage. This practice leads to:

Improved Accessibility: By providing meaning and context to the content structure, Semantic elements like <header>, <nav>, <main>, <article>, <section>, and <footer> helps certain technologies, such as screen readers to interpret the page structure more accurately. This allows visually impaired users to understand the layout and navigate the content more efficiently. For example, a <button> is recognized as a clickable button, and a screen reader will know this. This informs users who depend on these technologies that they can interact with the button using their keyboard.
Help Users navigate a webpage: When navigating a webpage using the Tab key, the browser will move focus to interactive elements like links (<a>), form controls (<input>, <button>, etc.), and any element with a tabindex attribute. Tags like <button> and <a> are keyboard accessible. When you press Tab, the focus will automatically move to these elements, allowing users to interact with them using the Enter or Space keys.
Keyboard Navigation: Semantic tags come with built-in keyboard behaviors. For instance, for <button>, pressing Enter or Space activates the button, and for <a> (with an href attribute), pressing Enter follows the link.
Non-semantic elements (like <div> or <span>) do not have these built-in behaviors. You would need to add additional JavaScript to try this functionality, which likely is prone to error, and harder to maintain sometimes.

b. Logical Nesting of Elements:

Logical nesting ensures that elements are nested in a way that shows their relationships and hierarchies within the content. This practice helps maintain a clear and orderly document flow. This can be achieved in two ways:

Hierarchical Structure: Use elements in a hierarchical manner to indicate their level of importance and relationship to other content. For example, heading tags (<h1>, <h2>, etc.) should follow a logical order.

<article>
  <h1>Main Title</h1>
  <section>
    <h2>Subsection 1</h2>
    <p>Content for subsection 1.</p>
  </section>
  <section>
    <h2>Subsection 2</h2>
    <p>Content for subsection 2.</p>
  </section>
</article>

Nesting child into parent: Proper nesting of child elements within their parent elements is one of the best practices for writing HTML code. It helps to improve the readability.

Parent element: An HTML element that contains other elements within its opening and closing tags.

Child element: An HTML element that is nested within another element (parent element).

For example:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

In the above code snippet, the <nav> element is the parent element.<ul> element is the child element of the <nav> element. While the <li> elements are child elements of the <ul> element, the <a> elements are child elements of the <li> elements. The arrangement improves code readability, ensure easier maintenance, and reduce code error.

c. Indentation and Formatting:

Indentation and Formatting do not affect how the web browser interprets the code itself, but they provide some benefits to anyone who needs to read or modify the code. While Indentation creates a visual hierarchy, clearly showing how elements are nested within each other, Formatting, similar to paragraphs and spacing in written text, separates different parts of the code, making it easier to differentiate between elements, attributes, and content. Both practices improve code readability.

Example of indentation:

<div class="crown">
  <h2>Section Title</h2>
  <p>This is a paragraph within the section.</p>
</div>

Line Breaks: Line break is an example of formatting. Use line breaks to separate logical blocks of code, such as between different sections or elements. For example:

<header>
  <h1>Website Title</h1>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content goes here.</p>
  </article>
</main>

<footer>
  <p>Footer content goes here.</p>
</footer>

d. Clear and Descriptive Naming:

Using clear and descriptive names for IDs and classes helps others understand the purpose of each element quickly. Choose meaningful names that explain the content or purpose of the elements they refer to.

<div id="main-header" class="header">
  <h1>Website Title</h1>
</div>

<nav class="main-navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Consistent Naming Conventions: Stick to a consistent naming convention. For example, if you are using kebab-case for classes and IDs, use throughout.

<div class="content-wrapper">
  <section class="main-section">
    <h2 class="section-title">Section Title</h2>
    <p class="section-content">Content for this section.</p>
  </section>
</div>

e. Separation of Files:

This means keeping different types of code separate. HTML code should be in Html file, stylings in Css file, and Javascript in Javascript files, which makes it easier to maintain and read the code.

HTML for Structure: Use HTML primarily for defining the structure and content of the web page, avoiding inline styles or scripts.

<article>
  <h2>Article Title</h2>
  <p>This is the content of the article.</p>
</article>

CSS for Styling: Keep CSS in separate files or within <style> tags to handle the styling of the page. Example (external CSS file):

.article {
  font-family: Arial, sans-serif;
  color: blue;
}

JavaScript for Behavior: Place JavaScript in separate files or within <script> tags to manage the behavior and interactivity. Example (external JavaScript file):

document.addEventListener('DOMContentLoaded', () => {
  const article = document.querySelector('.article');
  article.addEventListener('click', () => {
    alert('Article clicked!');
  });
});

f. Consistent Document Flow:

A consistent document flow ensures that the content is presented in a logical and orderly manner. Organize your HTML to flow from top to bottom. This shows the reading order better:

<header>
  <h1>Website Title</h1>
</header>

<main>
  <section>
    <h2>Main Content</h2>
    <p>This is the main content area.</p>
  </section>

  <section>
    <h2>Secondary Content</h2>
    <p>This is the secondary content area.</p>
  </section>
</main>

<footer>
  <p>Footer content goes here.</p>
</footer>

g. Comments and Documentation:

Adding comments and documentation helps explain the purpose and structure of the code, making it easy for future maintenance and collaboration. Use meaningful comments to explain the purpose of each sections. For example:

<!-- Main navigation menu -->
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<!-- Main content area -->
<main>
  <section>
    <h2>About Us</h2>
    <p>Information about our company.</p>
  </section>
</main>

These comments should be used to section and group related parts of the code, making it easier to navigate:

<!-- Header Section -->
<header>
  <h1>Website Title</h1>
</header>

<!-- Navigation Section -->
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<!-- Main Content Section -->
<main>
  <section>
    <h2>About Us</h2>
    <p>Information about our company.</p>
  </section>
</main>

<!-- Footer Section -->
<footer>
  <p>&copy; 2024 Company Name</p>
</footer>

h. Keeping HTML DRY (Don't Repeat Yourself):

The DRY (Don't Repeat Yourself) principle helps in reducing repetition of code. It, like the other practices, improves readability, and make it easier to maintain as it makes the process more efficient and less error-prone.

Techniques to Keep HTML DRY

Reusable Components: Create reusable components for elements that appear multiple times on your site. Use technologies like templates or frameworks that support component-based architectures.

Server-Side Includes (SSI): Use server-side includes to embed common elements (like headers, footers, and navigation menus) across multiple pages.

Client-Side Templating: Use client-side templating engines such as Mustache, Handlebars, or Pug to create reusable HTML templates that can be dynamically inserted into the page.

CSS Classes for Repeated Styles: Instead of repeating inline styles, use CSS classes to apply the same styles to multiple elements.

JavaScript for Dynamic Content: Use JavaScript to insert or generate repeated content, reducing the need to embed multiple instances of the same HTML.

Example using PHP Include:

Step 1: Create Reusable Components

First, create separate PHP files for the common elements you want to reuse across multiple pages, such as headers, footers, and navigation menus.

Header File (header.php):

<!-- header.php -->
<header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="index.php">Home</a></li>
      <li><a href="about.php">About</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
  </nav>
</header>

Footer File (footer.php):

<!-- footer.php -->
<footer>
  <p>&copy; 2024 Company Name. All rights reserved.</p>
</footer>

Step 2: Include These Components in Your Main Files

Use the include or require statement in your main HTML files to insert these components.

Home Page (index.php):

<!-- index.php -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
</head>
<body>
  <?php include 'header.php'; ?>

  <main>
    <h2>Welcome to Our Website</h2>
    <p>Home page content goes here.</p>
  </main>

  <?php include 'footer.php'; ?>
</body>
</html>

About Page (about.php):

<!-- about.php -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About</title>
</head>
<body>
  <?php include 'header.php'; ?>

  <main>
    <h2>About Us</h2>
    <p>Information about our company.</p>
  </main>

  <?php include 'footer.php'; ?>
</body>
</html>

The advantage of the above is, any changes made to these components will automatically show across all the pages that include them. Above all, it makes the entire code cleaner.

Css Best Practices

A. Using a CSS Preprocessor

CSS preprocessors like SASS (Syntactically Awesome Style Sheets) and LESS (Leaner Style Sheets) enable developers to write more maintainable, efficient, and modular CSS. These preprocessors add features to CSS that make it easier to manage styles for larger projects, including variables, nesting, mixins, and functions.

Benefits of Using a CSS Preprocessor

Variables: Store reusable values (e.g., colors, font sizes) in variables, making it easy to update them across your stylesheet.

Nesting: Nest CSS rules to show the HTML structure, making the stylesheet more readable and maintainable.

Mixins: Create reusable part of CSS that can be included in other rules, reducing repetition.

Functions and Operations: Use functions and perform operations (e.g., calculations, color manipulations) to generate dynamic styles.

Example with SASS

Setting up Variables:

Instead of repeating the same color value throughout your Stylesheet, you can define them as variables.

//variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Hevetica, Ariel, san-serif';

Using Nesting:
Nesting allows to structure your css in a way that shows your HTML, improving readability.

// Style.scss
header {
  background: $primary-color;
  color: #fff;
  nav {
    ul {
      list-style: none;
      li {
        display: inline-block;
        margin-right: 10px;
      }
    }
  }
}

Creating Mixins:
Mixins help you define reusable CSS snippets.

// mixins.scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

// Using the mixin
button {
  @include border-radius(5px);
  background: $secondary-color;
  color: #fff;
  padding: 10px 20px;
  border: none;
}

Functions and Operations:
You can use functions and perform operations to dynamically generate styles.

// functions.scss
@function calculate-rem($size) {
  @return $size / 16px * 1rem;
}

// Using the function
body {
  font-size: calculate-rem(16px); // 1rem
}

h1 {
  font-size: calculate-rem(32px); // 2rem
}

Importing Partial Files:
Organize your SASS code into multiple files and import them into a main file.

// main.scss
@import 'variables';
@import 'mixins';
@import 'functions';
@import 'styles';

From the above, we see clearly that nesting provides a logical structure to styles, mixins reduce repetition of code, and functions enable dynamic and reusable styling. All these combine to write CSS that is cleaner, more modular, and easier to maintain.

B. Organizing and Structuring:

Organize your CSS into multiple files based on functionality to make it easy to maintain.

Example:

/* layout.css */
.header {
  background-color: #333;
  color: white;
}

.footer {
  background-color: #f1f1f1;
  color: #333;
}

/* typography.css */
body {
  font-family: 'Arial, sans-serif';
}

h1 {
  font-size: 2em;
}

/* forms.css */
input[type="text"] {
  border: 1px solid #ccc;
  padding: 10px;
}

C. Naming Conventions:

Use consistent naming conventions. For example, if you choose to use the BEM (Block Element Modifier), use throughout.

<div class="card card--featured">
  <div class="card__header">Title</div>
  <div class="card__body">Content</div>
</div>

.card {
  border: 1px solid #ccc;
  padding: 20px;
}

.card--featured {
  background-color: #f9f9f9;
}

.card__header {
  font-weight: bold;
}

.card__body {
  font-size: 14px;
}

D. Commenting:

Add comments to document sections of your CSS.

Example:

/* Header Styles */
.header {
  background-color: #333;
  color: white;
}

/* Footer Styles */
.footer {
  background-color: #f1f1f1;
  color: #333;
}

E. Consistent Formatting:

Use a consistent formatting style (line break) for readability.

Example:

.header {
  background-color: #333;
  color: white;
}

.footer {
  background-color: #f1f1f1;
  color: #333;
}

F. Avoiding !important:

Minimize the use of !important to avoid specificity issues.

Example:

/* Avoid this */
.button {
  background-color: blue !important;
}

/* Prefer this */
.button {
  background-color: blue;
}

G. Efficient Styling with Selectors:

Use specific class and ID selectors for better performance to make it easier to maintain.

Example:

/* Prefer this */
.navbar {
  background-color: #333;
}

/* Overly specific */
div.container .navbar {
  background-color: #333;
}

Overly specific selectors can become difficult to maintain, make styles harder to override, and can cause unexpected behavior if another rule with slightly lower specificity tries to style the same element.

H. Use Utility Classes:

Create utility classes for common styles to promote reuse. A utility class in CSS is a single-purpose class that applies a specific styling rule or a small set of rules to an element.

Example:

/* Utility classes */
.text-center {
  text-align: center;
}

.margin-top-small {
  margin-top: 10px;
}

/* Usage */
<div class="text-center margin-top-small">Centered text with margin</div>

JavaScript Best Practices

a. Use let and const Instead of var:

let and const have block scope, which helps prevent common bugs related to variable hoisting and scope issues.

Example:

// Using let
let count = 1;
count = 2; // Valid

// Using const
const name = 'Robert';
// name = 'Kingsley'; // Error: Assignment to constant variable

b. Use Descriptive Variable and Function Names:

Choose meaningful names that clearly describe the variable's or function's purpose.

Example:

// Good
let userName = 'Donald';
function getUserAge(user) {
  return user.age;
}

// Bad
let x = 'Donald';
function foo(u) {
  return u.a;
}

c. Less and straightforward functions:

Functions should perform a single task. This makes them easier to test and maintain.

Example:

// Good
function add(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

// Bad
function calculate(a, b) {
  const sum = a + b;
  const product = a * b;
  return [sum, product];
}

d. Use Strict Equality (===) and Inequality (!==) :

Strict equality checks both value and type, preventing unexpected type coercion.

Example:

// Good
if (age === 18) {
  console.log('You are 18 years old.');
}

// Bad
if (age == 18) {
  console.log('You are 18 years old.');
}

e. Use Template Literals for Strings:

Template literals make it easier to include variables and expressions inside strings.

Example:

// Good
let name = 'Robert';
let greeting = `Hello, ${name}!`;

// Bad
let greeting = 'Hello, ' + name + '!';

f. Use Default Parameters:

Default parameters helps handle cases where arguments are not provided.

Example:

// Good
function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

greet(); // Hello, Guest!

// Bad
function greet(name) {
  if (name === undefined) {
    name = 'Guest';
  }
  console.log(`Hello, ${name}!`);
}

g. Use Array and Object Destructuring:

Destructuring helps extract values from arrays or properties from objects into different variables.

Example:

// Good
const user = { name: 'Robert', age: 25 };
const { name, age } = user;

const numbers = [1, 2, 3];
const [first, second] = numbers;

// Bad
const user = { name: 'Robert', age: 25 };
const name = user.name;
const age = user.age;

const numbers = [1, 2, 3];
const first = numbers[0];
const second = numbers[1];

h. Avoid Global Variables:

Global variables can lead to conflicts and bugs. Always declare variables within the scope they are needed.

Example:

// Good
function calculateSum() {
  let sum = 0;
  // code to calculate sum
  return sum;
}

// Bad
let sum = 0; // Global variable
function calculateSum() {
  // code to calculate sum
  return sum;
}

i. Use Comments appropriately:

Comments should explain the why behind the code, not the what. They are useful for complex logic or important details.

Example:

// Good
// Calculate the sum of all items in the array
function calculateTotal(items) {
  let total = 0;
  items.forEach(item => {
    total += item;
  });
  return total;
}

// Bad
function calculateTotal(items) {
  // This function calculates the total
  let total = 0;
  items.forEach(item => {
    total += item; // Add item to total
  });
  return total;
}

j. Use Array Methods Instead of Loops:

Methods like map, filter, and forEach are often more readable and concise than loops.

Example:

// Good
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]

// Bad
const numbers = [1, 2, 3];
const doubled = [];
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

Conclusion

Follow these standards for HTML, CSS and JavaScript to create clean, maintainable and efficient code. Well-written code is easier for you and others to understand, but it also forms a good foundation for future development of the code. Well-written code saves time when debugging or wanting to add new features to any existing code. It makes it easier to collaborate with others

Grasp Css Specificity Once: A Comprehensive Guide For Developers

Kingsley Uwandu — Wed, 29 May 2024 18:05:10 +0000

Small mistakes sometimes, when we code, can cause different stylesheet or Css rules to coincide, or want to happen at the same time, thereby making it impossible for the browser to understand. This consequently gives unexpected output on the webpage - The reason why you are sure sometimes when you code, but unfortunately, your code output looks different from what you expect. And as a result, at some point, it is difficult to tell whether or not the fault is from you, your editor, or even the browser. In the course of writing code as a developer, dealing with these errors and unexpected behaviors in your code can be frustrating; and finding and correcting them can get more frustrating if they keep getting in the way of your work.

Css Specificity is an important concept which when followed properly, determines which style is applied to Html elements when multiple styles clash. To avoid, or reduce the above-said error challenges when writing code, it is important to understand how Specificity works.

The Role of Specificity in Resolving Css Conflicts

Css stylings before now, was done with basic selectors, such as element name (e.g. h2, div), and simple properties. It advanced later when more types of selectors, like, but not limited to Class (.className), and ID (#Id) selector were introduced. Together with these new selectors and their combination sometimes, styling became more complex and developers once-in-awhile faced challenges related to conflict of having Css rules clashing. The clash, when it happens, cause styles to element on the web page to be ineffective. To solve this issue, Css Specificity was introduced, and improved from time-to-time. Now with the understanding of the concept, developers can control and predict which styles would apply to elements based on selector’s specificity.

For beginners there are vital terms to know, to help understand this article. The terms below are used to illustrate Specificity. It is important to note them for better understanding of its concepts.

There are three methods of styling in Css: Internal, External, and Inline styling.

Internal styles: These are defined within a <style> tag placed in the <head> section of your HTML document. These styles apply to all elements within the same document.

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: red;
      font-size: 30px;
    }
    p {
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Internal Style Example</h1>
  <p>This paragraph uses internal styles.</p>
</body>
</html>

Inline styles: are applied directly to an HTML element using the style attribute within the opening tag. This method is suitable for unique styles needed only for a single element. It is generally not recommended for larger styling due to code readability concerns.

<body>
  <h1 style="color: red; font-size: 30px;">Inline Style Example (Inline)</h1>
  <p style="font-family: Arial, sans-serif;">This paragraph uses inline styles.</p>
</body>

External styles: This method is the most recommended approach for larger websites or projects where you want to maintain consistent styles across multiple pages. It promotes code reusability and easier maintenance. The styles are defined in a separate CSS file (.css extension) linked to an HTML document using a tag in the <head> section. This CSS file can then style multiple HTML pages.

<html>
<head>
<link rel=”stylesheet” href=”style.css”>
</head>

Style.css:

h1 {
      color: red;
      font-size: 30px;
    }
    p {
      font-family: Arial, sans-serif;
    }

What is a Selector?

A Selector tells which element in an HTML document is targeted based on their name, class, attribute, type, i.d, and more; making it possible for these elements to be styled and given different functionalities in different files, like Css and Js files. Commonly used types of Selector are:

Type Selector (Element Selector): This selector targets HTML elements based on element type or tag name. E.g. p targets all paragraph elements, <p>...</p> ; and a targets all anchor elements, <a>...</a> in the HTML documents, below. They are examples of type selector:

  /* "p" type selector targets and styles all paragraph elements */
  p {
    color: blue;
    text-transform: uppercase;
  }

  /* "a" type selector targets and styles all anchor elements */
  a {
    color: green;
    text-decoration: none;
  }

Universal Selector: Denoted with *. Unlike Type(Element) selector, Universal selector(*) selects all elements in the HTML document, and can style them in stylesheets. With the Universal Selector, all elements in an Html code can be targeted and styled, all at once.

Css:

/* Affects all the different elements. Gives all, color - blue  */

*{  
    color: blue;
    text-transform: lowercase;
}

Attribute Selector: This selector target elements based on their attributes and attribute values. They are enclosed within square brackets []. For example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute Selectors</title>
<style>
  /* Style input elements with type "Email" */
  input[type="Email"] {
    color: red;
    text-transform: uppercase;
  }

  /* Style input elements with type "text" */
  input[type="text"] {
    color: blue;
    text-transform: capitalize;
  }

  /* Style links ending with ".com" */
  a[href$=".com"] {
    text-transform: lowercase;
    text-decoration: none; /* Remove underline */
  }

  /* Style links ending with ".org" */
  a[href$=".org"] {
    text-transform: capitalize;
  }

  /* Style paragraphs with title containing "miles" */
  p[title*="miles"] {
    color: red;
  }
</style>
</head>
<body>
  <h2>Input Examples</h2>
  <input type="Email" placeholder="Enter your Email here..">
  <input type="text" placeholder="Write something here">

  <input type="Email" placeholder="Enter another Email here..">
  <input type="text" placeholder="Write here, again">

  <h2>Link Examples</h2>
  <a href="https://abcdef.com">Lonely at the top!</a>
  <a href="https://abcdef.org">It's beautiful at the top!</a>

  <h2>Paragraph Examples</h2>
  <p title="The journey of a thousand miles">First paragraph</p>
  <p title="How far is it?">Second paragraph</p>
  <p title="miles away">Third paragraph</p>
</body>
</html>

The above examples show that CSS provides various operators that allow for matching of attribute values. Other operators and their usefulness are summarized, thus:

Equals (=): Matches elements with an exact attribute value (as shown above).
Not Equals (!=): Selects elements where the attribute value does not match the specified value.
Contains (~): Targets elements whose attribute value contains the specified word (anywhere within the value).
Starts With (^): Selects elements where the attribute value starts with the specified value.

Class Selector: This selector selects one or more element by referencing their class name. The class selector is a dot, '.', followed by a class name. That is: .classname.
I.D Selector: An ID selector in CSS is used to target a specific element on a web page by referencing its unique identifier, the id attribute. Unlike class selectors, which can be applied to multiple elements, an ID attribute should be assigned only once within an HTML document. The selector is an #, followed by the i.d name; thus: #i.d name

  <h2 id="heading">Heading with ID</h2>

  <h2 class="headings">Heading 2</h2>

  <h2 class="headings">Heading 3</h2>
</html>

Css:

#heading{
  color: red;
  text-transform: uppercase;
}

.headings{
  color: blue;
  text-transform: lower;
}

Other types of selectors are summarized in the code below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Css Styling</title>
<style>
/* Pseudo-element Selector - Targets placeholder of the input */
input::placeholder {
  color: red;
}

/* Pseudo-class Selector - Affects the input border when clicked */
input:focus {
  border: 1px solid red;
}

/* Pseudo-element Selector - Styles the first-line of the paragraph */
p::first-line {
  color: green;
}

/* Group Selector - Targets all anchor elements and h2 */
a, h2 {
  color: blue;
}
</style>
</head>
<body>
  <input type="email" placeholder="Type your Email here..">

  <p>This is the first line of this paragraph. As styled in the stylesheet, only text in the first-line will be affected. Other text outside this first-line will not be affected.</p>

  <a href="#">This is a link</a>

  <a href="#">This is a link-2</a>

  <h2>heading</h2>
</body>
</html>

Property: Property tells which visual aspect of the element or the selector that can be changed. It is everything on the Css stylesheet that can be given a value, and whose value can be altered.

/* color, text-transform, and font-size are properties of the p element Selector. Their values (blue, lowercase, 12px) can be changed.*/

p{
    color: blue;
    text-transform: lowercase;
    font-size: 12px;
}

Other examples of property are: transition, height, background-color, border, border-radius, font-family, padding, margin, e.t.c.

Value: This is a piece of data that is assigned in a bid to style a Css property. Above, blue, lowercase, and 12px, assigned respectively to the properties, color, text-transform, and font-size, are examples of value.

Declarations:

A declaration combines a property with its corresponding value. It is written as property: value;, with a colon separating the property and value. Optional whitespace can be used around the colon and semicolon (;) for better readability.

Rule: Rule is a complete set of one or more declarations in Css stylesheets, that tells how an HTML element or group of elements should be styled. It consists of two parts: The Selector, and a declaration block({...}). In short, it is a combination of a selector and the declaration, or declarations in the declaration block.

Properties, Values, Declarations, and Rules are summarized below:


// A Css rule:

Selector {
    Property1 : value1;               // Declaration 1     
    Property2 : value2;                //Declaration 2    
}

In CSS, there are three sources for styles applied to an element on a webpage:

Browser (User Agent) Styles: These are the default styles applied by the web browser itself. These styles take effect when no author or user styles are defined for an element.
User Styles: These are styles defined by the user of the website, allowing them to customize their browsing experience. This can be done through browser extensions or user style sheets.
Author Styles: These are the styles defined by the website creator. They can be included in the HTML document itself using the <style> tag, or linked to an external .css file. Author styles are what give a website its unique look.

What is Specificity?

In simper term, Specificity is a ranking method that ranks based on hierarchy - the more weighted rules owning a selector with higher priority, or weight are considered instead of the lower ones, when compared by the browser. All of the above explained types of Css Selectors have different level of specificity, or rank. Below show shows the different types, starting from the one with the highest specificity, to the least:

ID Selectors (High specificity)
Class Selector, attribute selector, and Pseudo-class selector (All have same specificity - Medium specificity, less than ID Selector)
Type or element selector, and Pseudo-element Selector (Low specificity)
Universal Selector (Has no effect on specificity)

There are different rules of Css Specificity to follow in order to avoid unexpected outputs in cases where Css coincide.

Understanding Specificity Through Cascade

Specificity is one of the key instructions of Cascade that must be followed, to avoid unexpected output when styling an Html element. It is therefore improper to explain its concept, without at first discussing its relationship with Cascade, which is fundamental and important to understanding how styles are applied in Css.

Suppose your Html and Css code are as follow, where multiple Css rules are applied to an Html element at the same time. The first rule wants to give it a color, red, and the other rule wants blue. Both at the same time, on same element!

<p class="code" id="coding">This is a paragraph</p>

p {  /* Rule 1: Color: Red */
  color: red;
}

p {  /* Rule 2: Color: Blue */
  color: blue;
}

The idea of the Cascade is like a waterfall, where styles flow down, with one affecting another. Styles are applied in a specific order, with later styles overriding earlier ones. This hierarchy helps ensure that styles are applied as intended. The term "Cascade" in CSS refers to the process by which the browser decides which styles to apply when there are conflicting rules. The Cascade follows these general principles:

Importance: Styles marked with !important take precedence over other styles.
Origin: Styles can come from the user agent (browser default), user styles, or author styles (those defined in the CSS by the web developer). Author styles generally take precedence over user agent styles unless the user has marked their styles as !important.
Specificity: More specific or weighted selectors take precedence over less specific ones.
Order: When selectors have the same specificity, the last one in the CSS file takes precedence.

In the code snippet above, we see two CSS rules targeting the <p> element, causing a conflict. By following Cascade principles, below is how this conflict is resolved:

In CSS, styles are assigned a weight based on their selector weight (specificity).
Rule 1: Selects all <p> elements (low specificity).
Rule 2: Also selects all <p> elements (low specificity).

Since both rules have the same specificity (low), the cascade moves on to the next principle. When styles have equal specificity, the order they appear in the CSS file matters. When selectors have the same specificity, the last one in the CSS file wins. Here, Rule 2 comes later in the stylesheet. Therefore, the final color applied to the paragraph will be blue, as defined in the second rule due to its later position in the cascade.

A Selector seen in the last position is not always considered first before others in Cascade. All Selectors involved in the conflict are first ranked, by comparing their respective weight level (specificity) before considering their order. That is, Specificity is checked first, before Order. For example:

p {  /* Rule 1: Color: Red */
  color: red;
}

p {  /* Rule 2: Color: Blue */
  color: blue;
}

*{   /* Rule 3: Color: Yellow */
   color: yellow;
}

From the above we see that, even if the Universal selector * appears last in the order, it will have no effect. The other higher selectors will be compared instead. Again, Rule 2 wins, because the Universal selector with no specificity effect is ignored, and its(Rule 2) rule having same specificity as Rule 1, is found in the later position when compared.

The specificity of class selector is higher than pseudo-element and type or element selector, but less than ID selector's. Thus, Id selectors will always win all other selectors when compared in conflicting situations, regardless of their position.

.code{   /* Rule 1: Color: Green */
   color: green;
}
p {  /* Rule 2: Color: Red */
  color: red;
}

p {  /* Rule 3: Color: Blue */
  color: blue;
}

#coding{   /* Rule 1: Color: Purple */
   color: purple;
}
.code{   /* Rule 2: Color: Green */
   color: green;
}
p {  /* Rule 3: Color: Red */
  color: red;
}

p {  /* Rule 4: Color: Blue */
  color: blue;
}

The strength of an Inline style

When all of these selectors, including the Id selector, which is the selector with the highest specificity, targets the same element that is already styled using Css inline method of styling elements, the inline style wins. This means it has the highest specificity.

<p class="code" id="coding" style="color:orange;">This is a paragraph</p>

The weight of both the inline style and all the different types of selector are summarized below:

Inline Styles (highest): Styles defined directly within an HTML element using the style attribute have the highest specificity.

ID Selector (very high): Styles targeting an element by its unique ID have very high specificity.

Class Selector, Attribute Selector, Pseudo-Class (medium): Styles using classes, element types, attributes, or pseudo-classes have medium specificity.

Element Selector, Pseudo-element Selector (low): Styles using element or tag name, and Pseudo-elements have the lowest specificity.

Having a higher Specificity alone is not enough to win, or be displayed on the screen. In Cascade, the !important declaration can be used to force a style to be applied regardless of its order, origin, and specificity. This means, with this declaration it is possible to win even an element that has inline styling, which normally have the highest specificity.

#coding{   /* Rule 1: Color: Yellow */
   color: orange;
}
.code{   /* Rule 2: Color: Yellow */
   color: yellow;
}
p {  /* Rule 3: Color: Red */
  color: red !important;
}

p {  /* Rule 4: Color: Blue */
  color: blue;
}

In the above code snippet, not minding its Specificity or Position, Rule 3 wins, because its rule has the !importantdeclaration in it. When removed and placed in another rule, that rule will win. Nonetheless, this should be used less often as it can make styles harder to maintain.

Resolving conflicts between the three different sources of styles applied to an element on a webpage

Again, there are three sources of styles: inline styles, internal styles, and external styles. When these sources define the same CSS property for an element, the specificity and location of the styles determine which one wins.

Case 1:

For example, let us consider a situation where all three sources apply the same property (color) to an element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Css Specificity</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    .crown {
      color: blue;
    }
  </style>
</head>
<body>
  <div class="crown" style="color: red;">Which color?</div>
</body>
</html>

In this Html code snippet above, the external style sheet (styles.css) contain:

.crown {
  color: green;
}

The internal style in the <style> block within the <head> section is:

<style>
  .crown {
    color: blue;
  }
</style>

The inline style directly applied to the div element is:

<div class="crown" style="color: red;">Which color?</div>

When these styles are applied to the <div class="crown">, the order:

External styles: Lowest specificity among the three, because it is the source of styling here that appears at the top.

Internal styles: Higher specificity than external styles, because it appears after here, but lower than inline styles.

Inline styles: Highest specificity, because it style appears last. Thus, the div element's color will be red because the inline style overrides both the internal and external styles.

Case 2:

If for example the above Html code is not styled using inline style, which appears last and won in that case, and instead the competition is between the external and internal style thus:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Css Specificity</title>

<!--External source appears first-->
  <link rel="stylesheet" href="styles.css">

<!--Internal source of style appears last-->
  <style>
    .crown {
      color: blue;
    }
  </style>
</head>
<body>
  <div class="crown">Which color?</div>
</body>
</html>

Because the external source appears at the top, first, and internal source of style appears last, following the Cascade order principle, the internal source which appears last wins.

Let see between the external and internal source of styling, what happens when the external source appears last, which typically is not the case:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Specificity</title>

<!--Internal source of style appears first-->
  <style>
    .crown {
      color: blue;
    }
  </style>

<!--External source of style appears last-->

  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="crown">Which color?</div>
</body>
</html>

When the browser processes the CSS, it applies the internal styles first (color: blue from the <style> tag). It then applies the external styles (color: green from styles.css). Because the external stylesheet is loaded after the internal stylesheet, and both have the same specificity, the external style would override the internal style due to being loaded later (last one wins in case of the same specificity).

Resolving conflicts between the three different origin of the styles applied to an element on a webpage

Now, after knowing almost all of the above listed Cascade principles, including Specificity, what happens when there is a clash between the three origin of styles on a webpage?

In the context of CSS (Cascading Style Sheets) and the concept of specificity, when there is a clash between author styles and user styles, user styles win. In the cascade order, we have:

User styles with !important (highest)
Author styles with !important
Author styles
User styles
User agent styles (browser defaults).

These rules mean user styles with !important will always override author styles, even if the author styles also have !important. Without the !important declaration, author styles will usually override user styles unless the user styles have higher specificity.

Therefore, if there is a conflict between an author’s style sheet and a user’s style sheet, the user’s style sheet will win if it uses !important. Without !important, author styles generally take precedence unless the user styles have higher specificity:

Author’s CSS:

p {
  color: blue;
}

User’s CSS:

p {
  color: green !important;
}

In the code snippet above, the paragraph text will be green because the user’s style is marked as !important. If non of these styles use !important, the author’s style usually wins unless the user style has higher specificity:

Author’s CSS:

p {
  color: blue;
}

User’s CSS:

div p {
  color: green;
}

In this case, if the paragraph is inside a div, the paragraph text will be green because the user style has higher specificity.

How to calculate Css Specificity

CSS specificity is calculated based on four categories, which can be seen as a four-part number: (a, b, c, d). These categories correspond to different types of selectors:

a - Inline styles (e.g., style="color: blue;")
b - ID selectors (e.g., #header)
c - Class selectors, Attributes selectors, and Pseudo-classes (e.g., .class, [type="text"], :hover)
d - Type selectors (e.g., div, p) and pseudo-elements (e.g., ::before, ::after)

Steps to Calculate Specificity

Inline Styles: Add 1 to the a component for each inline style (1,0,0,0 points). Inline styles have the highest specificity and will always win.

ID Selectors: Add 1 to the b component for each ID selector (0,1,0,0 points)

Class Selectors, Attribute Selectors, and Pseudo-Classes: Add 1 to the c component for each class selector, attribute selector, and pseudo-class (0,0,1,0 points)

Type Selectors and Pseudo-Elements: Add 1 to the d component for each type selector and pseudo-element (0,0,0,1 point)

Numerical Interpretation of points

1,0,0,0 (1000): This represents a specificity where there is one inline style and no other types of selectors.
0,1,0,0 (0100 or 100): This represents a specificity where there is one ID selector.
0,0,1,0 (0010 or 10): This represents a specificity with one class selector, attribute selector, or pseudo-class.
0,0,0,1 (0001 or 1): This represents a specificity with one type selector or pseudo-element.

When comparing these values, you can think of them as if they were large numbers:

(1,0,0,0) is like "1000"
(0,1,0,0) is like "100"
(0,0,1,0) is like "10"
(0,0,0,1) is like "1"

Using this analogy, you can see that "1000" (Specificity of inline style) is greater than "100" (Specificity of Id selector), which is greater than "10" (Specificity of Class, Pseudo-class, and Attribute Selector), and greater than "1" (Specificity of Type or Element Selector, and Pseudo-element Selector).

Example Calculations
Let’s calculate the specificity for various selectors:

Example 1: #header
ID selector (#header) contributes to the b component.
Specificity: (0, 1, 0, 0)

Example 2: .nav .item:hover
Two class selectors (.nav and .item) contribute to the c component.
One pseudo-class (:hover) also contributes to the c component.
Specificity: (0, 0, 3, 0)

Example 3: div p
Two type selectors (div and p) contribute to the d component.
Specificity: (0, 0, 0, 2)

Example 4: ul#list .item::before
One type selector (ul) contributes to the d component.
One ID selector (#list) contributes to the b component.
One class selector (.item) contributes to the c component.
One pseudo-element (::before) contributes to the d component.
Specificity: (0, 1, 1, 2)

Example 5: style="color: blue;"
Inline style contributes to the a component.
Specificity: (1, 0, 0, 0)

Below is an example that demonstrates CSS specificity using a button inside a div with an ID of crown. We will target the button using different selectors and style each with a different text color. This will show how specificity and the cascade determine the final style applied to the button.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Specificity Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="crown">
    <button>Click Me</button>
  </div>
</body>
</html>

/* Targeting the button with the element selector */
button {
  color: blue; /* Low specificity: 0,0,0,1 */
}

/* Targeting the button with the ID and element selector */
#crown button {
  color: green; /* Higher specificity: 0,1,0,1 */
}

/* Targeting the button with the body, ID, and element selector */
body #crown button {
  color: red; /* Even higher specificity: 0,1,0,2 */
}

Element Selector (button)

button {
  color: blue;
}

Specificity: 0,0,0,1

This rule has the lowest specificity and will be overridden by more specific rules.

ID and Element Selector (#crown button)

Specificity: 0,1,0,1

This rule has higher specificity than the element selector and will override it.

Body, ID, and Element Selector (body #crown button)

body #crown button {
  color: red;
}

Specificity: 0,1,0,2
This rule has even higher specificity and will override the previous two rules.

From the above code, the final text color of the button will be red because the selector body #crown button has the highest specificity among the CSS rules provided.

If an inline style is added directly to the button element, like so:

<body>
  <div id="crown">
    <button style="color: orange;">Click Me</button>
  </div>

The text color will be orange, as inline styles have the highest specificity.

Conclusion

Understanding CSS specificity is important for effectively managing the styles of a web project. By grasping how different selectors interact and override each other, developers can write more predictable and maintainable CSS. Specificity rules, combined with the cascade, ensure that the most appropriate styles are applied as intended by the developer.

The Document Object Model (DOM)- A Complete Guide

Kingsley Uwandu — Mon, 20 May 2024 17:42:51 +0000

The Document Object Model (DOM) is fundamental to modern web development. It represents the structure of an HTML document as a hierarchical tree. Each element, attribute, and text node is a part of this tree. JavaScript allows us to interact with, and manipulate this tree dynamically. Understanding how to manipulate the DOM with JavaScript is important for creating dynamic and interactive web applications. This guide will, in the end, cover everything you need to know about DOM manipulation, from selecting elements to handling events and creating dynamic content.

HTML elements are the building blocks of web pages. Each HTML element represents a specific part of the page's content or structure, such as headings, paragraphs, images, links, etc. HTML elements are defined by tags, attributes, and content. For example:

<! DOCTYPE html>
<html>
<head>
  <title>Document</title>
</head>
<body>
  <h1>Document Object Model</h1>
<img src="image.jpg" alt="image1">
  <p>This is a paragraph </p>
  <a href="https://link.com">Click for more details</a>
</body>
</html>

In the above Html code <h1>, <img>, <p>, and <a>, are HTML elements.

What is a DOM Node?

In the Document Object Model (DOM), every part of an HTML document is represented as a node. These nodes form a tree-like structure, where each node represents an object in the document. Each HTML element, attribute, and text node in the document corresponds to a node in the DOM tree. There are several types of DOM node, examples are:

Element Nodes: These represent HTML elements and form the structure of the document. For example, <div>, <p>, <h1>, etc.
Text Nodes: These represent the textual content within an element. For example, the text "This is a paragraph" in <p> This is a paragraph </p>.
Attribute Nodes: These represent attributes of an element. For example, the src and alt attribute of an <img> element.
Comment Nodes: These represent comments in the HTML code. For example, .

Relationship Between HTML Elements and DOM Nodes

HTML (Hypertext Markup Language) elements and DOM (Document Object Model) nodes are closely related and linked together in a way that makes it difficult to mention one, without mentioning the other in web development. Understanding their relationship is necessary for manipulating and interacting with web pages using JavaScript. The code snippet below summarizes what a node is:

<!DOCTYPE html>
<html>
<head>
    <title>DOM Node Example</title>
</head>
<body>
      <h1>This is heading</h1>
  <p>This is a paragraph.</p>
  <img src="image1.jpg" alt="An image">
  <a href="https://link.com">Click on my link</a>
    <!-- This is a comment -->
</body>
</html>

The DOM tree of the above Html code looks like this:

Document (Node)
└── DocumentType: <!DOCTYPE html> (Node)
└── Element: <html> (Node)
├── Element: <head> (Node)
│ └── Element: <title> (Node)
│ └── Text: "DOM Node Example" (Node)
└── Element: <body> (Node)
├── Element: <h1> (Node)
│ └── Text: "This is heading" (Node)
├── Element: <p> (Node)
│ └── Text: "This is a paragraph." (Node)
├── Element: <img src="image1.jpg" alt="An image"> (Node)
├── Element: <a href="https://link.com"> (Node)
│ └── Text: "Click on my link" (Node)
└── Comment: " This is a comment " (Node)

In this tree, each HTML element is represented as an element node. The text content within each element is represented as text node. Attributes of elements are represented as properties of their respective nodes.

Accessing DOM Elements

When working with JavaScript and the DOM, one main interest is to interact with the elements of the webpage. This involves accessing these elements, to modify, update, or manipulate them, as the case may be. There are several methods to achieve this, and each has its own strengths and use cases.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accessing DOM Elements</title>

</head>
<body>

    <h1>Accessing Elements in the DOM</h1>

    <h2>getElementById method</h2>
  <div id="demo">Get this element using it's ID</div>

  <h2>getElementsByClassName method(.demo)</h2>
  <div class="demo">Access me by class (1)</div>
  <div class="demo">Access me by class (2)</div>

  <h2>getElementsByTagName method</h2>
  <span>This is a span tag</span> <br>
  <span>This is a span tag</span> <br>
  <!-- <span>This is a span tag</span> <br> -->

  <h2>Query Selector</h2>
  <div id="demo-query">Access me by query</div>

  <h2>Query Selector All</h2>
  <div class="demo-query-all">Access me by query all (1)</div>
  <div class="demo-query-all">Access me by query all (2)</div>
</body>
<script src="main.js"></script>

</html>

Below shows how the above code snippet looks like when inspected on a browser. This will be used henceforth here, to illustrate all methods of accessing Dom Elements:

Accessing Elements by ID: An element's ID can be targeted or grabbed with the getElementById() method of the document object. This is done by writing document.getElementById(), and then passing in the unique ID as a parameter, in-between two quotation marks inside the bracket.

Accessing Elements by ClassName:Unlike in the above, here we can use the same class multiple times. This means, an ID can only be for one element node, while Class can be for more than one. Accessing elements by ClassName can be done by using the getElementsByClassName() method on the document object. That is, as, document. getElementsByClassName(), and then passing in the class name of the elements as a parameter, in-between two quotation marks inside the bracket. Thus:

The above is unlike in getElementById() method of accessing element, where at the end only the node of the targeted element was outputted. Here in getElementsByClassName() method, we get an array-like (but not an array) output on the console, showing that there are two nodes having that class name. This is an HTMLCollection, not an array.

To see these element’s contents, and because there are other div elements in the Html code, store getElementsByClassName(‘demo’), in a variable, say classDiv. Then access each same way an index array is accessed.

Accessing Elements by TagName: This is kind of similar to getElementsByClassName() method, in that an HTMLCollection is derived when we grab them. document.getElementsByTagName() method is used to grab a collection of elements that have the same tag. For example, all <h2> tags on the webpage can be grabbed using this method.

Again, as in getElementsByClassName() method, to access each content in this HTMCollection, showing there are five(5) h2 nodes in the Dom tree of the code above, it is done same way an index array is accessed

The querySelector(): The querySelector method is one of the most powerful and versatile method for selecting elements in the Document Object Model (DOM). It allows to select elements using CSS selectors, providing a flexible and concise way to target specific elements in a document. Its syntax is straightforward:

const element = document.querySelector(selector);

Where selector is a CSS selector string that specifies the elements to be selected, and element is the first element that matches the specified selector, or null if no matches are found.

While the outputs of each of the above queried Selectors are okay, we notice that in the case of selecting elements by their class logs out only one, instead of the two divs with the class name demo. The method, querySelector will always only output one of more than one content found in the selector used. That is, when the likes of tagname, classname, and other selectors that houses more than one node, or text node, are queried, only the first node found is displayed. For this reason, instead of the querySelector, querySelectorAll is preferred.

querySelectorAll():

Different from the case of getElementsByClassName() and getElementsByTagName() methods, where an HTMLCollection is outputted on the console when a group of element or content is targeted, with querySelectorAll() method, we get a NodeList, instead.

Now, with the above nodelist, we could select a particular div among the other div found within the selector used. Like others(targeting more than one node at the same time), each node is accessed same way an index array is accessed.

Traversing the DOM

To traverse is simply, to climb, descend, or visit all part of something. Traversing the DOM is a method for navigating the DOM tree. We could traverse from parent to child, vise-versa. The aim here is how to navigate from one node to another.

What is parentNode?: In the DOM, every element, attribute, and text node has a parent node, except for the root node (typically ). The parentNode property is a key feature that allows to move up the DOM hierarchy from a selected element to its parent node. It provides a reference to the parent node of a selected element. The example below explains this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <body>
        <div id="parent">
            <p id="child">This is a child with ID, 'child', inside it's parent, having ID, 'parent'</p>
        </div>

</body>
</html>

The paragraph element (The child node) can be selected, and the parentNode property can be used to access its parent. First step here is to select the paragraph element with the ID "child" using document.getElementById("child"), or any other method to access it. Then, its parent node can be accessed using the parentNode property. For this example, the result is stored in the variable - parentNode.

Parent nodes are often useful when removing, styling, or modifying elements. For example, the paragraph (child) inside the div (parent) can be removed, using removeChild() method, and passing in as parameter, the variable where the particular child to be removed is stored. Thus:

Notice now, that the parent node now is empty, with no child. The paragraph (child) can be added back to its parent node (div), using the appendChild():

There is another method that act same way as parent node, and returns exactly the same value. It is called, parentElement(). For example:

Now the div above, with ID parent acts as the parent, with three children, each with ID, child-1, child-2, and child-3, respectively. Just like parentNode() and childNode() above, both the parent and each child can be accessed.

The above shows how each child can be accessed in the Dom tree. To access their parent, use any of the child. E.g. secondChildNode:

The parent before the above parent can be seen, by:

All of the above shows and explains how to traverse upward, especially from each child to their parent. We can as well go downward, from parent to children. The firstChild and lastChild property references the first and last child nodes of a parent.
To get the entire children (a collection of child nodes) of a parent, the childNode property is used. For example, the entire children of the parent node above can be gotten thus:

Because there is more than one child of this parent, it outputs a NodeList. Each child can be accessed same way elements in an index array are accessed, by using their respective index. Opening the NodeList reveals that the indexes to get each child seen before, are 1,3, and 5, and this displayed thus:

Another property that works to traverse downward from the parent node to give the children is, the children property.

Aside traversing downward, from parent to children, or upward from children to parent, the nextElementSibling and previousElementSibling properties makes it possible to traverse or move from sibling to sibling.

The firstSibling can be accessed again using the secondSibling. This can be achieved by using the previousElementSibling property, thus:

Manipulating DOM Content

Modifying Text Content

One important feature of Document Object Model (DOM) is its ability to modify text and Html contents. Two important properties help to achieve these:

The textcontent
The innerHtml property

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

       <div id="parent">

        <p id="child">This is the paragraph</p>

       </div>

</body>

</html>

With the textContent we can output, change, or modify the text of the child node, having an ID ‘child’, in the above code. To do this, first grab and store the node in a variable. This is summarized in the example below:

While the textContent handles adding new text, removing existing ones, and overall modifying the text on the Html document, the innerHtml helps to update the HTML. For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <p>This is a paragraph</p>

</body>

</html>

The above shows an Html code with a paragraph as its content in its body, which is displayed on the browser. Amongst others, with the innerText, it is possible change the already existing element and text node to something entirely different, directly with javascript.

Creating New Elements

The createElement() method, also part of the Document interface, allows to create new HTML elements dynamically using JavaScript. It takes the tag name of the element you want to create as a string argument.

const newElement = document.createElement('h2'); // Creates an <h2> element
newElement.textContent = "This is a dynamically created heading";

const parentElement = document.getElementById('parent');
parentElement.appendChild(newElement); // Append the new heading to the parent

This code will create an <h2> element with the text "This is a dynamically created heading" and add it as the last child of the element with the ID "parent" in your HTML document.

Events and Event Handling

Events are the signals that make web pages dynamic and engaging. These are actions or occurrences triggered by the user interacting with the page (clicking a button, submitting a form), or by the browser itself (loading a page, resizing the window). JavaScript allows us listen for these events and execute specific code in response. This mechanism, known as event handling, is important for creating interactive web experiences.

What is an Event Listener?

An event listener is a function that waits for a specific event to occur on a particular DOM element. When that event happens, the event listener function is executed, running the code that has been defined within it. For example, when you run the code below, and click the button, the clickButton function will be triggered, displaying the alert message " You just clicked this button ". This demonstrates how an event listener allows code to respond to user interaction with a button.

<!DOCTYPE html>
<html>
<body>

<button id="Button">Click here to continue!</button>

<script>
// Select the button element using its ID
const button = document.getElementById("Button");

// Define the function to be executed on click
function clickButton() {
  alert("You just clicked this button");
}

// Add the event listener to the button
button.addEventListener("click", clickButton);
</script>

</body>
</html>

Directly Modify the Style Property of Any Element

You can directly access the style property of a DOM element like any other property (e.g., element.style). This property acts like a CSS style declaration object. It allows to set individual style properties like color, backgroundColor, fontSize, etc., by assigning values directly (e.g., element.style.color = 'red'). For example, we can change the color of an <h2> element when a button is clicked:

// Accessing a paragraph element
Const pageHeading = document.getElementById('heading');

// Accessing a button element
const pageButton = document.getElementById('Button');

// Adding a click event listener to the button
pageButton.addEventListener('click', function() {
    // Change the color style of  pageHeading
    pageHeading.style.color = 'green';
});

The above code targets two elements from the HTML document: A paragraph element with the ID "heading" is stored in the pageHeading variable, and a button element with the ID "Button" is stored in the pageButton variable. It attaches a click event listener to the button element (pageButton). This means whenever the button is clicked, the code within the listener function will be executed. When the button is clicked, the code inside the listener function changes the color style of the paragraph element (pageHeading) to green. This is achieved by accessing the style property of the paragraph and setting the color property to "green".

Conclusion

The Document Object Model (DOM) serves as the bridge between web page's structure and its interactivity. It makes it possible to understand how HTML elements are translated into DOM nodes, making JavaScript’s ability to change the webpage live. This article has provided various ways of navigating and changing the DOM. It, in the end assists to understand how to select specific parts using selectors, traverse the DOM tree and change text value, attributes and even deleting them.