DEV Community: Anandhi P

DOM IN JAVASCRIPT

Anandhi P — Thu, 03 Sep 2026 15:01:51 +0000

What is DOM?

DOM stands for Document Object Model.

DOM is used to access and change HTML elements using JavaScript.

When a web page loads, the browser creates a DOM structure for the HTML page.

Using DOM, we can change:

HTML text
HTML styles
HTML attributes
HTML elements

Simple Example

<h1 id="title">Hello</h1>

<button onclick="changeText()">Click Me</button>

<script>
function changeText() {
    document.getElementById("title").innerText = "Welcome";
}
</script>

How it works

<h1> contains Hello.
getElementById("title") finds the <h1> element.
innerText changes the text.
When we click the button, Hello changes to Welcome.

Simple Definition

DOM = Using JavaScript to access and change HTML elements.
HTML has

→ Hello
JavaScript finds it using getElementById()
innerText changes the text
Click the button → Welcome appears.

Style

style is used to change the CSS style of an HTML element using JavaScript.

Example

Hello

document.getElementById("title").style.color = "red";

Now the Hello text will appear in red.

We can change different styles:

element.style.color = "red";
element.style.backgroundColor = "yellow";
element.style.fontSize = "30px";

InnerText

innerText is used to get or change the text inside an HTML element.

Example

Hello

document.getElementById("title").innerText = "Welcome";

Before:

Hello

After:

Welcome

querySelector()

querySelector() is used to find the first matching HTML element.

Example

Hello

let element = document.querySelector(".text");
element.innerText = "Welcome";

Output:

Welcome

→ ID

. → Class

document.querySelector("#title");
document.querySelector(".text");

Function in javascript

Anandhi P — Wed, 02 Sep 2026 14:52:34 +0000

What are Functions?

Functions are reusable code blocks designed for particular tasks .
Functions are executed when they are called or invoked .
Functions are fundamental in all programming languages .

Program:*

function sayHello() { console.log("Hello"); } console.log("Hello")

Output:

Hello

Calling a Function

Calling a function means executing or running the function.

After creating a function, we can call it by using the function name followed by parentheses ().

Example

function greet() {
    console.log("Hello");
}

greet();

greet() is used to call the function. When the function is called, the code inside the function is executed.

Output:

Hello

Function Parameters

Parameters allow us to send values to a function.
Parameters are written inside parentheses () when we define a function.
The values passed to the function are called arguments.

Example

function add(a, b) {
    console.log(a + b);
}

add(10, 5);

Output:

Function Return Values

A function can return a value to the code that called it.
The return statement is used to return a value from a function.
The returned value can be stored in a variable or used in another operation.

Example

function add(a, b) {
    return a + b;
}

let result = add(10, 10);

console.log(result);

Output:

Here:

return a + b → returns the result from the function.
add(10, 5) → calls the function.
result → stores the returned value.

Function Arguments

Function parameters and arguments are different.

Parameters are the names written inside the parentheses when defining a function.
Arguments are the actual values passed to the function when calling it.

Example

function add(a, b) {
    console.log(a * b);
}

add(10, 5);

Here:

a and b → Parameters
10 and 5 → Arguments

Simple way to remember:

Parameter = Name
Argument = Value

ARRAY IN JAVASCRIPT

Anandhi P — Tue, 01 Sep 2026 15:32:53 +0000

ARRAY

Array in JavaScript

An array is used to store multiple values in one variable.
An array can store different types of values.
Array values are written inside [].
Each value has an index number starting from 0.
We can use array methods to add, remove, and manage values.

Example :

let Flowers = [" Rose", "Loutus", "Lily"];

console.log(Flowers);

Outout;
[' Rose', 'Loutus', 'Lily']
0: " Rose"
1: "Loutus"
2: "Lily"
length: 3

Push
push() – last-la add

let a = [1, 2, 3];

a.push(4);

console.log(a);

Output:

[1, 2, 3, 4]

pop

pop() – last value remove

let a = [1, 2, 3];

a.pop();

console.log(a);

Output:

[1, 2]

Unshift

unshift() – first-la add

let a = [2, 3];

a.unshift(1);

console.log(a);

Output:

[1, 2, 3]

shift

shift() – first value remove

let a = [1, 2, 3];

