Scribd
Upload
6 views

Arrays and DOM

Uploaded by

Raghu Ram cheedella
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
6 views

Arrays and DOM

Uploaded by

Raghu Ram cheedella
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/ 7

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

You might also like