Scribd
Upload
490 views13 pages

JS6 ClassNotes

Uploaded by

ukk7219
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
490 views13 pages

JS6 ClassNotes

Uploaded by

ukk7219
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

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
document.getElementById(“myId”)

olle
Selecting with class

na C
Ap
document.getElementsByClassName(“myClass”)

Selecting with tag

document.getElementsByTagName(“p”)
DOM Manipulation
Query Selector

lege
ol
document.querySelector(“#myId / .myClass / tag”)

C
//returns first element

pna
A
document.querySelectorAll(“#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
node.style
DOM Manipulation
Insert Elements let el = document.createElement(“div“)

ge
node.append( el ) //adds at the end of node (inside)

le
Col
node.prepend( el ) //adds at the start of node (inside)

pna
A
node.before( el ) //adds before the node (outside)

node.after( el ) //adds after the node (outside)

Delete Element

node.remove( ) //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.

You might also like