Scribd
Upload
28 views

JavaScript - DOM and Events Fundamental

The document discusses DOM manipulation using JavaScript including selecting elements, changing text content and styles, handling events like clicks, and refactoring code. Key topics covered include using querySelector, addEventListener, classList, and manipulating element properties like innerText, style, and src.

Uploaded by

patelsurlko20
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views

JavaScript - DOM and Events Fundamental

The document discusses DOM manipulation using JavaScript including selecting elements, changing text content and styles, handling events like clicks, and refactoring code. Key topics covered include using querySelector, addEventListener, classList, and manipulating element properties like innerText, style, and src.

Uploaded by

patelsurlko20
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

document.

querySelector(“”)
For Id we use:- document.querySelector(“#IdName”);
For Class we use: - document.querySelector(“.classname”);

In this image writing console.log(document.querrySelector(“.meassage”)); select the P tag


whole box include for only test selector write
console.log(document.querrySelector(“.meassage”).textcontent); this code select the p
tag content
for example: -
DOM and DOM Manipulation
What is DOM
DOCUMENT OBJECT MODEL: Structured representation of HTML DOCUMENTS. Allows
JavaScript to access HTML Elements and styles to MANIPULATE them.
MANIPULATE means (change text, HTML attributes, and even CSS styles)

THE DOM TREE STRUCTURE


.querrySelector
document.querrySelector(“.class name”); It select only one class if class has same name
multiple time example: -

if you want to select all the same class name code is: -
document.querrySelectorAll(“.class name”); it select all of them with same class name
example: -
Selecting and Manipulating
Changing start guessing… into “🎉 Correct Answer!”

code is: document.querrySelector(“.message”).textcontent = “🎉 Correct Answer!”

.value
document.querrySelector(“class or ID name”).value;
Example: -

Output is
Handling Click Events
document.querrySelector(“Id or class name”).addEventListener("what do you want ( I wnt
click ), function(){
type anything
})
example: -

Output is

when you click on check! then click event start.


By default, it takes string value for change string to number write like this
Manipulating CSS Styles
for changing whole body colour code is: -
document.querrySelector(body).style.name what do you want = “string value “;
for changing whole body colour example is:

Output is if answer is correct then colour change into green.

if you want change width size example is

Refactoring Our Code: The Dry Principal


classList

It is used for remove hidden item or add etc.


Syntax: - want to remove name.classList.remove(“class name without “.”);
Example: -

Handling an “Esc” keypress Event


If you use function parameter.key you can see which key press for example: -

output is

Using Escape button to close a window

Event ki jagah koi bhi


Key Name diya hai name desakte ho

or perfect way

Manipulating img

here you want random generate image


name.src=`dice-${dice}.png`
look image for better understanding
Switching the active player

Toggle tag

switch player between 1 and 2.

You might also like