Arrays & More DOM Manipulations

 

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

1

2

3

let myArray = [5, "six", 2, 8.2];

console.log(myArray); // [5, "six", 2, 8.2]

JAVASCRIPT

2.2 Accessing an Array Item

1

2

3

4

5

let myArray = [5, "six", 2, 8.2];

console.log(myArray[0]); // 5

console.log(myArray[1]); // six

JAVASCRIPT

2.3 Modifying an Array Item

1

2

3

4

let myArray = [5, "six", 2, 8.2];

myArray[1] = 6;

console.log(myArray); // [5, 6, 2, 8.2]

JAVASCRIPT

2.4 Finding Array Length

The

array.length

is used to find the number of items in the array.

1

2

3

4

let myArray = [5, "six", 2, 8.2];

let lengthOfArray = myArray.length;

console.log(lengthOfArray); // 4

JAVASCRIPT

2.5 Array Methods

2.5.1 push()

The

push()

method adds new items to the end of the array.

1

2

3

4

let myArray = [5, "six", 2, 8.2];

myArray.push(true);

console.log(myArray); // [5, "six", 2, 8.2, true]

JAVASCRIPT

2.5.2 pop()

The

pop()

method removes the last item of an array and returns that item.

1

2

3

4

5

6

let myArray = [5, "six", 2, 8.2];

let lastItem = myArray.pop();

console.log(myArray); // [5, "six", 2]

console.log(lastItem); // 8.2

JAVASCRIPT

Try out creating an array, accessing, modifying its array items, and apply array methods to them in the below Code Playground.

3. Functions

3.1 Function Declaration

1

2

3

4

5

function showMessage() {

console.log("Hello");

}

showMessage();

JAVASCRIPT

3.2 Function Expression

There is another syntax for creating a function which is called Function Expression.

1

2

3

4

5

let showMessage = function() {

console.log("Hello");

};

showMessage();

JAVASCRIPT

4. More DOM Manipulations

4.1 Creating an HTML Element - 

createElement()

1

2

3

4

let h1Element = document.createElement("h1");

h1Element.textContent = "Web Technologies";

console.log(h1Element); // <h1>Web Technologies</h1>

JAVASCRIPT

4.2 Appending to an HTML Element - 

appendChild()

Appending to Document Body Object:

1

document.body.appendChild(h1Element);

JAVASCRIPT

Appending to Existing Container Element:

1

2

let containerElement = document.getElementById("myContainer");

containerElement.appendChild(h1Element);

JAVASCRIPT

Try out creating and appending the HTML elements like a paragraph, image, etc. in the below Code Playground.

4.3 Adding Event Listeners Dynamically

1

2

3

4

5

6

7

let btnElement = document.createElement("button");

btnElement.textContent = "Change Heading";

document.getElementById("myContainer").appendChild(btnElement);

btnElement.onclick = function(){

console.log("click event triggered");

};

JAVASCRIPT

4.4 Providing Class Names Dynamically - 

classList.add()

1

2

3

4

5

6

btnElement.onclick = function(){

h1Element.textContent = "4.0 Technologies";

h1Element.classList.add("heading");

console.log(h1Element);

};

JAVASCRIPT

1

2

3

4

5

6

.heading {

color: blue;

font-family: "Caveat";

font-size: 40px;

text-decoration: underline;

}

CSS

4.5 Removing Class Names Dynamically - 

classList.remove()

1

2

3

4

5

6

7

8

let removeStylesBtnElement = document.createElement("button");

removeStylesBtnElement.textContent = "Remove Styles";

document.getElementById("myContainer").appendChild(removeStylesBtnElement);

removeStylesBtnElement.onclick = function(){

h1Element.classList.remove("heading");

};

JAVASCRIPT

Try out adding the event listeners, class names and removing class names dynamically in the below Code Playground.