Kushagra Sharma's Blog

"DOM : Adding JavaScript to Web Pages

Kushagra Sharma's photo
Kushagra Sharma
·

4 min read

Table of contents

1) Introduction

Till now I've been learning about Javascript and using it inside the Chrome Developer tools console. Now that was the purest form of Javascript as we saw the code as it is and saw what it does. But there is no use in learning about it. if I am not going to apply it to my websites. So in this blog, I will incorporate Javascript into my websites.

The Document Object Model (DOM) is a programming interface provided by web browsers that represent the structure of a web page as a tree-like structure of objects. It allows scripts (usually written in JavaScript) to dynamically access and manipulate the content, structure, and style of web documents. In essence, the DOM provides a way for developers to interact with and modify the elements of an HTML or XML document.

2) Adding javascript in websites

Now in my CSS blog, I explored all the various ways to inject CSS into HTML websites. There were three ways to do that

One is inline CSS, the next is internal, and the last one is external

Now Javascript works similarly.

I can add inline Javascript by simply adding an attribute to the HTML tag. In the body, I'm going to add an attribute called onload.

<!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 onload="alert('Hello world!')">
    <h1>Hello World!</h1>
<style>*{
        background-color: orange;
        color: white;
    }</style>
</body>
</html>

*{
    background-color: orange;
    color: white;
}

same result with the internal javascript

<!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>
    <h1>Hello World!</h1>
    <script>alert("Hello world!")</script>
    <style>*{
        background-color: orange;
        color: white;
    }</style>
</body>
</html>

same result with the external javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello World!</h1>
    <script src="index.js"></script>

</body>
</html>

*{
    background-color: orange;
    color: white;
}

alert("Hello world!")

3)Elements

  1. firstElementChild property

The Element.firstElementChild read-only property returns an element's first child Element, or null if there are no child elements

  1. lastElementChild property

The Element.lastElementChild read-only property returns an element's last child Element, or null if there are no child elements.

  1. getElementsByTagName() method

    It is used to retrieve a collection (HTMLCollection) of all elements in the document with a specified tag name.

  2. getElementsByClassName() method

    It is used to retrieve a collection (HTMLCollection) of all elements in the document with a specified class name.

  3. getElementById() method

    It is used to retrieve a single element from the document with a specified ID name, not a collection. It returns a reference to the element that has the specified ID attribute.

  4. querySelector() method

The querySelector method is a powerful tool within the Document Object Model (DOM) API that enables you to retrieve a single element from the document by using a CSS selector.

Exercise 1

Change the third unorder list text

document.firstElementChild.lastElementChild.lastElementChild.lastElementChild.innerHTML = "Kushagra"

Exercise 2

Change the color of the third text

document.getElementsByTagName('li')[2].style.color = 'purple';

Exercise 3

Change the color of the first text

document.querySelector("li a").style.color = "green";

Exercise 4

Change color of the button

document.querySelector("button").style.backgroundColor = "yellow"

The Separation of Concerns: Structure vs Style vs Behaviour

In JavaScript, the classList is a property of DOM elements that represents a collection of the element's CSS classes. It provides a convenient way to manipulate classes on an HTML element without directly manipulating the className string. The classList property is particularly useful for adding, removing, toggling, and checking the presence of CSS classes on an element.

the classList property allows to add one or more class names to an HTML element when use with add method:

.as{
    visibility: hidden;
}

document.querySelector(".btn").classList.add("as")

toggle() method is to add a token to the list if it doesn't exist and remove it if it does exist.

Text Manipulation and the Text Content Property

document.querySelector("h1").textContent;

hello

document.querySelector("h1").innerHTML

<strong>Hello</strong>

Both textContent and innerHTML are properties in JavaScript that are commonly used to manipulate the content of HTML elements. However, they serve slightly different purposes:

  1. textContent: The textContent property is used to retrieve or set the text content of an HTML element. It returns or sets the text content of the specified element and all its descendants while disregarding any HTML tags within the content. It treats the content as plain text.

  2. The innerHTML property is used to retrieve or set the HTML content of an element. It returns or sets the content of the specified element, including any HTML tags within the content. This means you can manipulate the structure and formatting of the content using HTML.

jsJavaScriptDOM