Javascript

1)using Tagname:
<h1>Java</h1>
<h1 id="tag">Dom</h1>
<h1 class="box">React</h1>
<h1>HTML</h1>
<button onclick="fun()">Change</button>
<button onclick="reload()">Reload</button>
<button onclick="fun1()">Change</button>
<script>
function fun(){
var tag=document.getElementsByTagName("h1")
console.log(tag)
tag[0].style.color="red"
tag[1].style.color="pink"
tag[2].style.color="gold"
tag[3].style.color="yellow"
}
function fun1(){
var tag=document.getElementsByTagName("h1")
console.log(tag)
tag[0].style.color=""
}
function reload(){
location.reload()
}
</script>
2)using ID:
1)<h1>Java</h1>
<h1 id="heading1">Dom</h1>
<h1 class="heading1">React</h1>
<h1>HTML</h1>
<script>
var tag=document.getElementById("heading1")
console.log(tag)
</script>
with resspect to above code both the heading contains the same id value.
so hence the function target the first occuring element with the matching id value.
2)dynamic time using setinterval method:
setinterval(methodname,1000)=> 1000 refers to 1second

getHours()
getMinutes()
getSeconds()
<style>
h1{
border: 2px solid black;
background-color: antiquewhite;
text-align: center;
width: 50%;
margin: auto;
height: 150px;
line-height: 150px;
font-style: italic;
box-shadow: 12px 12px 5px gold;
}
</style>
</head>
<body>
<h1 id="heading">Time is</h1>
<br><br><br>
<center><button onclick="setInterval(get_time,1000)">show</button></center>
<script>
function get_time(){
var x=new Date()
console.log(x)
var h=x.getHours()
var m=x.getMinutes()
var s=x.getSeconds()
var tag=document.getElementById("heading")
tag.innerHTML="current time is : "+h+" "+m+" "+s
console.log()
}
</script>
3)using class name:
document.getElementsByClassName("")
this function targets and returns all the elements with matching class value it
returns HTML collection object and as to the access to using index value.
<h1 class="head">DOM</h1>
<h1>HTML</h1>
<h1 class="head">REACT-JS</h1>
<h1 class="head1">MONGA-DB</h1>
<h1 class="head">METRO-JS</h1>
<button onclick="fun()">Change</button>
<button onclick="fun1()">Change back</button>
<script>
function fun(){
var name=document.getElementsByClassName("head")
var name1=document.getElementsByClassName("head1")
var name2=document.getElementsByTagName("h1")
name2[1].style.color="orange"
for(let i=0;i<3;i++){
name[i].style.border="2px solid orange"
name[i].style.color="orange"
}
name1[0].style.border="2px dotted orange"
name1[0].style.color="green"
}
function fun1(){
location.reload()
}
</script>
4)searching the name in table:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/doc5.css">
</head>
<body>
<input type="text" id="myinput" placeholder="name" onkeyup="display()">
<br><br>
<table id="mytable" border="2" cellspacing="0">
<tr class="header">
<th>Name</th>
<th>Degree</th>
<th>Profession</th>
</tr>
<tr>
<td>Dashwath</td>
<td>BE</td>
<td>Sql Developer</td>
</tr>
<tr>
<td>Mani</td>
<td>BE</td>
<td>Font-End Developer</td>
</tr>
<tr>
<td>Periya Mani</td>
<td>BE</td>
<td>Back-End Developer</td>
</tr>
<tr>
<td>John</td>
<td>BE</td>
<td>Java Developer</td>
</tr>
<tr>
<td>Jai</td>
<td>BE</td>
<td>Full Stack Developer</td>
</tr>
<tr>
<td>Hritick</td>
<td>BE</td>
<td>Mern Developer</td>
</tr>
</table>
<script>
function display(){
filter=document.getElementById("myinput").value.toUpperCase()
table=document.getElementById("mytable")
tablerow=table.getElementsByTagName('tr')
for(let i=1;i<tablerow.length;i++){
tabledata=tablerow[i].getElementsByTagName('td')[0]
if(tabledata){
data=tabledata.textContent||tabledata.innerHTML
if(data.toUpperCase().indexOf(filter)>-1){
tablerow[i].style.display=""
}
else{
tablerow[i].style.display="none"
}
}
}
}
</script>
</body>
</html>
css file:
#myinput{
width: 100%;
}
#mytable{
width: 100%;
background-color: burlywood;
border: 2px solid red;
}
.header{
width: 500px;
background-color: silver;
text-align: center;
}
tr{
width: 500px;
border: 2px solid red;
text-align: center;
}
td{
width: 500px;
border: 2px solid ghostwhite;
text-align: center;
color: blueviolet;
}
tr:hover{
background-color: bisque;
}
5)document.query selector:
query selector function is used to target and element using tag name,
id valuue,class value.
In which whichever input available first that is tag name, id value
class value it returns that particular element.
Eg:
1)<h1>Document Object Model</h1>

