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
What is DOM?
lege
l
When a web page is loaded, the browser creates a Document Object Model (DOM) of the page
a Co
Apn
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.