The 3 Musketeers of Web Dev
HTML CSS JS
(structure) (style) (logic)
lege
Col
pna
A
Starter Code
<style> tag connects HTML with CSS
<script> tag connects HTML with JS
lege
Col
pna
A
<html>
<head>
<title> Website Name </title>
</head>
<body>
<!-- Content Tags -->
lege
</body>
Col
na
</html>
Ap
console. dir() is the way to see all the properties
of a specified JavaScript object in console by
which the developer can easily get the properties of the object.
Window Object
ge
The window object represents an open window in a browser. It is browser’s object (not JavaScript’s)
lle
& is automatically created by browser.
a Co
n
It is a global object with lots of properties & methods.
Ap
To see properties of window object write in console after inspecting: [Link]([Link])
Why we write script tag at last of body tag=> because if we
write it before we would get null information . it is an object so we need
to have some stuffs inside it. so we declare it after storing some info in it.
What is DOM?
lege
l
When a web page is loaded, the browser creates a Document Object Model (DOM) of the page
a Co
n
parent
child
Ap
All elemets of html after
coming to JS(We can bring them using DOM) gets
<=siblings=> converted into an [Link] object is called
document which is stored inside window object. So
the document is a subobject to the window object.
So the dicument is basically representation of
our html code
DOM Manipulation If we have to access all the body tag of html using
Document=>write: [Link]([Link])
If we have to access all properties/object of bodythen
Selecting with id write: [Link]([Link])
ge
[Link](“myId”)
olle
a C
Javascript does all the dynamic changes during
n
Selecting with class the execution of website. We cannot make
Ap
changes to website again nd again. so we
dynamically change to JS. Suppose we want to
[Link](“myClass”) change the color of bg to dark mode after clicking
returns an HTML Collection similar to an array. a btn. write:
[Link]="grey";
Selecting with tag let heading=[Link]("heading");
[Link](heading); jo html me
[Link](“p”) likha h as it is console pr likhja aa jayega [Link](heading); we have to
write this always as it is an object.
DOM Manipulation
Query Selector
lege
ol
[Link](“#myId / .myClass / tag”)
C
//returns first element matching the name as given inside double quotes.
pna
A
[Link](“#myId / .myClass / tag”)
//returns a NodeList return all the info regarding all the queries matching the name as given inside double quotes.
DOM Manipulation
Properties
lege
l
tagName : returns tag for element nodes
a Co
innerText : returns the text content of the element and all its children only the text is shown as
pn
string
A
innerHTML : returns the plain text or HTML contents in the element also the tags of the html are
shown in the string
textContent : returns textual content even for hidden elements
Homework [Link]("div").children
div ke andar jitne bhi tags honge wo access ho payege
Let‘s Practice
Qs. Create a H2 heading element with text - “Hello JavaScript”. Append “from Apna College
students” to this text using JS. let h2=[Link]("h2");// if there is a tag of h2
ege
[Link]([Link]);
ll
[Link]+="from Apna college students";
a Co
Apn
Qs. Create 3 divs with common class name - “box”. Access them & add some unique text to each
of them.
let divs=[Link](".box"); // as there are multiple divs
divs[0].innerText="new unique value 1";
divs[1].innerText="new unique value 2";
divs[2].innerText="new unique value 3";
//or use loop simply
DOM Manipulation
Attributes
lege
l
getAttribute( attr ) //to get the attribute value
a Co
pn
let para=[Link]("p");
setAttribute( attr, value ) //to set the attribute value
A
[Link]([Link]("class","
newClass"));
initially attribute was class
we changed to newClass
Style
let div=[Link]("div");
[Link] [Link]="green";
[Link]="purple";
[Link]="26px";
[Link]="Hello";
DOM Manipulation
uper sab tha changes ke lie ab hai new banane ke lie.
Insert Elements let el = [Link](“div“)
ge
[Link]( el ) //adds at the end of node (inside)
le
l
Suppose we create a button.
o
let
C
newBtn=[Link]
[Link]( el ) //adds at the start of node (inside)
a
("button");
pn
[Link]="Click me";
A
[Link](newBtn);
[Link]( el ) //adds before the node (outside)
ab ye to ban gya par ise screen
pr visible krne ke lie we have to
[Link]( el ) //adds after the node (outside) add it to the DOM model using
the 4 methods described aside.
Delete Element
appendChild
[Link]( ) //removes the node removeChild
Let‘s Practice
Qs. Create a new button element. Give it a text “click me”, background color of red & text color
of white.
lege
l
Insert the button as the first element inside the body tag.
a Co
Apn
Qs. Create a <p> tag in html, give it a class & some styling.
Now create a new class in CSS and try to append this class to the <p> element.
Did you notice, how you overwrite the class name when you add a new one?
Solve this problem using classList.