DOM and Event Fundamentals

1. JavaScript Variables

1.1 Variable Declaration

Variables are like containers for storing values. We can create a variable using the

let

keyword.

1
let message;

JAVASCRIPT

1.2 Assigning a Value to the Variable

We can put data into a variable using an assignment operator (

1
let message = 'Hello Rahul';

JAVASCRIPT

1
2
let message;
message = 'Hello Rahul';

JAVASCRIPT

Try out changing the JavaScript Variables and their Values in the below Code Playground and check the output in the console.

Printing a variable without assigning a value will give the output

undefined

2. Document Object Model (DOM)

The DOM is the structured representation of the HTML document created by the browser. It allows JavaScript to manipulate, structure, and style your website.

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>Web Technologies</h1>
    <button>Change Heading</button>
  </body>
</html>

HTML

2.1 Document Object

It is the entry point of the DOM. For accessing any HTML Element, you should always start with accessing the document object first.

2.2 HTML DOM Tree

The DOM tree represents an HTML document as nodes. Each node is referred to as an Object.

dom-tree

2.3 Methods

2.3.1 getElementById

The

getElementById()

method helps to select the HTML Element with a specific ID.

1
console.log(document.getElementById("headingElement"))

JAVASCRIPT

2.4 Properties

2.4.1 textContent

To manipulate the text within the HTML Element, we use

textContent

Property.

2.4.2 style

The

style

property is used to get or set a specific style of an HTML Element using different CSS properties.

Use Camel Case naming convention (starting letter of each word should be in the upper case except for the first word) for naming the Style Object Properties.

For example,

color

fontFamily

backgroundColor

, etc.

2.5 Events

Events are the actions by which the user or browser interacts with the HTML Elements. Actions can be anything like clicking a button, pressing keyboard keys, scrolling the page, etc.

2.5.1 onclick Event

The

onclick

event occurs when the user clicks on an HTML Element. We will give the name of the function as a value for the HTML

onclick

attribute.

1
2
3
4
<body>
  <h1 id="headingElement">Web Technologies</h1>
  <button onclick="manipulateStyles()">Change Heading</button>
</body>

HTML

1
2
3
4
function manipulateStyles() {
  document.getElementById("headingElement").textContent = "4.O Technologies";
  document.getElementById("headingElement").style.color = "blue";
}

JAVASCRIPT

DOM and Event Fundamentals

1. JavaScript Variables

1.1 Variable Declaration

1.2 Assigning a Value to the Variable

2. Document Object Model (DOM)

2.1 Document Object

2.2 HTML DOM Tree

2.3 Methods

2.3.1 getElementById

2.4 Properties

2.4.1 textContent

2.4.2 style

2.5 Events

2.5.1 onclick Event

Post a Comment

Coding Key

Interview Preparation

Subscribe Us

Contact Form