Freedom Master tutorials

JavaScript DOM
This covers the JavaScript Document Object Model (DOM) Cheatsheet and shows you
how to manipulate DOM elements effectively.

Selecting elements
• getElementById() – select an element by id.
𝐿𝑒𝑡 𝑒𝑙𝑒𝑚𝑒𝑛𝑡 = 𝑑𝑜𝑐𝑢𝑚𝑒𝑛𝑡. 𝑔𝑒𝑡𝐸𝑙𝑒𝑚𝑒𝑛𝑡𝐵𝑦𝐼𝑑(“𝑖𝑑”);
• getElementsByName() – select elements by name.
𝐿𝑒𝑡 𝑒𝑙𝑒𝑚𝑒𝑛𝑡 = 𝑑𝑜𝑐𝑢𝑚𝑒𝑛𝑡. 𝑔𝑒𝑡𝐸𝑙𝑒𝑚𝑒𝑛𝑡𝑠𝐵𝑦𝑁𝑎𝑚𝑒(“𝑛𝑎𝑚𝑒 𝑖𝑛 𝑓𝑜𝑟𝑚”);
• getElementsByTagName() – select elements by a tag name.
𝐿𝑒𝑡 𝑒𝑙𝑒𝑚𝑒𝑛𝑡 = 𝑑𝑜𝑐𝑢𝑚𝑒𝑛𝑡. 𝑔𝑒𝑡𝐸𝑙𝑒𝑚𝑒𝑛𝑡𝑠𝐵𝑦𝑇𝑎𝑔𝑁𝑎𝑚𝑒(“𝑡𝑎𝑔 𝑛𝑎𝑚𝑒”);
• getElementsByClassName() – select elements by one or more class names.
𝐿𝑒𝑡 𝑒𝑙𝑒𝑚𝑒𝑛𝑡 = 𝑑𝑜𝑐𝑢𝑚𝑒𝑛𝑡. 𝑔𝑒𝑡𝐸𝑙𝑒𝑚𝑒𝑛𝑡𝑠𝐵𝑦𝐶𝑙𝑎𝑠𝑠𝑁𝑎𝑚𝑒(“𝑐𝑙𝑎𝑠𝑠 𝑛𝑎𝑚𝑒”);
• querySelector() – select elements by CSS selectors.
𝐿𝑒𝑡 𝑒𝑙𝑒𝑚𝑒𝑛𝑡 = 𝑑𝑜𝑐𝑢𝑚𝑒𝑛𝑡. 𝑞𝑢𝑒𝑟𝑦𝑆𝑒𝑙𝑒𝑐𝑡𝑜𝑟(“. 𝑐𝑙𝑎𝑠𝑠 𝑜𝑟 #𝑖𝑑 ”);
• querySelectorAll() – select elements by CSS selectors.
𝐿𝑒𝑡 𝑒𝑙𝑒𝑚𝑒𝑛𝑡 = 𝑑𝑜𝑐𝑢𝑚𝑒𝑛𝑡. 𝑞𝑢𝑒𝑟𝑦𝑆𝑒𝑙𝑒𝑐𝑡𝑜𝑟𝐴𝑙𝑙(“. 𝑐𝑙𝑎𝑠𝑠 𝑜𝑟 #𝑖𝑑 ”);

Traversing elements
• Get the parent element – get the parent node of an element.
𝐿𝑒𝑡 𝑝𝑎𝑟𝑒𝑛𝑡 = 𝑛𝑜𝑑𝑒. 𝑝𝑎𝑟𝑡𝑒𝑛𝑡𝑁𝑜𝑑𝑒;
• Get child elements – get children of an element.
First child
𝐿𝑒𝑡 𝑓𝑖𝑟𝑠𝑡𝐶ℎ𝑖𝑙𝑑 = 𝑝𝑎𝑟𝑡𝑒𝑛𝑡𝐸𝑙𝑒𝑚𝑒𝑛𝑡. 𝑓𝑖𝑟𝑠𝑡𝐶ℎ𝑖𝑙𝑑;
𝐿𝑒𝑡 𝑓𝑖𝑟𝑠𝑡𝐸𝐿𝑒𝑚𝑒𝑛𝑡𝐶ℎ𝑖𝑙𝑑 = 𝑝𝑎𝑟𝑡𝑒𝑛𝑡𝐸𝑙𝑒𝑚𝑒𝑛𝑡. 𝑓𝑖𝑟𝑠𝑡𝐸𝑙𝑒𝑚𝑒𝑛𝑡𝐶ℎ𝑖𝑙𝑑;
Last child
𝐿𝑒𝑡 𝑙𝑎𝑠𝑡𝐶ℎ𝑖𝑙𝑑 = 𝑝𝑎𝑟𝑡𝑒𝑛𝑡𝐸𝑙𝑒𝑚𝑒𝑛𝑡. 𝑙𝑎𝑠𝑡𝐶ℎ𝑖𝑙𝑑;
𝐿𝑒𝑡 𝑙𝑎𝑠𝑡𝐸𝐿𝑒𝑚𝑒𝑛𝑡𝐶ℎ𝑖𝑙𝑑 = 𝑝𝑎𝑟𝑡𝑒𝑛𝑡𝐸𝑙𝑒𝑚𝑒𝑛𝑡. 𝑙𝑎𝑠𝑡𝐸𝑙𝑒𝑚𝑒𝑛𝑡𝐶ℎ𝑖𝑙𝑑;
All child
𝐿𝑒𝑡 𝐴𝑙𝑙𝐶ℎ𝑖𝑙𝑑 = 𝑝𝑎𝑟𝑡𝑒𝑛𝑡𝐸𝑙𝑒𝑚𝑒𝑛𝑡. 𝑐ℎ𝑖𝑙𝑑𝑁𝑜𝑑𝑒;

By Suresh The Freedom Master

 Freedom Master tutorials
𝐿𝑒𝑡 𝑐ℎ𝑖𝑙𝑑𝑟𝑒𝑛 = 𝑝𝑎𝑟𝑡𝑒𝑛𝑡𝐸𝑙𝑒𝑚𝑒𝑛𝑡. 𝑐ℎ𝑖𝑙𝑑𝑟𝑒𝑛;
• Get siblings of an element – get siblings of an element.
Next siblings
𝐿𝑒𝑡 𝑛𝑒𝑥𝑡𝑆𝑖𝑏𝑙𝑖𝑛𝑔 = 𝑐𝑢𝑟𝑟𝑒𝑛𝑡𝑁𝑜𝑑𝑒. 𝑛𝑒𝑥𝑡𝐸𝑙𝑒𝑚𝑒𝑛𝑡𝑆𝑖𝑏𝑙𝑖𝑛𝑔;
Previous siblings
𝐿𝑒𝑡 𝑝𝑟𝑒𝑣𝑖𝑜𝑢𝑠𝑆𝑖𝑏𝑙𝑖𝑛𝑔 = 𝑐𝑢𝑟𝑟𝑒𝑛𝑡𝑁𝑜𝑑𝑒. 𝑝𝑟𝑒𝑣𝑖𝑜𝑢𝑠𝐸𝑙𝑒𝑚𝑒𝑛𝑡𝑆𝑖𝑏𝑙𝑖𝑛𝑔;

Manipulating elements
• createElement() – create a new element.
𝐿𝑒𝑡 𝑒𝑙𝑒𝑚𝑒𝑛𝑡 = 𝑑𝑜𝑐𝑢𝑚𝑒𝑛𝑡. 𝑐𝑟𝑒𝑎𝑡𝑒𝐸𝑙𝑒𝑚𝑒𝑛𝑡(“𝑡𝑎𝑔 𝑛𝑎𝑚𝑒”);
• appendChild() – append a node to a list of child nodes of a specified parent node.
𝑝𝑎𝑟𝑒𝑛𝑡𝑁𝑜𝑑𝑒. 𝑎𝑝𝑝𝑒𝑛𝑑𝐶ℎ𝑖𝑙𝑑(𝑐ℎ𝑖𝑙𝑑𝑁𝑜𝑑𝑒);
• textContent – get and set the text content of a node.
To display
𝑙𝑒𝑡 𝑡𝑒𝑥𝑡 = 𝑛𝑜𝑑𝑒. 𝑡𝑒𝑥𝑡𝐶𝑜𝑛𝑡𝑒𝑛𝑡;
To add
𝑛𝑜𝑑𝑒. 𝑡𝑒𝑥𝑡𝐶𝑜𝑛𝑡𝑒𝑛𝑡 = "𝑛𝑒𝑤𝑇𝑒𝑥𝑡" ;
• innerHTML – get and set the HTML content of an element.
To display
𝑙𝑒𝑡 𝑡𝑒𝑥𝑡 = 𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑖𝑛𝑛𝑒𝑟𝐻𝑇𝑀𝐿;
To add
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑖𝑛𝑛𝑒𝑟𝐻𝑇𝑀𝐿 = "𝑛𝑒𝑤𝐻𝑇𝑀𝐿";
• DocumentFragment – learn how to compose DOM nodes and insert them into
the active DOM tree.
𝑙𝑒𝑡 𝑓𝑟𝑎𝑔𝑚𝑒𝑛𝑡 = 𝑛𝑒𝑤 𝐷𝑜𝑐𝑢𝑚𝑒𝑛𝑡𝐹𝑟𝑎𝑔𝑚𝑒𝑛𝑡( );
𝑙𝑒𝑡 𝑓𝑟𝑎𝑔𝑚𝑒𝑛𝑡 = 𝑑𝑜𝑐𝑢𝑚𝑒𝑛𝑡. 𝑐𝑟𝑒𝑎𝑡𝑒𝐷𝑜𝑐𝑢𝑚𝑒𝑛𝑡𝐹𝑟𝑎𝑔𝑚𝑒𝑛𝑡( );
• after() – insert a node after an element.
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑎𝑓𝑡𝑒𝑟(𝑛 𝑛𝑜𝑑𝑒)
• append() – insert a node after the last child node of a parent node.
𝑝𝑎𝑟𝑒𝑛𝑡𝑁𝑜𝑑𝑒. 𝑎𝑝𝑝𝑒𝑛𝑑(𝑛𝑜𝑑𝑒)
• prepend() – insert a node before the first child node of a parent node.

By Suresh The Freedom Master

 Freedom Master tutorials
𝑝𝑎𝑟𝑒𝑛𝑡𝑁𝑜𝑑𝑒. 𝑝𝑟𝑒𝑝𝑒𝑛𝑑(𝑛𝑜𝑑𝑒)
• insertAdjacentHTML() – parse a text as HTML and insert the resulting nodes
into the document at a specified position.
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑖𝑛𝑠𝑒𝑟𝑡𝐴𝑑𝑗𝑎𝑐𝑒𝑛𝑡𝐻𝑇𝑀𝐿(𝑝𝑜𝑠𝑖𝑡𝑖𝑜𝑛𝑛𝑎𝑚𝑒, 𝑡𝑒𝑥𝑡)
positionName : beforebegin , afterbegin , beforeend , afterend
text : <h1>Example<h1>
• replaceChild() – replace a child element by a new element.
𝑝𝑎𝑟𝑒𝑛𝑡𝑁𝑜𝑑𝑒. 𝑟𝑒𝑝𝑙𝑎𝑐𝑒𝐶ℎ𝑖𝑙𝑑(𝑛𝑒𝑤𝐶ℎ𝑖𝑙𝑑, 𝑜𝑙𝑑𝑛𝑜𝑑𝑒)
• cloneNode() – clone an element and all of its descendants.
𝑙𝑒𝑡 𝑐𝑙𝑜𝑛𝑒𝑁𝑜𝑑𝑒 = 𝑜𝑟𝑖𝑔𝑖𝑛𝑎𝑙𝑁𝑜𝑑𝑒. 𝑐𝑙𝑜𝑛𝑒𝑁𝑜𝑑𝑒(𝑑𝑒𝑒𝑝(𝑡𝑟𝑢𝑒/𝑓𝑎𝑙𝑠𝑒))
• removeChild() – remove child elements of a node.
𝑝𝑎𝑟𝑒𝑛𝑡𝑁𝑜𝑑𝑒. 𝑟𝑒𝑚𝑜𝑣𝑒𝐶ℎ𝑖𝑙𝑑(𝑐ℎ𝑖𝑙𝑑𝑛𝑜𝑑𝑒)
• insertBefore() – insert a new node before an existing node as a child node of a
specified parent node.
𝑝𝑎𝑟𝑒𝑛𝑡𝑁𝑜𝑑𝑒. 𝑖𝑛𝑠𝑒𝑟𝑡𝐵𝑒𝑓𝑜𝑟𝑒(𝑛𝑒𝑤𝑛𝑜𝑑𝑒, 𝑒𝑥𝑖𝑠𝑡𝑖𝑛𝑔𝑛𝑜𝑑𝑒)
• insertAfter() helper function – insert a new node after an existing node as a child
node of a specified parent node.
𝑝𝑎𝑟𝑒𝑛𝑡𝑁𝑜𝑑𝑒. 𝑖𝑛𝑠𝑒𝑟𝑡𝐴𝑓𝑡𝑒𝑟(𝑛𝑒𝑤𝑛𝑜𝑑𝑒, 𝑒𝑥𝑖𝑠𝑡𝑖𝑛𝑔𝑛𝑜𝑑𝑒)

Working with Attributes

• setAttribute() – set the value of a specified attribute on a element.
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑠𝑒𝑡𝐴𝑡𝑡𝑟𝑖𝑏𝑢𝑡𝑒("𝑛𝑎𝑚𝑒", "𝑣𝑎𝑙𝑢𝑒")
Name : class, id, name, etc…
• getAttribute() – get the value of an attribute on an element.
𝑙𝑒𝑡 𝑣𝑎𝑙𝑢𝑒 = 𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑔𝑒𝑡𝐴𝑡𝑡𝑟𝑖𝑏𝑢𝑡𝑒("𝑛𝑎𝑚𝑒")
• removeAttribute() – remove an attribute from a specified element.
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑟𝑒𝑚𝑜𝑣𝑒𝐴𝑡𝑡𝑟𝑖𝑏𝑢𝑡𝑒("𝑛𝑎𝑚𝑒")
• hasAttribute() – check if an element has a specified attribute or not.
𝑙𝑒𝑡 𝑟𝑒𝑠𝑢𝑙𝑡 = 𝑒𝑙𝑒𝑚𝑒𝑛𝑡. ℎ𝑎𝑠𝐴𝑡𝑡𝑟𝑖𝑏𝑢𝑡𝑒(name);
Return true or false

By Suresh The Freedom Master

 Freedom Master tutorials
Manipulating Element’s Styles
• style property – get or set inline styles of an element.
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑠𝑡𝑦𝑙𝑒. (𝑝𝑟𝑜𝑝𝑒𝑟𝑡𝑦) = "𝑣𝑎𝑙𝑢𝑒";
• getComputedStyle() – return the computed style of an element.
𝑙𝑒𝑡 𝑠𝑡𝑦𝑙𝑒 = 𝑤𝑖𝑛𝑑𝑜𝑤. 𝑔𝑒𝑡𝐶𝑜𝑚𝑝𝑢𝑡𝑒𝑑𝑆𝑡𝑦𝑙𝑒(𝑒𝑙𝑒𝑚𝑒𝑛𝑡[, 𝑝𝑠𝑒𝑢𝑑𝑜𝐸𝑙𝑒𝑚𝑒𝑛𝑡])
• className property – return a list of space-separated CSS classes.
For display
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑐𝑙𝑎𝑠𝑠𝑁𝑎𝑚𝑒
For add
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑐𝑙𝑎𝑠𝑠𝑁𝑎𝑚𝑒 += 𝑛𝑒𝑤𝐶𝑙𝑎𝑠𝑠𝑁𝑎𝑚𝑒
• classList property – manipulate CSS classes of an element.
For display
𝑙𝑒𝑡 𝑐𝑙𝑎𝑠𝑠𝑒𝑠 = 𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑐𝑙𝑎𝑠𝑠𝐿𝑖𝑠𝑡
For add
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑐𝑙𝑎𝑠𝑠𝐿𝑖𝑠𝑡. 𝑎𝑑𝑑("𝑐𝑙𝑎𝑠𝑠𝑁𝑎𝑚𝑒")
For remove
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑐𝑙𝑎𝑠𝑠𝐿𝑖𝑠𝑡. 𝑟𝑒𝑚𝑜𝑣𝑒("𝑐𝑙𝑎𝑠𝑠𝑁𝑎𝑚𝑒")
For replace
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑐𝑙𝑎𝑠𝑠𝐿𝑖𝑠𝑡. 𝑟𝑒𝑝𝑙𝑎𝑐𝑒(oldclassName, "𝑛𝑒𝑤𝑐𝑙𝑎𝑠𝑠")
For check
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑐𝑙𝑎𝑠𝑠𝐿𝑖𝑠𝑡. 𝑐𝑜𝑛𝑡𝑎𝑖𝑛𝑠("𝑐𝑙𝑎𝑠𝑠𝑁𝑎𝑚𝑒")
• Element’s width & height – get the width and height of an element.
For box
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑜𝑓𝑓𝑠𝑒𝑡𝑊𝑖𝑑𝑡ℎ
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑜𝑓𝑓𝑠𝑒𝑡𝐻𝑒𝑖𝑔ℎ𝑡
For client
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑐𝑙𝑖𝑒𝑛𝑡𝑊𝑖𝑑𝑡ℎ
𝑒𝑙𝑒𝑚𝑒𝑛𝑡. 𝑐𝑙𝑖𝑒𝑛𝑡𝐻𝑒𝑖𝑔ℎ𝑡

By Suresh The Freedom Master

 Freedom Master tutorials
Working with Events
• JavaScript events – introduce you to the JavaScript events, the event models, and
how to handle events.
• Handling events – show you three ways to handle events in JavaScript.
• Page Load Events – learn about the page load and unload events.
• load event – walk you through the steps of handling the load event originating
from the document, image, and script elements.
• DOMContentLoaded – learn how to use the DOMContentLoaded event correctly.
• beforeunload event – guide you on how to show a confirmation dialog before
users leave the page.
• unload event – show you how to handle the unload event that fires when the page
is completely unloaded.
• Mouse events – how to handle mouse events.
• Keyboard events – how to deal with keyboard events.
• Scroll events – how to handle scroll events effectively.
• scrollIntoView – learn how to scroll an element into view.
• Focus Events – cover the focus events.
• haschange event – learn how to handle the event when URL hash changes.
• Event Delegation – is a technique of levering event bubbling to handle events at a
higher level in the DOM than the element on which the event originated.
• dispatchEvent – learn how to generate an event from code and trigger it.
• Custom Events – define a custom JavaScript event and attach it to an element.
• MutationObserver – monitor the DOM changes and invoke a callback when the
changes occur.

Scripting Web Forms

• JavaScript Form – learn how to handle form submit event and perform a simple
validation for a web form.
• Radio Button – show you how to write the JavaScript for radio buttons.
• Checkbox – guide you on how to manipulate checkbox in JavaScript.
• Select box – learn how to handle the select box and its option in JavaScript.

By Suresh The Freedom Master

 Freedom Master tutorials
• Add / Remove Options – show you how to dynamically add options to and
remove options from a select box.
• Removing Items from <select> element conditionally – show you how to remove
items from a <select> element conditionally.
• Handling change event – learn how to handle the change event of the input text,
radio button, checkbox, and select elements.
• Handling input event – handle the input event when the value of the input
element changes.

By Suresh The Freedom Master