Part 2 – Master JavaScript & Become a Real Developer | Full Course

Summary of the subtitles (Part 2: DOM + core JS to become a real developer)

Video/Series context

• Host: Harsh Vandana Sharma (Sherians Coding School)
• Part: 2 of 4 in a JavaScript-to-developer course
• Positioned as a “full course” with projects and ongoing updates (Instagram mentioned)

What the video covers (major technical topics)

1) DOM fundamentals + DOM manipulation goal

• DOM = Document Object Model
  • The browser converts the HTML into a tree of nodes (elements, text, comment nodes).
• Core idea:
  • DOM is not the topic; DOM manipulation is
  • Using JavaScript to change what’s displayed on the page.
• Examples of UI changes conceptually demonstrated:
  • show/hide banners
  • buttons triggering downloads
  • spinners/animations and moving UI layers
  • hover/scroll-based effects

2) Selecting elements (core DOM APIs)

• Single element selection
  • document.querySelector(...) (selects the first match)
• Multiple element selection
  • document.querySelectorAll(...) (returns a node list)
• Legacy-style alternatives mentioned:
  • getElementById
  • getElementsByClassName
• Emphasis:
  • querySelector uses CSS selector syntax (#id, .class, tag)
  • querySelector returns only the first match
  • querySelectorAll returns all matches

3) DOM manipulation: changing text/content

• Focus on updating element content using properties:
  • innerHTML
    • inserts HTML (tags get interpreted)
  • innerText / textContent
    • sets text (tags are treated as text)
• Debugging approach repeated:
  • uses console.dir / console.log to inspect properties on the selected node
• Practical recommendation:
  • Prefer textContent (faster; includes hidden text)
  • innerText is slower and reflects only visible text

4) Attribute manipulation (get/set/remove)

• Three attribute operations:
  • getAttribute(name) (read)
  • setAttribute(name, value) (update)
  • removeAttribute(name) (delete)
• Examples:
  • Change an <a> tag’s href to alter navigation destination
  • Change an <img> tag’s src to swap images
  • Remove href so the element no longer behaves like a link

5) Dynamic DOM manipulation (create/append/prepend/remove)

• Core methods:
  • document.createElement(tagName) (create new elements)
  • appendChild(child) (add at the end)
  • prepend(child) (add at the beginning)
  • removeChild(child) (delete nodes)
• Built examples (project-like tasks):
  • create and insert new <li> items into a <ul>
  • create and insert a new image into a <div> and apply size via classes
  • delete the first <li> in a list

6) Style manipulation vs class-based styling

• Two approaches:
  • Direct inline styling
    • element.style.property = value
    • (e.g., backgroundColor)
  • Class-based styling
    • classList.add(...)
    • classList.remove(...)
    • classList.toggle(...)
• Strong recommendation:
  • Use class-based styling for maintainability and cleaner CSS application

Practice + concept questions (“Confusion/QA”)

• Covers/asks common theory:
  • What is DOM?
  • DOM node types:
    • element node
    • text node
    • comment node
  • Difference between:
    • element node vs text node
    • getElementById vs querySelector
    • innerText vs textContent vs innerHTML
• Practice tasks include:
  • changing header text by ID
  • looping through list items (e.g., forEach / for) and printing text
  • replacing paragraph content that contains HTML tags using innerHTML
  • getting image src (via direct property or attribute)
  • setting image src (via setAttribute)
  • updating a link’s href

Event handling (major next section)

1) Events vs event listeners

• Event: what the user does (click, double-click, mouse move, typing, etc.)
• Event listener: the handler attached to run when the event occurs

2) Add/remove event listeners

• Add:
  • element.addEventListener(eventName, function)
• Remove:
  • element.removeEventListener(eventName, sameFunctionReference)
• Demonstrated logic:
  • click changes an element color
  • double-click changes it again
  • removal requires the same function reference

3) Common events covered

• Demonstrations include:
  • click
  • input
  • change
  • submit
  • mouseover, mouseout
  • mousemove
• Also mentions keyboard-like events:
  • keydown / keyup

4) Input event with conditional logic

• “As-you-type” behavior using input event:
  • prints typed value
  • handles backspace (value becomes empty/changes)
  • conditional logic for empty values (avoid printing nothing or use a default/spacing behavior)

Larger interactive examples inside the course

A) “Select device” dropdown using change event

• Builds a <select> with options that include value
• On change:
  • reads event.target.value
  • updates an <h3> (e.g., “Device selected”)
  • formatting via CSS (text-transform: capitalize)
• Key emphasis:
  • options must have value for meaningful event.target.value

B) Keyboard typing visualizer (window keydown + H1 update)

• Uses window.addEventListener('keydown', ...)
• Reads event.key to update text in an element (e.g., <h1>)
• Special case for space:
  • handles " " by inserting " " or a placeholder like "SPC"
  • adjusts styling via CSS letter-spacing when needed

C) Custom file upload UI using dynamic DOM + input[type=file]

• Hides the native file input:
  • display: none
• Creates a custom UI button that triggers the hidden input
• On file input change:
  • reads the filename via event.target.files[0].name
  • updates UI text to show selected filename
  • handles cancel case (files becomes empty/undefined) by checking existence (no optional chaining mentioned)

D) Form handling with submit + preventDefault

• Explains why form submit often reloads the page (wiping DOM changes)
• Fix:
  • event.preventDefault()
• Then:
  • uses form input values to dynamically create a “card”
    • creates elements like div, img, h3, h5, p
    • fills them from the form inputs
    • appends the new card into a container div
• After submit:
  • clears non-submit inputs by setting .value = ""

Main speakers / sources (from the subtitles)

• Harsh Vandana Sharma (host / instructor)
• Sherians Coding School (channel/source branding)