What is the difference between getElementById and getElementsByTagName?

getElementById is used to select a single unique element by its ID attribute, whereas getElementsByTagName selects all elements of a specific tag type and returns an HTMLCollection (a collection of objects).

How do innerText, innerHTML, and textContent differ?

innerHTML considers all content including nested HTML tags; textContent includes the text and respects spacing but ignores HTML tags; innerText ignores both HTML tags and extra spacing.

How can you change CSS styles using JavaScript?

You can access the element's style object (e.g., element.style.property) and assign values. Note that multi-word CSS properties must be written in camelCase, such as fontSize instead of font-size.

What is the main difference between querySelector and querySelectorAll?

querySelector always returns the first matching element as a single object, while querySelectorAll returns a collection of all matching elements.

How do you add a newly created element to the webpage?

After creating an element with document.createElement and setting its content, you must use a method like appendChild on a parent element (such as document.body) to insert it into the DOM tree.

Can you remove an element using JavaScript?

Yes, once you have selected the object representing the HTML element, you can call the .remove() method directly on that object to delete it from the DOM.

DOM Manipulation | JavaScript in Depth

DOM Selection Methods
📌 Use `document.getElementById('idName')` to select a single unique element by its ID.
📌 Use `document.getElementsByTagName('tagName')` or `document.getElementsByClassName('className')` to retrieve an HTMLCollection (an array-like object) when multiple elements share the same tag or class.
📌 Utilize `document.querySelector('selector')` for single-element selection using CSS syntax, or `document.querySelectorAll('selector')` to return a NodeList of all matching elements.

Content Manipulation Properties
✨ innerText: Modifies only the visible text content, ignoring CSS styling and hidden elements.
✨ textContent: Returns or sets the text of a node and its descendants, including formatting and spacing, but excludes HTML tags.
✨ innerHTML: Retrieves or modifies the content including any nested HTML tags, making it powerful for dynamic content generation.

Styling and Dynamic DOM Updates
🎨 Access the `style` object on any element to modify CSS properties using camelCase (e.g., `element.style.fontSize = '20px'`).
💡 Access the entire page style directly via `document.body.style` to apply global changes without needing specific element selectors.
🏗️ Create new elements using `document.createElement('tagName')` and attach them to the DOM tree using `.appendChild()` to update the page structure dynamically.
🗑️ Remove elements from the DOM by selecting the specific object and calling the `.remove()` method.

Key Points & Insights
➡️ DOM API vs. DOM: The DOM is a C++ based structure provided by the browser, while the DOM API consists of JavaScript functions used to interact with and manipulate that structure.
➡️ Selection Nuances: `querySelector` returns a single object even if multiple elements match the criteria, whereas `querySelectorAll` or `getElementsBy...` methods return a collection that must be accessed via indices (e.g., `[0]`, `[1]`).
➡️ Performance/Best Practice: When manipulating multiple elements (like those returned by `getElementsByClassName`), treat the result as an array/collection and iterate through it to apply changes to specific instances.
➡️ Element Attachment: Creating an element in memory via `createElement` does not render it; it must be explicitly appended to an existing parent node (like `document.body`) within the DOM tree to become visible.

📸 Video summarized with SummaryTube.com on Apr 01, 2026, 07:13 UTC

DOM Manipulation | JavaScript in Depth

Related Products

Loading Similar Videos...

Recently Summarized Videos

📜Transcript

📄Video Description

Loading Similar Videos...

Recently Summarized Videos

💎Related Tags

Get the Chrome Extension