8/30/23, 6:50 AM Revolutionizing the Job Market | NxtWave
Arrays & More DOM Manipulations | Cheat Sheet
1. Data Structures
Data Structures allow us to store and
organize data efficiently. This makes us
access and performs operations on the data
smoothly.
In JavaScript, we have built-in Data Structures
like,
Arrays
Objects
Maps
Sets
2. Array
An Array holds an ordered sequence of
items.
2.1 Creating an Array
JAVASCRIPT
1 let myArray = [5, "six", 2
2
3 console.log(myArray); //
2.2 Accessing an Array Item
JAVASCRIPT
1 let myArray = [5, "six", 2
2
3 console.log(myArray[0]);
4
5 console.log(myArray[1]);
2.3 Modifying an Array Item
https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=79fb8730-bdad-4ef8-a1ea-7e79d207fd8b&s_id=c0caae2e-… 1/7
8/30/23, 6:50 AM Revolutionizing the Job Market | NxtWave
JAVASCRIPT
1 let myArray = [5, "six", 2
2 myArray[1] = 6;
3
4 console.log(myArray); //
2.4 Finding Array Length
The
array.length is used to find the number of
items in the array.
JAVASCRIPT
1 let myArray = [5, "six", 2
2 let lengthOfArray = myArra
3
4 console.log(lengthOfArray)
2.5 Array Methods
2.5.1 push()
The
push() method adds new items to the end
of the array.
JAVASCRIPT
1 let myArray = [5, "six", 2
2 myArray.push(true);
3
4 console.log(myArray); //
2.5.2 pop()
The
pop() method removes the last item of an
array and returns that item.
JAVASCRIPT
1 let myArray = [5, "six", 2
2 let lastItem = myArray.pop
https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=79fb8730-bdad-4ef8-a1ea-7e79d207fd8b&s_id=c0caae2e-… 2/7
8/30/23, 6:50 AM Revolutionizing the Job Market | NxtWave
3
4 console.log(myArray); //
5
6 console.log(lastItem); //
Try out creating an array, accessing,
modifying its array items, and apply array
methods to them in the below Code
Playground.
HTML CSS JAVASCRIPT
1 let myArray = [5, "six", 2, 8.2
2 myArray[1] = 7;
3 myArray.pop();
4 myArray.push("seven");
5
6 console.log(myArray);
3. Functions
3.1 Function Declaration
JAVASCRIPT
1 function showMessage() {
2 console.log("Hello");
3 }
4
5 showMessage();
https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=79fb8730-bdad-4ef8-a1ea-7e79d207fd8b&s_id=c0caae2e-… 3/7
8/30/23, 6:50 AM Revolutionizing the Job Market | NxtWave
3.2 Function Expression
There is another syntax for creating a
function which is called Function Expression.
JAVASCRIPT
1 let showMessage = function
2 console.log("Hello");
3 };
4
5 showMessage();
4. More DOM Manipulations
4.1 Creating an HTML Element
- createElement()
JAVASCRIPT
1 let h1Element = document.c
2 h1Element.textContent = "W
3
4 console.log(h1Element); /
4.2 Appending to an HTML
Element - appendChild()
Appending to Document Body
Object:
JAVASCRIPT
1 document.body.appendChild(
Appending to Existing Container
Element:
JAVASCRIPT
1 let containerElement = doc
2 containerElement.appendChi
https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=79fb8730-bdad-4ef8-a1ea-7e79d207fd8b&s_id=c0caae2e-… 4/7
8/30/23, 6:50 AM Revolutionizing the Job Market | NxtWave
Try out creating and appending the HTML
elements like a paragraph, image, etc. in the
below Code Playground.
HTML CSS JAVASCRIPT
1 let h1Element = document.create
2 h1Element.textContent = "Web Te
3
4 let containerElement = document
5 containerElement.appendChild(h1
6
7 let btnElement = document.creat
8 btnElement.textContent = "Chang
9 containerElement.appendChild(bt
4.3 Adding Event Listeners
Dynamically
JAVASCRIPT
1 let btnElement = document.
2 btnElement.textContent = "
3 document.getElementById("m
4
5 btnElement.onclick = funct
6 console.log("click event
7 };
4.4 Providing Class Names
Dynamically - classList.add()
JAVASCRIPT
1 btnElement.onclick = funct
2 h1Element.textContent =
https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=79fb8730-bdad-4ef8-a1ea-7e79d207fd8b&s_id=c0caae2e-… 5/7
8/30/23, 6:50 AM Revolutionizing the Job Market | NxtWave
3 h1Element.classList.add(
4
5 console.log(h1Element);
6 };
CSS
1 .heading {
2 color: blue;
3 font-family: "Caveat";
4 font-size: 40px;
5 text-decoration: underli
6 }
4.5 Removing Class Names
Dynamically - classList.remove()
JAVASCRIPT
1 let removeStylesBtnElement
2 removeStylesBtnElement.tex
3
4 document.getElementById("m
5
6 removeStylesBtnElement.onc
7 h1Element.classList.remo
8 };
Try out adding the event listeners, class
names and removing class names
dynamically in the below Code Playground.
HTML CSS JAVASCRIPT
1 let h1Element = document.create
2 h1Element.textContent = "Web Te
3
4 let containerElement = document
5 containerElement.appendChild(h1
6
7 let btnElement = document.creat
8 btnElement.textContent = "Chang
9 containerElement.appendChild(bt
https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=79fb8730-bdad-4ef8-a1ea-7e79d207fd8b&s_id=c0caae2e-… 6/7
8/30/23, 6:50 AM Revolutionizing the Job Market | NxtWave
10
11 btnElement.onclick = function(
12 h1Element.textContent = "4.0
13 h1Element.classList.add("head
14 };
15
16 let removeStylesBtnElement = do
17 removeStylesBtnElement.textCont
https://learning.ccbp.in/course?c_id=5e93210e-f183-433d-a12d-79d81deb01be&t_id=79fb8730-bdad-4ef8-a1ea-7e79d207fd8b&s_id=c0caae2e-… 7/7
