The 3 Musketeers of Web Dev
HTML CSS JS
(structure) (style) (logic)
lege
Col
pna
Different files:
*Readibility
A
*Modularity
*Browser caching - The code on our browser works faster.
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 contains document object which contains the html code.
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
[Link]: To view the html code
[Link]([Link]):
To view the properties and methods of
the html code
[Link] for accessing body from document
DOM Manipulation
Selecting with id
ge
[Link](“myId”) (returns id) (When empty returns null)
olle
Selecting with class
na C
Ap
[Link](“myClass”) (returns class[HTML Collection])
(When empty returns a html collection)
Selecting with tag
[Link](“p”) (returns all elements with same tags)
DOM Manipulation
Query Selector
lege
ol
[Link](“#myId / .myClass / tag”)
C
//returns first element
pna
A
[Link](“#myId / .myClass / tag”)
//returns a NodeList
Elements can be:
DOM Manipulation get - let a = [Link];
set - [Link]= ".....";
Properties
lege
l
tagName : returns tag for element nodes (.tagName)
a Co
innerText : returns the text content of the element and all its children (.innerText)
Apn
innerHTML : returns the plain text or HTML contents in the element (.innerHTML)
textContent : returns textual content even for hidden elements (.textContent)
Homework
DOM tree:
* text nodes
* comment nodes
* element nodes
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] .(stylename) = "(property)";
DOM Manipulation
creation:
Insert Elements let el = [Link](“div“)
e
* First select node from querySelector and then insert/delete elements
g
[Link]( el ) //adds at the end of node (inside)
olle
C
[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.