a.shift();

console.log(a);

Output:

[2, 3]

ALL ARRAYS METHODS

push → add last
pop → remove last
unshift → add first
shift → remove first
includes → check value
indexOf → find position
slice → copy part
splice → add/remove
join → array to string
reverse → reverse
sort → arrange
forEach → print/do for each
map → change values
filter → select values
find → find first value
some → any one
every → all

Loop in JavaScript

Anandhi P — Mon, 31 Aug 2026 17:44:32 +0000

A loop is used to repeat a block of code again and again.

Types of Loops

1. for Loop

Used when we know how many times to repeat.

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

Output:
1 2 3 4 5

2. while Loop

Runs while the condition is true.

let i = 1;

while (i <= 5) {
    console.log(i);
    i++;
}

3. do...while Loop

Runs the code at least one time.

let i = 1;

do {
    console.log(i);
    i++;
} while (i <= 5);

4. for...of Loop

Used to get values from an array.

let fruits = ["Apple", "Mango"];

for (let fruit of fruits) {
    console.log(fruit);
}

5. for...in Loop

Used to get keys from an object.

let person = {name: "Anandhi", age: 21};

for (let key in person) {
    console.log(key);
}

break

break is used to stop the loop.

if (i == 3) {
    break;
}

continue

continue is used to skip the current iteration.

if (i == 3) {
    continue;
}

Nested Loop

A loop inside another loop is called a nested loop.

for (let i = 1; i <= 2; i++) {
    for (let j = 1; j <= 3; j++) {
        console.log(i, j);
    }
}

for → Repeat a fixed number of times
while → Repeat while condition is true
do...while → Runs at least once
for...of → Gets values
for...in → Gets keys
break → Stops loop
continue → Skips one iteration
Nested loop → Loop inside another loop

qUESTION:

String.fromCharCode(64 + i) என்னன்னா, number-ஐ letter-ஆ மாற்றுவது.

Example:

let i = 1;

String.fromCharCode(64 + i)

Step by step:

i = 1
64 + 1 = 65
65 → A

அதனால் output A.

i = 2
64 + 2 = 66
66 → B

1 → A
2 → B
3 → C
4 → D
...
26 → Z

Conditional Statements in JavaScript.

Anandhi P — Thu, 27 Aug 2026 17:42:27 +0000

Conditional statements are used to make decisions in a program.
They check whether a condition is true or false.
JavaScript provides if, else, and else if for conditional statements.
These statements help decide which block of code should run.
They are commonly used when a program needs to make a decision.

If Statement

The if statement is used to check a condition.
If the condition is true, the code inside the if block will run.
If the condition is false, the code inside the block will not run.

Example:
let age = 20;

if (age >= 18) {
console.log("You are eligible to vote");
}

Output:

You are eligible to vote

Else Statement

The else statement is used when the if condition is false.
It provides an alternative block of code to run.
If the if condition is true, the else block will not run.
It is used to handle the opposite condition.
else is always used with an if statement.

Example:

let age = 16;

if (age >= 18) {
console.log("You are eligible to vote");
} else {
console.log("You are not eligible to vote");
}

Output:
You are not eligible to vote

Else If Statement

The else if statement is used to check another condition.
It is used when the first if condition is false.
We can use multiple else if conditions in a program.
The first true condition will be executed.
It is useful for checking multiple conditions.

Example:
let mark = 75;

if (mark >= 90) {
console.log("A Grade");
} else if (mark >= 60) {
console.log("B Grade");
} else {
console.log("C Grade");
}

Output:

B Grade

nested

Nested If Statement

A nested if means using an if statement inside another if statement.
The inner if condition is checked only when the outer if condition is true.
It is used to check conditions step by step.
A nested if can have another if inside it.
This helps handle multiple levels of conditions.

Example:

let age = 20;
let hasId = true;

if (age >= 18) {
if (hasId) {
console.log("Entry allowed");
}
}

Output:

Entry allowed
swited

Switch Statement

The switch statement is used to check a value against multiple cases.
It runs the code for the matching case.
The break statement stops the switch after a match.
- The default case runs when no case matches.
It is useful when we have multiple possible values.

Example:
let day = 2;

switch (day) {
case 1:
console.log("Monday");
break;

case 2:
    console.log("Tuesday");
    break;

default:
    console.log("Invalid day");

}

