Scribd
Upload
13 views

JS6 ClassNotes

The document outlines the foundational elements of web development, focusing on HTML for structure, CSS for styling, and JavaScript for logic. It explains the importance of the DOM (Document Object Model) in web pages, detailing how to manipulate it using various JavaScript methods for selecting and changing elements. Additionally, it includes practical exercises for creating and modifying HTML elements dynamically using JavaScript.

Uploaded by

Raj Gupta
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
13 views

JS6 ClassNotes

The document outlines the foundational elements of web development, focusing on HTML for structure, CSS for styling, and JavaScript for logic. It explains the importance of the DOM (Document Object Model) in web pages, detailing how to manipulate it using various JavaScript methods for selecting and changing elements. Additionally, it includes practical exercises for creating and modifying HTML elements dynamically using JavaScript.

Uploaded by

Raj Gupta
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
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.

You might also like