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: console.dir(window.document)
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 object.That 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: console.log(document.body)
If we have to access all properties/object of bodythen
Selecting with id write: console.dir(document.body)
ge
document.getElementById(“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
document.getElementsByClassName(“myClass”) change the color of bg to dark mode after clicking
returns an HTML Collection similar to an array. a btn. write:
document.body.style.background="grey";
Selecting with tag let heading=document.getElementById("heading");
console.log(heading); jo html me
document.getElementsByTagName(“p”) likha h as it is console pr likhja aa jayega console.dir(heading); we have to
write this always as it is an object.
DOM Manipulation
Query Selector
lege
ol
document.querySelector(“#myId / .myClass / tag”)
C
//returns first element matching the name as given inside double quotes.
pna
A
document.querySelectorAll(“#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 document.querySelector("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=document.querySelector("h2");// if there is a tag of h2
ege
console.dir(h2.innerText);
ll
h2.innerText+="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=document.querySelectorAll(".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=document.querySelector("p");
setAttribute( attr, value ) //to set the attribute value
A
console.log(para.setAttribute("class","
newClass"));
initially attribute was class
we changed to newClass
Style
let div=document.querySelector("div");
node.style div.style.backgroundColor="green";
div.style.backgroundColor="purple";
div.style.fontSize="26px";
div.innerText="Hello";
DOM Manipulation
uper sab tha changes ke lie ab hai new banane ke lie.
Insert Elements let el = document.createElement(“div“)
ge
node.append( el ) //adds at the end of node (inside)
le
l
Suppose we create a button.
o
let
C
newBtn=document.createElement
node.prepend( el ) //adds at the start of node (inside)
a
("button");
pn
newBtn.innerText="Click me";
A
console.log(newBtn);
node.before( el ) //adds before the node (outside)
ab ye to ban gya par ise screen
pr visible krne ke lie we have to
node.after( el ) //adds after the node (outside) add it to the DOM model using
the 4 methods described aside.
Delete Element
appendChild
node.remove( ) //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.