Output:

Tuesday

Ternary Operator (? :)

The ternary operator is a short form of if...else.

*It checks a condition and returns one of two values.

? is used for the true condition.
: is used for the false condition.
It is useful for writing simple conditions in one line.

Example:

let age = 20;

let result = age >= 18 ? "Eligible" : "Not Eligible";

console.log(result);

Output:

Eligible

Operators in javascript

Anandhi P — Wed, 26 Aug 2026 17:52:36 +0000

Operators in JavaScript

The different type of operators in JavaScript. Operators are symbols used to perform different operations.

    * Addition Operator
    * Assignment Operator
    * Addition Assignment Operator
    * Subtraction Operator
    * Subtraction Assignment Operator
    * Multiplication Operator
    * Division Operator

1. Addition Operator (+)

The + operator is used to add two numbers.

let a = 10;
let b = 5;

console.log(a + b);

Output:

2. Assignment Operator (=)

The = operator is used to assign a value to a variable.

let number = 10;

console.log(number);

Output:

Here, 10 is assigned to number.

3. Addition Assignment Operator (+=)

The += operator adds a value to the existing value.

let number = 10;

number += 5;

console.log(number);

Output:

It is the same as:

number = number + 5;

In my calculator, += is also used to add a new digit to the existing value.

currentValue += value;

If currentValue is "10" and value is "5", the output becomes "105" because they are strings.

4. Subtraction Operator (-)

The - operator is used to subtract one number from another.

let a = 10;
let b = 5;

console.log(a - b);

Output:

5. Subtraction Assignment Operator (-=)

The -= operator subtracts a value from the existing value.

let number = 10;

number -= 5;

console.log(number);

Output:

It is the same as:

number = number - 5;

6. Multiplication Operator (*)

The * operator is used to multiply two numbers.

let a = 10;
let b = 5;

console.log(a * b);

Output:

7. Division Operator (/)

The / operator is used to divide one number by another.

let a = 10;
let b = 5;

console.log(a / b);

Output:

*Comparison Operators

Comparison operators are used to compare two values.
They return either true or false.
means more than and < means less than.
- == checks whether two values are equal.
- === checks both value and data type.

Example:
let a = 10;
let b = 5;

console.log(a > b); // true
console.log(a < b); // false
console.log(a == 10); // true
console.log(a === 10); // true

output:

true
false
true
true

Logical Operators
Logical operators are used to combine two or more conditions.
&& means AND and checks if all conditions are true.
|| means OR and checks if at least one condition is true.
! means NOT and changes true to false or false to true.
Logical operators are commonly used with if conditions.

Example:

&& AND Operator

The && operator checks whether both conditions are true.

Example:

let age = 20;

console.log(age > 18 && age < 30);

Output:

true

OR Operator

The || operator checks whether at least one condition is true.

Example:

let age = 20;

console.log(age > 18 || age < 10);

Output:

true

! NOT Operator

The ! operator changes true to false and false to true.

Example :

let age = 20;

console.log(!(age > 18));

Output:

false

Increment and Decrement Operators

The ++ operator increases a value by 1.
The -- operator decreases a value by 1.
These operators are used to increase or decrease a variable.
They are commonly used in loops and calculations.
The value changes directly when the operator is used.

Example :

let number = 10;

number++;
console.log(number);

number--;
console.log(number);

Output:
11
10

Modulus Operator (%)

The % operator is used to find the remainder after division.
It gives the remaining value after one number is divided by another.

Example:

let a = 10;
let b = 3;

console.log(a % b);

Output:

Exponentiation Operator (**)

The ** operator is used to calculate the power of a number.

It raises the first number to the power of the second number.

For example, 2 ** 3 means 2 × 2 × 2.

The result is 8.

It is also called the power operator.

Example :

let a = 2;
let b = 3;
console.log(a ** b);

output:

Not Equal Operator (!=)

The != operator checks whether two values are not equal.
If the values are different, it returns true.
If the values are the same, it returns false.
It checks the value but does not strictly check the data type.
It is used to compare two different values.

Example:

let a = 10;
let b = 5;

console.log(a != b);

output :

true

Strict Not Equal Operator (!==)

