Scribd
Upload
13 views4 pages

Javascript Variables: Dom and Event Fundamentals - Cheat Sheet

The document provides a cheat sheet on JavaScript variables and the Document Object Model (DOM). It explains how to declare and assign values to variables, manipulate HTML elements using the DOM, and handle events like onclick. Key concepts include variable declaration, the structure of the DOM, and methods for accessing and modifying HTML elements.

Uploaded by

Prachi More
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views4 pages

Javascript Variables: Dom and Event Fundamentals - Cheat Sheet

The document provides a cheat sheet on JavaScript variables and the Document Object Model (DOM). It explains how to declare and assign values to variables, manipulate HTML elements using the DOM, and handle events like onclick. Key concepts include variable declaration, the structure of the DOM, and methods for accessing and modifying HTML elements.

Uploaded by

Prachi More
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

7/31/24, 6:47 PM Revolutionizing the Job Market | NxtWave

DOM and Event Fundamentals | Cheat Sheet

1. JavaScript Variables

1.1 Variable Declaration

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

let keyword.
JAVASCRIPT

1 let message;

1.2 Assigning a Value to the Variable

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

= ).
JAVASCRIPT

1 let message = 'Hello Rahul';

JAVASCRIPT

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

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

HTML CSS JAVASCRIPT

1 <!DOCTYPE html>
2 <html>
3 <head></head>
4 <body>
5 Your HTML code goes here. Write JavaScript
6 </body>
7 </html>

https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=64c6b29b-1c30-4fc9-b45c-2ec92b266c14&s_id=5ada9e21-… 1/4
7/31/24, 6:47 PM Revolutionizing the Job Market | NxtWave

Reset Code Run Code

Note

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.
HTML

1 <!DOCTYPE html>
2 <html>
3 <head></head>
4 <body>
5 <h1>Web Technologies</h1>
6 <button>Change Heading</button>
7 </body>
8 </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.

https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=64c6b29b-1c30-4fc9-b45c-2ec92b266c14&s_id=5ada9e21-… 2/4
7/31/24, 6:47 PM Revolutionizing the Job Market | NxtWave

2.3 Methods

2.3.1 getElementById

The

getElementById() method helps to select the HTML Element with a specific ID.
JAVASCRIPT

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

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.
https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=64c6b29b-1c30-4fc9-b45c-2ec92b266c14&s_id=5ada9e21-… 3/4
7/31/24, 6:47 PM Revolutionizing the Job Market | NxtWave

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.
HTML

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

JAVASCRIPT

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

HTML CSS JAVASCRIPT

https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=64c6b29b-1c30-4fc9-b45c-2ec92b266c14&s_id=5ada9e21-… 4/4

You might also like