<h1 id="js">Java_Script</h1>
<h1 class="fw">Spring</h1>
<h1 class="fw">Hibernnet</h1>
<h1></h1>
<script>
var ele1=document.querySelector("h1,#js,.fw");
var ele2=document.querySelector("#js,h1,.fw");
var ele3=document.querySelector(".fw,h1,#js");
console.log(ele1);
console.log(ele2);
console.log(ele3);
</script>
2)
<h1>Document Object Model</h1>

<h1></h1>
<script>
var ele1=document.querySelector(".fw");
var ele2=document.querySelector("h1");
var ele3=document.querySelector("#js");
console.log(ele1);
console.log(ele2);
console.log(ele3);
</script>
6)Query selector all:
query selector all function is used to target and element using tag name,
id valuue,class value.
In which whichever input available first that is tag name, id value

class value it returns all element.
<h1>Document Object Model</h1>

<h1></h1>
<script>
var ele1=document.querySelectorAll("h1");
console.log(ele1);
var ele2=document.querySelectorAll("#js");
console.log(ele2);
var ele3=document.querySelectorAll(".fw");
console.log(ele3);
</script>
7) create elememnt:
var tag=document.createElement("h1")
tag.textContent="Dom" //textcontent or innerHTML
console.log(tag)
var divtag=document.createElement("div")
divtag.textContent="i am div tag" //textcontent or innerHTML
console.log(divtag)
8) advance selector:
appendChild function is bascially
var tag=document.createElement("h1")
tag.textContent="Dom" //textcontent or innerHTML
tag.id="head1"
console.log(tag)
tag.style.color="orange"
document.body.appendChild(tag)
var divtag=document.createElement("div")
divtag.textContent="i am div tag" //textcontent or innerHTML
divtag.className="div1"
console.log(divtag)
divtag.style.color="green"
document.body.appendChild(divtag)
var imgtag=document.createElement("img")
imgtag.textContent="Create image Now" //textcontent or innerHTML
imgtag.id="img1"
console.log(imgtag)
imgtag.style.color="green"
document.body.appendChild(imgtag)
9)insert before:
1)
<ul id="ultag">
<li>Java</li>
<li>Java-Script</li>
<li id="litag">React-js</li>
<li>Hibernet</li>
<li>Spring</li>
</ul>
<script>
//create htnl tag
var newtag=document.createElement("li")
newtag.textContent="Web tech"
// targate the element
var ul=document.getElementById("ultag")
var x=document.getElementById("litag")
// insrt new element just before target element
ul.insertBefore(newtag,x)
</script>
2)
<ul id="ultag">
<li>Java</li>
<li id="two">Sql</li>
<li id="three">Js</li>
<li id="four">Html</li>
</ul>
<script>
var newtag1=document.createElement("li")
newtag1.textContent="React js"
newtag2.textContent="Angular js"
newtag3.textContent="Metro js"
newtag4.textContent="Node js"
var ul=document.getElementById("ultag")
var x2=document.getElementById("two")
var x3=document.getElementById("three")
var x4=document.getElementById("four")
ul.insertBefore(newtag1,x2)
ul.appendChild(newtag4)
</script>
10)Clone node function:
1)clone node true:
this function bascially used to create a copy of an element its along