The !== operator checks whether two values are not equal.
- It checks both the value and data type.
If either the value or data type is different, it returns true.
- If both are the same, it returns false.
It is called the Strict Not Equal Operator.

Example:
let a = 10;
let b = "10";

console.log(a !== b);

Output:

true

10 is a number and "10" is a string.

Objects and Functions in JavaScript

Anandhi P — Tue, 25 Aug 2026 17:43:31 +0000

Object

An object in JavaScript is used to store related data and information in one place.
- An object stores data using key and value pairs.

Example:

let student = {
name: "Anandhi",
age: 21,
course: "Computer Science"
};

console.log(student.name);

Output:

Anandhi

Function

A function is a block of code used to perform a specific task.
We can create a function once and use it many times.

Example:

function greet() {
console.log("Hello");
}

greet();

OutputL:

Hello

Simple Difference :

Object → Stores data.
Function → Performs a task.

Primitive Data Type in javascript

Anandhi P — Mon, 24 Aug 2026 17:44:12 +0000

Primitive data types are the basic building blocks used to store values in JavaScript.

String

String is used to store text.
Ex:
let name = "Anandhi";

Number

Number is used to store numbers.
Ex:
let age = 21;

BigInt

BigInt is used to store very large numbers.
Ex:
let bigNumber = 12345678901234567890n;

Boolean

Boolean stores only true or false.
Ex:
let isStudent = true;

Undefined

Undefined means a variable is declared but no value is given.
Ex:
let city; Null

Null Null means an empty or no value. Ex : let address = null;
Symbol

Symbol is used to create a unique value.
Ex:
let id = Symbol("id");

TEST CASE

Anandhi P — Sun, 23 Aug 2026 17:56:10 +0000

1.A test case is a set of steps used to test a software feature.

2 It tells us what to test.

3.It includes the test steps.

4.It includes the expected result.

5.It also includes the actual result.

6.We use test cases to find bugs.

7.Test cases can be positive or negative.

8 A positive test checks valid input.

9.A negative test checks invalid input.

10.Test cases help to make software reliable and error-free.

Example:
Instagram Login Test Case – Pass & Failed

Pass:

Open the login page.
Enter a valid username.
Enter a valid password.
Click the Login button.
User is successfully logged in.
Result: Pass

Failed:

Open the login page.
Enter an invalid username.
Enter an invalid password.
Click the Login button.
Error message should be displayed.
Result: Fail

Bug Life Cycle

Anandhi P — Sat, 22 Aug 2026 07:30:57 +0000

Bug Life Cycle

Bug Life Cycle is the sequence of stages a bug goes through from the time it is identified until it is closed.

Main stages:

New
Tester finds a defect and reports it.
Assigned
The bug is assigned to a developer.
Open
Developer starts investigating the bug.
Fixed
Developer fixes the defect.
Retest
Tester tests the bug again after the fix.
Verified
Tester confirms that the bug has been successfully fixed.
Closed
The bug is completely resolved and closed.

Other possible statuses:

Rejected – Bug is not considered valid.
Duplicate – Same bug has already been reported.
Deferred – Bug will be fixed in a future release.
Reopened – Bug still exists after the developer marked it fixed.

TEST CASE

Anandhi P — Fri, 21 Aug 2026 06:00:13 +0000

A test case is a set of steps used to check whether a software feature works correctly.

Example: Login Page

Test Case 1: Check Login with valid details

Test Case ID: TC01
Test: Login with valid username and password
Steps: Enter username → Enter password → Click Login
Expected Result: User should successfully login.
Actual Result: User successfully logged in.
Status: Pass

What is Testing?

Testing is the process of checking a software or application to find bugs or errors and make sure it works correctly.

Types of Testing
Manual Testing – Testing is done manually by a tester.
Automation Testing – Testing is done using tools or scripts.
Functional Testing – Checks whether the features work correctly.
Non-Functional Testing – Checks performance, security, usability, etc.
Black Box Testing – Testing without looking at the source code.
White Box Testing – Testing by checking the source code.
Grey Box Testing – Tester has partial knowledge of the source code.
Unit Testing – Tests a small part of the application.
Integration Testing – Checks whether different modules work together.
System Testing – Tests the complete application.
Acceptance Testing – Checks whether the application meets user requirements.

