Section 1. Getting started
Section 4. 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.
- innerHTML – get and set the HTML content of an element.
- innerHTML vs. createElement – explain the differences beetween innerHTML and createElement when it comes to creating new elements.
- DocumentFragment – learn how to compose DOM nodes and insert them into the active DOM tree.
- 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.
- 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.
- insertAdjacentHTML() – parse a text as HTML and insert the resulting nodes into the document at a specified position.
- 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.
Section 5. Working with Attributes
- HTML Attributes & DOM Object’s Properties – understand the relationship between HTML attributes & DOM object’s properties.
- setAttribute() – set the value of a specified attribute on a element.
- 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.
Section 6. 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.
- classList property – manipulate CSS classes of an element.
- Element’s width & height – get the width and height of an element.
Section 7. Working with Events
- 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
- 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.
- MutationObserver – monitor the DOM changes and invoke a callback when the changes occur.
Section 8. Scripting Web Forms
submitevent and perform a simple validation for a web form.
- 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
- 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.
Learn how to toggle the visibility of the password.
A step-by-step guide you on how to develop a Word Counter app.
Build a Wikipedia Search application from scratch.