with children.
1)
<div>
<ul id="ultag">
<li>Java</li>
<li>Js</li>
<li>Html</li>
<li>Node js</li>
</ul>
</div>
<div>
</div>
<script>
var x=document.getElementsByTagName("div")
var y=document.getElementById("ultag")
var clone=y.cloneNode(true)
x[1].appendChild(clone)
</script>
2)clone node flase:
this function bascially used to create a copy of an element its ignors

the child tag
11)remove child:
remove child function is used to remove child element of particular element.
<ul id="ultag">
<li>Java</li>
<li>J2ee</li>
<li id="li">React js</li>
<li>Node js</li>
<li>Spring</li>
</ul>
<button onclick="fun()">Remove</button>
<button onclick="fun1()">Return</button>
<script>
function fun(){
var x=document.getElementById("ultag")
var y=document.getElementById("li")
x.removeChild(li)
}
function fun1(){
location.reload()
}
</script>
12)event:
event is basically an action perform for respective event handler should be

attached.
syntax:
target element.Event=event handler function
1) <button id="button"> Click Here</button>

<script>
function fun(){
alert("Hi im event")
}
var but=document.getElementById("button")
but.onclick=fun
</script>
2)<button id="button"> Click Here</button>
<script>
but.onclick=function fun(){
alert("Hi im event")
}
</script>
3)<button id="button"> Click Here</button>

<script>
but.onclick= ()=>alert("Hi im event")
</script>
13) local storage:
<style>
input,button{
padding: 10px;
height: 30px;
}
fieldset{
margin-bottom: 20px;
}
</style>
</head>
<body>
<h2>local storage-java cript</h2>
<fieldset>
<legend>insert data</legend>
<input type="text" placeholder="enter key" id="inputkey">
<input type="text" placeholder="enter value" id="inputvalue">
<button type="button" id="btn">submit</button>
</fieldset>
<fieldset>
<legend>local storage</legend>
<div id="output"></div>
</fieldset>
<script>
const inputkey=document.getElementById("inputkey")
const inputvalue=document.getElementById("inputvalue")
const btn=document.getElementById("btn")
const output=document.getElementById("output")
btn.onclick=function(){
const key1=inputkey.value;
const value1=inputvalue.value;
if(key1 && value1){
localStorage.setItem(key1,value1)
location.reload();
}
}
for(i=0;i<localStorage.length;i++){
const k=localStorage.key(i);
const v=localStorage.getItem(k);
output.innerHTML+=k+":"+v+""+"<br>"
}
</script>
14)over writing the event handler function:
whenever we attach more than one event handler per one particular event,
then latestly attached event handler will be consider
1)
<button id="btn">Payment</button>
<script>
function googlepay(){
alert("Google pay");
}
function amazonpay(){
alert("Amazon pay");
}
function phonepay(){
alert("Phone pay");
}
var button=document.getElementById("btn")
button.onclick=googlepay
button.onclick=amazonpay
button.onclick=phonepay
</script>
15) addevent listener:
1)
<button id="btn">Payment</button>
<script>
function googlepay(){
alert("Googlepay")
}
function amazonpay(){
alert("Amazonpay")
}
function phonepe(){
alert("Phonepe")
}
var button=document.getElementById("btn")
button.addEventListener("click",googlepay)
button.addEventListener("click",amazonpay)
button.addEventListener("click",phonepe)
</script>
Regular Expression (********)

Javascript

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript

Uploaded by

Copyright:

Available Formats

1)using Tagname:

2)dynamic time using setinterval method:

setinterval(methodname,1000)=> 1000 refers to 1second

3)using class name:

4)searching the name in table:

1)<h1>Document Object Model</h1>

<h1>Document Object Model</h1>

6)Query selector all:

In which whichever input available first that is tag name, id value

<h1>Document Object Model</h1>

appendChild function is bascially

10)Clone node function:

1)clone node true:

this function bascially used to create a copy of an element its along

2)clone node flase:

this function bascially used to create a copy of an element its ignors

remove child function is used to remove child element of particular element.

event is basically an action perform for respective event handler should be

target element.Event=event handler function

1) <button id="button"> Click Here</button>

3)<button id="button"> Click Here</button>

13) local storage:

14)over writing the event handler function:

15) addevent listener:

Regular Expression (********)

You might also like