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 - [Link](a); //it is used for check data in an integer or
not and return true or false
v) toFixed - var a = 25.25415; [Link](2) //it user for fixed decimal number and
take as an input how many digits Want after point
vi) toPrecision - var a = 25.25415; [Link](3); It formats the number to the
given total significant digits, not decimal places.
23. Math Methods -
i) Ceil - [Link](float value); // It Provide Nearest upper integer vale from
float value
ii) Floor - [Link](float value); // It Provide Nearest lower integer vale from
float value
iii) Round - [Link](float value); //It Provide Round Value
iv) Trunc - [Link](float value); //It Provide Integer Value remove decimal
digits
v) Max- [Link](multiple value); // It Provide highest number from multiple values
vi) Min - [Link](multiple value); // It Provide lowest number from multiple
values
vii) sqrt - [Link](value); // It Provide square root value - 4 - 2
viii) Cbrt - [Link](value); // It Provide cubic root value - 9 - 3
ix) Pow - [Link](value,power); // It Provide power value
x) Random - [Link](); // It Provide random value
xi) absolute value - [Link](value); // It Provide absolute value
xii) PI - [Link]; // It Provide Pi value
25. Date Methods -
var date = new Date();
i) [Link]();// it return normal date as a readble format
ii) [Link]();// it return only current date
ii) [Link]();// it return only current Month
iii) [Link]();// it return only current Year
iv) [Link]();// it return only current Hour
v) [Link]();// it return only current Minutes
vi) [Link]();// it return only current Seconds
vii) [Link]();// it return only current Milliseconds
viii) [Link](22); // It used for set any past/future date and all pervious
methods will applicable
26. DOM [Document Object Module] -
i) Id - [Link]('idName')';
ii) ClassName - [Link]('className');
iii) TagName - [Link]('TagName');
iv) [Link] //it target full page htm content and retun an array format
v) [Link] //it target head tag
vi) [Link] //it target title tag
vii) [Link] //it target body tag
viii) [Link] //it target all anchor tag and retun an array format
ix) [Link] //it target all iamges tag and retun an array format
x) [Link] //it target all forms and retun an array format
x) [Link] //it return html doctype
xi) [Link] //it return webpage Url
xi) [Link] //it return Domain
xii) [Link] //it return URI
xiii) [Link]('header').getAttribute('class'); //it retuen all
class names
xiv) [Link]('header').getAttributeNode('style'); //it retuen full
attribute
xv) [Link]('header').getAttributeNode('style').value; //it retuen
attribute value
xiv) [Link]('header').attributes; //it retuen all attribute as an
array format
xvii) [Link]('header').setAttribute('class','xyz'); // it is used
for seta attribute
xviii)[Link]('header').attributes[1].value = 'xyz' // it is used
for seta attribute
xix) [Link]('header').removeAttribute('style'); //its used for
remove all attribute
xx)[Link]('css Selector'); // It target only fast one
xxi) [Link]('css Selector') // It target all
CSS Styling Using Dom -
i) [Link]('#id').[Link]; // It is used for get css Property
ii) [Link]('#id').[Link] = 'red'; // It is used for chnage css
Property
iii) [Link]('#id').className; // It is used for get class name and
it retun as a string format
iv) [Link]('#id').classList; // It is used for get class name and
it retun as an array format
v) [Link]('#id').[Link]('className','className'); // It is
used for add class
vi) [Link]('#id').[Link]('className','className'); // It
is used for remove class
vii) [Link]('#id').[Link]; // It is used for get how many
class added in targeted element
viii) [Link]('#id').[Link]('className','className'); //
it is used for toggle class if class is added then remove on 1st click then add on
second click
ix) [Link]('#id').[Link](1); // It return class name
according to array index - input is an array index number
x) [Link]('#id').[Link]('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) [Link]('#id').onclick= functionName;
ii) [Link]('#id').addEventListener('click',functionName);
iii) [Link]('#id').addEventListener('click',function(){
//Statement
//[Link]='blue';
});
// ** we can use useCapture as a optional paramiter it retuen true or flase
iv) [Link]('#id').addEventListener('click',function(){
[Link]('click',functionName)
})
it is used for remove event lisner
28. DOM Traversal Method -
i) [Link]('#innerElement').parentElement; //It is used for target
Ourter Element if no Ourter Element then retuen null
ii) [Link]('#innerElement').parentNode; //It is used for target
Ourter Element using inner element
iii) [Link]('#outerElement').children; // It is used for target all
inner Element using Ourter element it return as an array format
iii) [Link]('#outerElement').children[1]; // It is used for target
specific inner Element
iv) [Link]('#outerElement').childNodes; // same as children but it
return html with text
v) [Link]('#innerElement').fastElementChild; // it taget mention
element 1st inner div
vi) [Link]('#innerElement').lastElementChild; // it taget mention
element last inner div
vii) [Link]('#outerElement').firstChild; //This selects the first
child node (which can be an element, text, or comment) of the #outerElement.
viii) [Link]('#outerElement').lastChild; //This selects the last
child node (which can be an element, text, or comment) of the #outerElement.
ix) [Link]('#outerElement').nextElementSibling; //it target next
subling of same class
x) [Link]('#outerElement').previousElementSibling; //it target
previous subling of same class
xi) [Link]('#outerElement').nextSibling; //Returns the next
immediate sibling node of #outerElement, including text nodes (like whitespace).
xii) [Link]('#outerElement').previousSibling; // Returns the
previous immediate sibling node of #outerElement, including text nodes.
29. DOM Create Method -
i) createElement - [Link]('h1'); // it is used for create Html Tag
using js
ii) createTextNode - [Link]('Hello World !!'); //it is used for
create text in html using js
iii) createComent - [Link]('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 = [Link]('h1');
var text = [Link]('Hello World !!');
[Link](text);
[Link]('#id').appendChild(tag);
v) insertBefore -
// same as appendChild but in this case you can set position to appends
var tag = [Link]('h1');
var text = [Link]('Hello World !!');
[Link](text);
var target = [Link]('#id');
[Link](tag,[Link][0]);
vi) insertAdjacentElement - //it is used for create and appedn html tag and set a
specific position
let div = [Link]("myDiv");
let newElement = [Link]("p");
[Link] = "Inserted Element";
[Link]("beforeend", newElement);
vii) insertAdjacentHTML - //it is used for create and appedn html tag with text and
set a specific position
var target = [Link]('#id');
[Link]('Position','<p>Hello World !!</p>');
viii) insertAdjacentText - ////it is used for create and appedn text and set a
specific position
let div = [Link]("myDiv");
[Link]("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 = [Link]("parent");
let oldChild = [Link]("child1");
let newChild = [Link]("div");
[Link] = "New Child";
// Replace oldChild with newChild
[Link](newChild, oldChild);
xii) removeChild - it is use for remove elements
let parent = [Link]("parent");
let childToRemove = [Link]("child2");
// Remove childToRemove from parent
[Link](childToRemove);
xiii) cloneNode - its used for copy element
let original = [Link]("myDiv");
let clone = [Link](true); // true clones with child elements, false
clones only the element
[Link](clone);
xiv) Contains - The contains() method checks if a given node is a descendant of
another node, returning true or false.
let parent = [Link]("parent");
let child = [Link]("child");
if ([Link](child)) {
[Link]("Parent contains the child element.");
} else {
[Link]("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 = [Link]("demo");
[Link]([Link]("class")); // true
[Link]([Link]("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 = [Link]("container");
[Link]([Link]()); // 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 = [Link]("div1");
let div2 = [Link]("div2");
[Link]([Link](div2)); // true (same structure & content)
[Link] = "Hi";
[Link]([Link](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(() => {
[Link]("Running... " + count);
count++;
}, 1000); // Runs every 1 second
31. clearInterval - its used for clear setInterval
setTimeout(() => {
clearInterval(intervalID);
[Link]("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(() => [Link]("Hello!"), 3000);
clearTimeout(timer); // Cancels the timeout
33. BOM [Browser Object Model] Module -
i) [Link]; // it is used for get browser inner height
ii) [Link]; // it is used for get browser outer height
iii) [Link] // it is used for get browser outer width
iv) [Link]; // it is used for get browser inner width
v) var myWindow =
[Link]('URL','_bank/_top/_parent','width=500px,height=250px,top=200px'); //its
is used for open a new window
[Link]() //it will close opend window
[Link]('height','width'); // it is used for move window and follow
absolute position
[Link]('height','width'); // it is used for move window and follow
relative position
[Link]('height','width'); // it is used for resize window and it will
resize on given height and width
[Link]('height','width'); // it is used for resize window and it will
add given height and width with exextion height and width
vi) [Link](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) [Link](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 -
[Link]; // it return full url
[Link]; // it return hash (#abc)
[Link]; // it retuen seach paramiter if url - [Link] then
retuen [ ?id=abc ]
[Link](); //its used for reload a page
[Link]('URL'); //it is used for asing new url in location bar
[Link]('URL'); //same as assing but it clear page history
viii) History Object Method -
i) [Link]; // it is used for check history length
ii) [Link](); // it used for go back
iii) [Link](); // it used for go forword
iv) [Link](-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
[Link];
x) pageXOffset - // it is used for Horizontal scroll position of screen
[Link];
xi) [Link]; // it used for check any div postion from top
xii) [Link]; // it used for check any div postion from left
xiii) scrollTop - // it is used for vertical scroll position of targeted div
var div = [Link]('.div');
[Link];
xiv) scrollLeft - // it is used for Horizontal scroll position of targeted div
var div = [Link]('.div');
[Link]
xv)[Link] //Total width of an element, including hidden overflow content.
xvi) [Link] //Total height of an element, including hidden overflow
content
xvii) [Link] // it returns the visible width (including padding, border,
and scrollbar, but not margin) of an element in pixels.
xviii) [Link] // 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 = [Link]("myDiv");
[Link]([Link]);
xx) clientHeight - it returns the inner height of an element (excluding borders and
scrollbars).
let div = [Link]("myDiv");
[Link]([Link]);
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).
[Link]("click", function(event) {
[Link]("X:", [Link], "Y:", [Link]);
});
xxii) pageX & pageY: These properties return the mouse pointer's position relative
to the full page (not just the viewport).
[Link]("click", function(event) {
[Link]("X:", [Link], "Y:", [Link]);
});
xxiii) screenX and screenY return the x and y coordinates of the mouse pointer
relative to the screen.
[Link]("mousemove", (event) => {
[Link](`screenX: ${[Link]}, screenY: ${[Link]}`);
});
xxiv) offsetX and offsetY: These properties return the mouse pointer's position
relative to the target element when a mouse event occurs.
[Link]("click", function(event) {
[Link](`X: ${[Link]}, Y: ${[Link]}`);
});
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.
[Link]("keydown", function(event) {
[Link]("Ctrl:", [Link]); // true if Ctrl key is pressed
[Link]("Alt:", [Link]); // true if Alt key is pressed
[Link]("Shift:", [Link]); // true if Shift key is pressed
[Link]("Meta:", [Link]); // 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 = [Link]('.div');
[Link]('mousedown',function(e){
[Link]([Link]);
});
[Link] Property - // it is used for get which key is predded by user
[Link]('.div').addEventListener('keydown',function(e){
[Link]([Link]);
});
37. onCut - // it is used for get info if user cut something on webpage
[Link]('.div').addEventListener('cut',function(){
[Link]('User Cut');
});
38. onCopy - // it is used for get info if user copy something on webpage
[Link]('.div').addEventListener('copy',function(){
[Link]('User copy');
});
39. onPaste - // it is used for get info if user paste something on webpage
[Link]('.div').addEventListener('paste',function(){
[Link]('User Paste');
});
40. online - it is used for check user is online or not
[Link]('online',function(){
[Link]('User is online');
});
41. offline - it is used for check user is offline or not
[Link]('offline',function(){
[Link]('User is offline');
});
shortcut - [Link]([Link]); // if user is in online it return true
else false
[Link] Strings - Used for concat string same as f string in python
[Link](`${a} ${b}`);
43.