JavaScript DOM from Beginner to Advanced: Complete Course + Practice
The Document Object Model (DOM) is a representation of an HTML document as a tree of objects that can be manipulated using JavaScript. In this video, we'll look at the Document Object Model (DOM) and how the browser creates the DOM when a page loads. Without the DOM in JavaScript, web pages would be static, but with it, we can dynamically change content.
Mentoring before employment:
https://reactify.ru
Interview simulator:
https://yeahub.ru/
Testimonials:
https://t.me/mentor_reactify
Telegram channel:
https://t.me/reactify_IT
Recordings of mentoring sessions:
https://t.me/reactify_community_bot
00:00: DOM is the object tree of an HTML document, accessible via document.
00:00:57: JavaScript modifies the DOM to dynamically update the interface.
00:01:54 DOM node types: elements, text, attributes, document.
00:02:50 Basic DOM objects: document, element, node.
00:04:01 Additional objects: window and event for working with the browser.
00:05:00 Search methods: getElementById, querySelector, querySelectorAll.
00:06:53 HTMLCollection is live, NodeList is a static snapshot of elements.
00:07:53 Project setup: HTML, CSS, JavaScript.
00:08:17 Including JS via defer or before body.
00:09:13 getElementById for changing element styles.
00:10:10 getElementsByClassName for working with multiple elements.
00:11:07 The YeaHub platform for interview preparation.
00:13:05 Navigating the DOM: children, parentNode, nextElementSibling.
00:15:01 Node is the basic block, Element is an HTML tag.
00:16:56 The closest and parent methods for finding elements.
00:18:20 childNodes includes text and comments, children only elements.
00:19:19 Element is a special case of Node (tags).
00:20:16 Changing content: textContent, innerHTML, outerHTML.
00:21:15 Working with attributes: getAttribute, setAttribute, removeAttribute.
00:22:09 classList for adding, removing, and toggling classes.
00:23:06 Changing styles via style and getComputedStyle.
00:24:55 Examples: innerHTML for inserting HTML, outerHTML for replacing.
00:27:02 setAttribute for adding attributes, removeAttribute for removing them.
00:28:55 classList.add/remove/toggle for managing classes.
00:29:29 Adding a class on click via classList.
00:30:27 Changing styles via JS, avoiding redundant markup.
00:31:55 HTML — structure, CSS — styles, JS — interactivity.
00:32:55 Creating elements: document.createElement, insertion methods.
00:34:20 Removing elements: removeChild, remove.
00:35:18 Dynamic markup: creating lists, buttons, text.
00:36:37 Events: clicks, keyboard, forms, page load.
00:38:33 Adding/removing handlers for optimization.
00:39:22 Event object: type, target, coordinates, preventDefault.
00:40:21 Event phases: capture, target, bubbling.
00:42:13 Example of nested elements and event bubbling.
00:43:14 stopPropagation to cancel bubbling, event delegation.
00:45:03 Scroll control: scrollTo, scrollBy.
00:46:03 Events are the basis of interactivity (clicks, forms, keyboard).
00:48:53 Hands-on: creating a task scheduler.
00:51:30 Form processing: intercepting data, inserting tasks.
00:52:28 Finding a form via getElementById.
00:53:52 Adding a submit event, canceling default behavior.
00:54:50 Getting the input value via value.
00:55:47 Creating a task element via createElement.
00:57:33 Adding a task to the list via appendChild.
00:58:58 Function for creating a task with the text from the input.
01:00:46 Handling task deletion via a click event.
01:13:43 Event delegation for optimization.
01:15:40 Identifying tasks via data-task-id.
01:18:09 Updating tasks, searching by ID on click.
01:19:01 Separating events: deleting and changing status.
01:21:37 Code optimization through templates and delegation.
01:23:27 DOM API — the foundation of front-end development.
01:24:26 Hands-on: calculator, weather, online cinema.
01:26:26 Using free APIs and mockups for projects.
01:26:26 Conclusion
#frontend #javascript