A famous group of three that always work together as a team
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
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
aapke pure html page ko ek javascritpe object bana diya gaya hai aur
What is DOM?
use document nam de diya gaya hai
lege
l
When a web page is loaded, the browser creates a Document Object Model (DOM) of the page
a Co
Apn
The DOM represents the HTML document as a tree of objects.
Browser Object Model (BOM)
The BOM provides additional objects that are not part of the DOM
but allow interaction with the browser window beyond the document itself.
Examples include alert(), confirm(), and prompt(), which are part of the BOM
DOM Manipulation
Selecting with id
ge
[Link](“myId”)
olle
Selecting with class
na C
Ap
[Link](“myClass”)
Selecting with tag
[Link](“p”)
DOM Manipulation
Query Selector
lege
ol
[Link](“#myId / .myClass / tag”)
C
//returns first element
pna
A
[Link](“#myId / .myClass / tag”)
//returns a NodeList
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
Apn
innerHTML : returns the plain text or HTML contents in the element
textContent : returns textual content even for hidden elements
Homework
Let‘s Practice
Qs. Create a H2 heading element with text - “Hello JavaScript”. Append “from Apna College
students” to this text using JS.
lege
Col
pna
A
Qs. Create 3 divs with common class name - “box”. Access them & add some unique text to each
of them.
DOM Manipulation
Attributes
lege
l
getAttribute( attr ) //to get the attribute value
a Co
pn
setAttribute( attr, value ) //to set the attribute value
Style A
[Link]
DOM Manipulation
Insert Elements let el = [Link](“div“)
ge
[Link]( el ) //adds at the end of node (inside)
le
Col
[Link]( el ) //adds at the start of node (inside)
pna
A
[Link]( el ) //adds before the node (outside)
[Link]( el ) //adds after the node (outside)
Delete Element
[Link]( ) //removes the node
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.