BVA (Boundary Value Analysis):
It tests the values at the boundary (minimum and maximum).

Example: Age allowed: 18 to 60
Test: 17, 18, 19, 59, 60, 61

ECP (Equivalence Class Partitioning):
It divides the input into valid and invalid groups and tests one value from each group.

Example: Age allowed: 18 to 60

HTML & CSS Interview Questions

Anandhi P — Tue, 18 Aug 2026 18:25:14 +0000

HTML na enna?
HTML is used to create the structure of a webpage.
CSS na enna?
CSS is used to style and design a webpage.
HTML and CSS difference?
HTML creates the structure. CSS creates the design.
What is class?
Class is used to apply styles to one or more HTML elements.
What is ID?
ID is used to identify and style a specific HTML element.

6.What is Flexbox?
Flexbox is used to arrange elements easily in rows or columns.

7.What is Responsive Design?
Responsive design makes a webpage work properly on mobile, tablet, and computer screens.

8.What is HTML?
HTML stands for HyperText Markup Language. It is used to create the structure of a web page.

9.What is an attribute in HTML?
An attribute gives extra information about an HTML element.
Example: .

10.What is a form in HTML?
A form is used to collect user information, like name, email, and password.

11.What is the difference between

and ?
is a block-level element.
is an inline element.

12.What is CSS?
CSS stands for Cascading Style Sheets. It is used to style a webpage.

13.Why do we use CSS?
CSS is used to change color, size, spacing, layout, and design.
There are 3 types:
1.Inline CSS
2.Internal CSS
3.External CSS

1.What is Inline CSS?
CSS written inside an HTML tag is called Inline CSS.
Example:

Hello

2.What is Internal CSS?

CSS written inside the tag in an HTML file is called Internal CSS.

3.What is External CSS? 
CSS written in a separate .css file is called External CSS. 
14.What is a CSS selector? 
A selector is used to select an HTML element for styling.

15.What is a class in CSS? 
A class is used to apply the same style to one or more elements. 
Example: .box { color: red; }

16.What is an ID in CSS? 
An ID is used to style a specific element. 
Example: #header { color: blue; }

17.What is the CSS box model? 
The box model contains: 
Content → Padding → Border → Margin

18.What is margin in CSS? 
Margin is the space outside an element.

19.What is padding in CSS? 
Padding is the space inside an element, between the content and border.

<ol>
<li>What is <!DOCTYPE html>?
It tells the browser that the document uses HTML5.
It is written at the beginning of an HTML file.</li>
</ol>

21.What is <hr> tag? 
<hr> creates a horizontal line on the webpage. 
It is often used to separate sections.

<ol>
<li>What is <ul> tag? 
<ul> creates an unordered list. 
The items are usually shown with bullet points.</li>
<li>What is <ol> tag? 
<ol> creates an ordered list. 
The items are displayed with numbers.</li>
<li>What is <li> tag? 
<li> means list item. 
It is used inside <ul> or <ol>.</li>
</ol>

25.What is padding? 
Padding is the space inside an element. 
It creates space between content and the border.

DEV Community: Anandhi P

DOM IN JAVASCRIPT

What is DOM?

Simple Example

How it works

Simple Definition

→ Hello JavaScript finds it using getElementById() innerText changes the text Click the button → Welcome appears.

Hello

Hello

→ ID

Function in javascript

Calling a Function

Example

Function Parameters

Example

Function Return Values

Example

Function Arguments

Example

ARRAY IN JAVASCRIPT

Array in JavaScript

Loop in JavaScript

Types of Loops

1. for Loop

2. while Loop

3. do...while Loop

4. for...of Loop

5. for...in Loop

break

continue

Nested Loop

Conditional Statements in JavaScript.

Operators in javascript

Operators in JavaScript

1. Addition Operator (+)

2. Assignment Operator (=)

3. Addition Assignment Operator (+=)

4. Subtraction Operator (-)

5. Subtraction Assignment Operator (-=)

6. Multiplication Operator (*)

7. Division Operator (/)

Objects and Functions in JavaScript

Primitive Data Type in javascript

TEST CASE

Bug Life Cycle

TEST CASE

HTML & CSS Interview Questions

→ Hello
JavaScript finds it using getElementById()
innerText changes the text
Click the button → Welcome appears.