14.
Events -
i) Click - onclick="functionName()"
ii) Double Click - ondblclick="functionName()"
iii) Right Click - oncontextmenu="functionName()"
iv) Mouse Hover - onmouseenter="functionName()"
v) Mouse Out - onmouseout="functionName()"
vi) Mouse Down - onmousedown="functionName()"
vii) Mouse Up - onmouseup="functionName()"
viii) Key Press - onkeypress="functionName()"
ix) Key Up - onkeyup="functionName()"
x) Load - onload="functionName()"
Xi) UnLoad - onunload="functionName()"
xii) Resize - onresize="functionName()"
xiii) Scroll - onscroll="functionName()"
xiv) onfocus - onfocus="functionName(this)";
xv) onblur - onblur="functionName(this)";
xvi) oninput - oninput="functionName(this)";
xvii) onchange - onchange="functionName(this)";
xviii) onselect - onselect="functionName(this)";
xix) onsubmit - onsubmit="functionName()";
xx) oninvalid - oninvalid="functionName()";
22. Number Methods -
var a = 25
i) Number - Number(a); //It is used for changing from string to number.
ii) ParseInt - parseInt(a);//It is used for changing from decimal to number.
iii) ParseFloat - parseFloat(a);//It is used for changing from number to decimal.
iv) isInteger - Number.isInteger(a); //it is used for check data in an integer or
not and return true or false
v) toFixed - var a = 25.25415; a.toFixed(2) //it user for fixed decimal number and
take as an input how many digits Want after point
vi) toPrecision - var a = 25.25415; a.toPrecision(3); It formats the number to the
given total significant digits, not decimal places.
23. Math Methods -
i) Ceil - Math.ceil(float value); // It Provide Nearest upper integer vale from
float value
ii) Floor - Math.floor(float value); // It Provide Nearest lower integer vale from
float value
iii) Round - Math.round(float value); //It Provide Round Value
iv) Trunc - Math.trunc(float value); //It Provide Integer Value remove decimal
digits
v) Max- Math.max(multiple value); // It Provide highest number from multiple values
vi) Min - Math.min(multiple value); // It Provide lowest number from multiple
values
vii) sqrt - Math.sqrt(value); // It Provide square root value - 4 - 2
viii) Cbrt - Math.cbrt(value); // It Provide cubic root value - 9 - 3
ix) Pow - Math.pow(value,power); // It Provide power value
x) Random - Math.random(); // It Provide random value
xi) absolute value - Math.abs(value); // It Provide absolute value
xii) PI - Math.PI; // It Provide Pi value
25. Date Methods -
var date = new Date();
i) date.toDateString();// it return normal date as a readble format
ii) date.getDate();// it return only current date
ii) date.getMonth();// it return only current Month
iii) date.getFullYear();// it return only current Year
iv) date.getHours();// it return only current Hour
v) date.getMinutes();// it return only current Minutes
vi) date.getSeconds();// it return only current Seconds
vii) date.getMilliseconds();// it return only current Milliseconds
viii) date.setDate(22); // It used for set any past/future date and all pervious
methods will applicable
26. DOM [Document Object Module] -
i) Id - document.getElementById('idName')';
ii) ClassName - document.getElementsByClassName('className');
iii) TagName - document.getElementsByTagName('TagName');
iv) document.all //it target full page htm content and retun an array format
v) document.head //it target head tag
vi) document.title //it target title tag
vii) document.body //it target body tag
viii) document.links //it target all anchor tag and retun an array format
ix) document.images //it target all iamges tag and retun an array format
x) document.forms //it target all forms and retun an array format
x) document.doctype //it return html doctype
xi) document.URL //it return webpage Url
xi) document.domain //it return Domain
xii) document.baseURI //it return URI
xiii) document.getElementById('header').getAttribute('class'); //it retuen all
class names
xiv) document.getElementById('header').getAttributeNode('style'); //it retuen full
attribute
xv) document.getElementById('header').getAttributeNode('style').value; //it retuen
attribute value
xiv) document.getElementById('header').attributes; //it retuen all attribute as an
array format
xvii) document.getElementById('header').setAttribute('class','xyz'); // it is used
for seta attribute
xviii)document.getElementById('header').attributes[1].value = 'xyz' // it is used
for seta attribute
xix) document.getElementById('header').removeAttribute('style'); //its used for
remove all attribute
xx)document.querySelector('css Selector'); // It target only fast one
xxi) document.querySelectorAll('css Selector') // It target all
CSS Styling Using Dom -
i) document.querySelector('#id').style.color; // It is used for get css Property
ii) document.querySelector('#id').style.color = 'red'; // It is used for chnage css
Property
iii) document.querySelector('#id').className; // It is used for get class name and
it retun as a string format
iv) document.querySelector('#id').classList; // It is used for get class name and
it retun as an array format
v) document.querySelector('#id').classList.add('className','className'); // It is
used for add class
vi) document.querySelector('#id').classList.remove('className','className'); // It
is used for remove class
vii) document.querySelector('#id').classList.length; // It is used for get how many
class added in targeted element
viii) document.querySelector('#id').classList.toggle('className','className'); //
it is used for toggle class if class is added then remove on 1st click then add on
second click
ix) document.querySelector('#id').classList.item(1); // It return class name
according to array index - input is an array index number
x) document.querySelector('#id').classList.contains('className'); // it is used for
check class is available or not and it return true/False
27. DOM Add Event Lisner Method -
function functionName() {
//Statement
}
i) document.querySelector('#id').onclick= functionName;
ii) document.querySelector('#id').addEventListener('click',functionName);
iii) document.querySelector('#id').addEventListener('click',function(){
//Statement
//this.style.color='blue';
});
// ** we can use useCapture as a optional paramiter it retuen true or flase
iv) document.querySelector('#id').addEventListener('click',function(){
this.removeEventListener('click',functionName)
})
it is used for remove event lisner
28. DOM Traversal Method -
i) document.querySelector('#innerElement').parentElement; //It is used for target
Ourter Element if no Ourter Element then retuen null
ii) document.querySelector('#innerElement').parentNode; //It is used for target
Ourter Element using inner element
iii) document.querySelector('#outerElement').children; // It is used for target all
inner Element using Ourter element it return as an array format
iii) document.querySelector('#outerElement').children[1]; // It is used for target
specific inner Element
iv) document.querySelector('#outerElement').childNodes; // same as children but it
return html with text
v) document.querySelector('#innerElement').fastElementChild; // it taget mention
element 1st inner div
vi) document.querySelector('#innerElement').lastElementChild; // it taget mention
element last inner div
vii) document.querySelector('#outerElement').firstChild; //This selects the first
child node (which can be an element, text, or comment) of the #outerElement.
viii) document.querySelector('#outerElement').lastChild; //This selects the last
child node (which can be an element, text, or comment) of the #outerElement.
ix) document.querySelector('#outerElement').nextElementSibling; //it target next
subling of same class
x) document.querySelector('#outerElement').previousElementSibling; //it target
previous subling of same class
xi) document.querySelector('#outerElement').nextSibling; //Returns the next
immediate sibling node of #outerElement, including text nodes (like whitespace).
xii) document.querySelector('#outerElement').previousSibling; // Returns the
previous immediate sibling node of #outerElement, including text nodes.
29. DOM Create Method -
i) createElement - document.createElement('h1'); // it is used for create Html Tag
using js
ii) createTextNode - document.createTextNode('Hello World !!'); //it is used for
create text in html using js
iii) createComent - document.createComment('this is comment'); //it is used for
create comment in html using js
iv) appendChild -
//it is used for attatched any text into any html tag and it alawsy add end
var tag = document.createElement('h1');
var text = document.createTextNode('Hello World !!');
tag.appendChild(text);
document.querySelector('#id').appendChild(tag);
v) insertBefore -
// same as appendChild but in this case you can set position to appends
var tag = document.createElement('h1');
var text = document.createTextNode('Hello World !!');
tag.appendChild(text);
var target = document.querySelector('#id');
target.insertBefore(tag,target.childNodes[0]);
vi) insertAdjacentElement - //it is used for create and appedn html tag and set a
specific position
let div = document.getElementById("myDiv");
let newElement = document.createElement("p");
newElement.textContent = "Inserted Element";
div.insertAdjacentElement("beforeend", newElement);
vii) insertAdjacentHTML - //it is used for create and appedn html tag with text and
set a specific position
var target = document.querySelector('#id');
target.insertAdjacentHTML('Position','<p>Hello World !!</p>');
viii) insertAdjacentText - ////it is used for create and appedn text and set a
specific position
let div = document.getElementById("myDiv");
div.insertAdjacentText("beforeend", "Inserted Text");
*) position list -
i) beforebegin - //in this case it add element before start the targeted div
ii) afterbegin - //in this case it add element after start the targeted div
iii) beforeend - //in this case it add element before end the targeted div
iv) afterend - //in this case it add element after end the targeted div
ix) replaceChild - its is used for replace elemment
let parent = document.getElementById("parent");
let oldChild = document.getElementById("child1");
let newChild = document.createElement("div");
newChild.textContent = "New Child";
// Replace oldChild with newChild
parent.replaceChild(newChild, oldChild);
xii) removeChild - it is use for remove elements
let parent = document.getElementById("parent");
let childToRemove = document.getElementById("child2");
// Remove childToRemove from parent
parent.removeChild(childToRemove);
xiii) cloneNode - its used for copy element
let original = document.getElementById("myDiv");
let clone = original.cloneNode(true); // true clones with child elements, false
clones only the element
document.body.appendChild(clone);
xiv) Contains - The contains() method checks if a given node is a descendant of
another node, returning true or false.
let parent = document.getElementById("parent");
let child = document.getElementById("child");
if (parent.contains(child)) {
console.log("Parent contains the child element.");
} else {
console.log("Child is not inside the parent.");
}
xv) hasAttribute - // it is used for check attribute is availabe or not and it
retun true or false
<p id="demo" class="text">Hello, World!</p>
<script>
let element = document.getElementById("demo");
console.log(element.hasAttribute("class")); // true
console.log(element.hasAttribute("style")); // false
</script>
xvi) hasChildNodes - // it is used for check child is availabe or not and it retun
true or false
<div id="container">
<p>Hello!</p>
</div>
<script>
let element = document.getElementById("container");
console.log(element.hasChildNodes()); // true
</script>
xvii) isEqualNode - its used for check both node are same or not [Both Node Type ,
name, value,attribute,attribute value and childNode Must Be same,]
let div1 = document.getElementById("div1");
let div2 = document.getElementById("div2");
console.log(div1.isEqualNode(div2)); // true (same structure & content)
div2.textContent = "Hi";
console.log(div1.isEqualNode(div2)); // false (content changed)
30. setInterval - setInterval is a JavaScript function that repeatedly executes a
specified function at a fixed time interval (in milliseconds).
let count = 0;
let intervalID = setInterval(() => {
console.log("Running... " + count);
count++;
}, 1000); // Runs every 1 second
31. clearInterval - its used for clear setInterval
setTimeout(() => {
clearInterval(intervalID);
console.log("Interval stopped");
}, 5000);
32. setTimeout(functionName, delay) → Executes a function after a specified delay
(in milliseconds and one time).
clearTimeout(timeoutID) → Cancels a scheduled setTimeout before it executes.
let timer = setTimeout(() => console.log("Hello!"), 3000);
clearTimeout(timer); // Cancels the timeout
33. BOM [Browser Object Model] Module -
i) window.innerHeight; // it is used for get browser inner height
ii) window.outerHeight; // it is used for get browser outer height
iii) window.outerWidth // it is used for get browser outer width
iv) window.innerWidth; // it is used for get browser inner width
v) var myWindow =
window.open('URL','_bank/_top/_parent','width=500px,height=250px,top=200px'); //its
is used for open a new window
myWindow.close() //it will close opend window
myWindow.moveTo('height','width'); // it is used for move window and follow
absolute position
myWindow.moveBy('height','width'); // it is used for move window and follow
relative position
myWindow.resizeTo('height','width'); // it is used for resize window and it will
resize on given height and width
myWindow.resizeBy('height','width'); // it is used for resize window and it will
add given height and width with exextion height and width
vi) window.scrollBy(x,y); // it is used for scroll a window if want to scroll
top/left then we have to use vale in (-) and follow relative position (x-Horizontal
Axis, Y-Vertical Axis)
vii) window.scrollTo(x,y); // it is used for scroll a window if want to scroll
top/left then we have to use vale in (-) and follow absolute position (x-Horizontal
Axis, Y-Vertical Axis)
vii) Location Object -
location.href; // it return full url
location.hash; // it return hash (#abc)
location.search; // it retuen seach paramiter if url - https://abc/a?id=abc then
retuen [ ?id=abc ]
location.reload(); //its used for reload a page
location.assign('URL'); //it is used for asing new url in location bar
location.replace('URL'); //same as assing but it clear page history
viii) History Object Method -
i) history.length; // it is used for check history length
ii) history.back(); // it used for go back
iii) history.forward(); // it used for go forword
iv) history.go(-1); // it used for go forword and back (-) is for back and number
is for how many page
ix) pageYOffset - // it is used for vertical scroll position of screen
window.pageYOffset;
x) pageXOffset - // it is used for Horizontal scroll position of screen
window.pageXOffset;
xi) box.offsetTop; // it used for check any div postion from top
xii) box.offsetLeft; // it used for check any div postion from left
xiii) scrollTop - // it is used for vertical scroll position of targeted div
var div = document.querySelector('.div');
div.scrollTop;
xiv) scrollLeft - // it is used for Horizontal scroll position of targeted div
var div = document.querySelector('.div');
div.scrollLeft
xv)div.scrollWidth //Total width of an element, including hidden overflow content.
xvi) div.scrollHeight //Total height of an element, including hidden overflow
content
xvii) box.offsetWidth // it returns the visible width (including padding, border,
and scrollbar, but not margin) of an element in pixels.
xviii) box.offsetHeight // it returns the visible height (including padding,
border, and scrollbar, but not margin) of an element in pixels.
xix) clientWidth - it returns the inner width of an element (excluding borders and
scrollbars).
let div = document.getElementById("myDiv");
console.log(div.clientWidth);
xx) clientHeight - it returns the inner height of an element (excluding borders and
scrollbars).
let div = document.getElementById("myDiv");
console.log(div.clientHeight);
xxi)ClientX & ClientY:
These properties return the horizontal (X) and vertical (Y) coordinates of the
mouse pointer relative to the browser’s viewport (excluding scroll).
document.addEventListener("click", function(event) {
console.log("X:", event.clientX, "Y:", event.clientY);
});
xxii) pageX & pageY: These properties return the mouse pointer's position relative
to the full page (not just the viewport).
document.addEventListener("click", function(event) {
console.log("X:", event.pageX, "Y:", event.pageY);
});
xxiii) screenX and screenY return the x and y coordinates of the mouse pointer
relative to the screen.
document.addEventListener("mousemove", (event) => {
console.log(`screenX: ${event.screenX}, screenY: ${event.screenY}`);
});
xxiv) offsetX and offsetY: These properties return the mouse pointer's position
relative to the target element when a mouse event occurs.
document.addEventListener("click", function(event) {
console.log(`X: ${event.offsetX}, Y: ${event.offsetY}`);
});
34. key Property - [we can use it only with mouse event]
i) CtrlKey - Detects if the Control (Ctrl) key is pressed.
ii) AltKey - Detects if the Alt (Option on macOS) key is pressed.
iii) ShiftKey - Detects if the Shift key is pressed.
iv) MetaKey [Windows Key]- Detects if the Meta (Windows key / Command key) is
pressed.
document.addEventListener("keydown", function(event) {
console.log("Ctrl:", event.ctrlKey); // true if Ctrl key is pressed
console.log("Alt:", event.altKey); // true if Alt key is pressed
console.log("Shift:", event.shiftKey); // true if Shift key is pressed
console.log("Meta:", event.metaKey); // true if Meta key is pressed (Windows
key on Windows, Command key on macOS)
});
35. Mouse Button Check - // its is used for check user press which button of mouse
[ for left button value - (0) for middle button value will be- (1) for right button
value will be - (2)]
var div = document.querySelector('.div');
div.addEventListener('mousedown',function(e){
console.log(e.button);
});
36.Key Property - // it is used for get which key is predded by user
document.querySelector('.div').addEventListener('keydown',function(e){
console.log(e.key);
});
37. onCut - // it is used for get info if user cut something on webpage
document.querySelector('.div').addEventListener('cut',function(){
console.log('User Cut');
});
38. onCopy - // it is used for get info if user copy something on webpage
document.querySelector('.div').addEventListener('copy',function(){
console.log('User copy');
});
39. onPaste - // it is used for get info if user paste something on webpage
document.querySelector('.div').addEventListener('paste',function(){
console.log('User Paste');
});
40. online - it is used for check user is online or not
window.addEventListener('online',function(){
console.log('User is online');
});
41. offline - it is used for check user is offline or not
window.addEventListener('offline',function(){
console.log('User is offline');
});
shortcut - console.log(navigator.onLine); // if user is in online it return true
else false
42.Template Strings - Used for concat string same as f string in python
console.log(`${a} ${b}`);
43.
