Back to Subject

Unit 4: DOM Manipulation and Modern Tooling - Practice Quiz

INT219 — Front End Web Developer 60 Questions
0 Correct 0 Wrong 60 Left
0/60

1 What does "DOM" stand for?

Document Object Model (DOM) structure Easy
A. Dynamic Object Method
B. Data Object Model
C. Document Object Model
D. Document Order Module

2 How does the DOM represent an HTML document?

Document Object Model (DOM) structure Easy
A. As a tree-like structure of nodes
B. As a single, long string of text
C. As a flat list of elements
D. As a CSS stylesheet

3 In the DOM tree, what is the topmost node that serves as the entry point to the page's content?

Document Object Model (DOM) structure Easy
A. The <html> element
B. The document object
C. The <body> element
D. The window object

4 Which JavaScript method is specifically designed to select a single HTML element by its unique id?

DOM traversal and manipulation Easy
A. document.getElementsByClassName()
B. document.getElementById()
C. document.querySelector()
D. document.getElementsByTagName()

5 Which method should you use to select the first element that matches a specific CSS selector, like div.my-class?

DOM traversal and manipulation Easy
A. querySelector()
B. getElementById()
C. querySelectorAll()
D. getElementsByClassName()

6 To change the text inside a <p> tag while ensuring no HTML is rendered, which property is the safest to use?

DOM traversal and manipulation Easy
A. textContent
B. outerHTML
C. innerHTML
D. value

7 How can you change the CSS color property of an element to red using JavaScript?

Dynamic styling and content updates Easy
A. element.style = 'color: red;';
B. element.style.color = 'red';
C. element.color = 'red';
D. element.css('color', 'red');

8 What does the element.classList.add('new-class') method do?

Dynamic styling and content updates Easy
A. It removes the class new-class from the element.
B. It adds the CSS class new-class to the element.
C. It checks if the element has the class new-class.
D. It replaces all existing classes with new-class.

9 What is an "event" in the context of the DOM?

Event propagation and delegation Easy
A. A static property of an HTML element.
B. A signal from the browser that something has happened, like a mouse click or key press.
C. A JavaScript function that runs automatically.
D. An error in the code.

10 What is the default direction of event propagation in modern browsers, where an event travels from the target element up to its ancestors?

Event propagation and delegation Easy
A. Triggering
B. Bubbling
C. Delegation
D. Capturing

11 Which modern JavaScript method is used to attach an event handler (like a function) to an element?

Event propagation and delegation Easy
A. setHandler()
B. attachEvent()
C. addEventListener()
D. onclick()

12 Which browser developer tool panel is primarily used for logging messages and errors from your JavaScript code?

Debugging using browser developer tools Easy
A. Console
B. Network
C. Sources
D. Elements

13 In the developer tools, which panel allows you to inspect and edit the live HTML and CSS of a webpage?

Debugging using browser developer tools Easy
A. Performance
B. Console
C. Application
D. Elements

14 What is the primary purpose of the console.log() function?

Debugging using browser developer tools Easy
A. To display a pop-up alert message to the user.
B. To output information to the web console for debugging purposes.
C. To stop the script from executing at a certain point.
D. To write text directly onto the HTML page.

15 What is the main purpose of a JavaScript module bundler like Webpack or Vite?

Module bundling concepts using modern build tools Easy
A. To check JavaScript code for syntax errors.
B. To combine multiple JavaScript files into a single, optimized file for the browser.
C. To run JavaScript code on a server instead of in the browser.
D. To automatically format JavaScript code to a consistent style.

16 Which of the following is a popular JavaScript module bundler?

Module bundling concepts using modern build tools Easy
A. jQuery
B. React
C. Webpack
D. ESLint

17 What is the main function of a code linter like ESLint?

Code linting and formatting practices Easy
A. To reformat the code's indentation and line breaks.
B. To combine multiple code files into a single file.
C. To convert code from a newer to an older version of JavaScript.
D. To analyze code for potential errors and enforce coding standards.

18 What is the primary role of a code formatter like Prettier?

Code linting and formatting practices Easy
A. To bundle different scripts into a single file.
B. To minify code for production deployment.
C. To automatically enforce a consistent code style by reformatting code.
D. To find logical bugs and security vulnerabilities in the code.

19 Which JavaScript method is used to create a new HTML element from scratch?

DOM traversal and manipulation Easy
A. document.newElement()
B. document.build()
C. document.createElement()
D. document.makeElement()

20 To completely replace an element's content with new HTML content, which property is most suitable?

Dynamic styling and content updates Easy
A. innerHTML
B. style
C. textContent
D. outerText

21 Consider the following HTML snippet:

HTML
<div id="parent">
  <!-- Some comment -->
  <p>First paragraph</p>
  <span>A span</span>
</div>



What is the difference in output between document.getElementById('parent').childNodes.length and document.getElementById('parent').children.length?

DOM traversal and manipulation Medium
A. childNodes returns 3, while children returns 2.
B. childNodes returns 5, while children returns 2.
C. childNodes returns 2, while children returns 3.
D. Both will return 3.

22 Given the HTML below, if a user clicks on the <p> element, in what order will the alerts fire during the bubbling phase?

HTML
<div id="grandparent">
  <div id="parent">
    <p id="child">Click me!</p>
  </div>
</div>

<script>
  document.getElementById('grandparent').addEventListener('click', () => alert('grandparent'));
  document.getElementById('parent').addEventListener('click', () => alert('parent'));
  document.getElementById('child').addEventListener('click', () => alert('child'));
</script>

Event propagation and delegation Medium
A. grandparent, parent, child
B. parent, child, grandparent
C. Only 'child' will fire.
D. child, parent, grandparent

23 In the context of a module bundler like Webpack or Vite, what is the primary purpose of 'tree shaking'?

Module bundling concepts using modern build tools Medium
A. To remove unused code (dead-code elimination) from the final bundle.
B. To organize project files into a directory tree automatically.
C. To re-render the DOM in a more efficient, tree-like structure.
D. To dynamically load modules at runtime based on the user's navigation path.

24 What is the key difference between a code linter (like ESLint) and a code formatter (like Prettier)?

Code linting and formatting practices Medium
A. A linter analyzes code for potential errors and bad practices, while a formatter enforces a consistent code style.
B. A linter compiles code, while a formatter transpiles it.
C. A linter is for JavaScript only, while a formatter works with HTML and CSS.
D. A linter bundles modules, while a formatter minifies the code.

25 You need to apply ten different CSS style changes to a single DOM element in response to a user action. Which of the following approaches is generally most performant?

Dynamic styling and content updates Medium
A. Using element.setAttribute('style', 'color: red; font-size: 16px; ...');
B. Setting the innerHTML of the element's parent to recreate the element with a style attribute.
C. Defining a CSS class with all ten styles and adding that class to the element, e.g., element.classList.add('active-state');
D. Setting each style property individually, e.g., element.style.color = 'red'; element.style.fontSize = '16px'; ...

26 You notice a JavaScript function is being called with an incorrect value, but only after it has been executed hundreds of times in a loop. Which debugging feature would be most efficient for pausing execution only when the problematic value appears?

Debugging using browser developer tools Medium
A. Logging the value to the console on every iteration.
B. A conditional breakpoint with an expression that checks for the incorrect value.
C. Using the 'Pause on exceptions' feature.
D. A standard breakpoint at the start of the function.

27 Why is event delegation a recommended pattern for handling events on a large list of items, especially if items are added or removed dynamically?

Event propagation and delegation Medium
A. It attaches a single event listener to a parent element, which improves performance and automatically handles events for new child elements.
B. It stops event propagation completely, preventing memory leaks.
C. It allows each child element to have its own isolated event-handling logic without interfering with others.
D. It ensures that events are handled during the capturing phase instead of the bubbling phase.

28 What is the primary advantage of using document.createDocumentFragment() when appending multiple elements to the DOM?

DOM traversal and manipulation Medium
A. It is the only way to create custom HTML elements.
B. It automatically adds event listeners to all child elements that are appended.
C. It creates a virtual, off-screen DOM tree, allowing you to append multiple elements with a single reflow/repaint, improving performance.
D. It allows you to create elements that are not visible to the user.

29 Which of the following statements accurately describes the relationship between the DOM and an HTML document?

Document Object Model (DOM) structure Medium
A. The DOM is a styling language, similar to CSS, used to apply styles to the HTML document.
B. The DOM is a text file that is an exact copy of the HTML document.
C. The HTML document is generated by the browser based on the DOM structure.
D. The DOM is a programming interface (API) that represents the HTML document as a tree-like structure of objects, allowing it to be manipulated by scripts.

30 What is the key difference between setting an element's textContent versus its innerHTML?

Dynamic styling and content updates Medium
A. There is no functional difference; they are aliases for the same operation.
B. textContent automatically escapes HTML tags, treating them as plain text, while innerHTML parses and renders them as DOM elements.
C. innerHTML is faster because it does not parse HTML content.
D. textContent works only on <p> tags, while innerHTML works on all tags.

31 In a modern front-end build process, what is the typical role of a tool like Babel?

Module bundling concepts using modern build tools Medium
A. To format the code according to a predefined style guide.
B. To bundle all JavaScript modules into a single file.
C. To analyze the code for potential bugs and programming errors.
D. To transpile modern JavaScript (ES6+) code into a backwards-compatible version (like ES5) that older browsers can understand.

32 You have a CSS rule !important that is still being overridden by another style. Where in the Chrome Developer Tools would be the best place to investigate which style is taking precedence and why?

Debugging using browser developer tools Medium
A. The Sources tab, by placing a breakpoint inside the CSS file.
B. The Network tab, by inspecting the CSS file's headers.
C. The Elements tab, by selecting the element and viewing the 'Computed' and 'Styles' panes.
D. The Console tab, by looking for CSS-related error messages.

33 What is the effect of calling event.stopPropagation() inside an event listener?

Event propagation and delegation Medium
A. It stops the event from continuing its propagation journey through the DOM (i.e., it stops bubbling up or capturing down).
B. It prevents the default action for that event from occurring (e.g., a link navigating).
C. It triggers the same event on all sibling elements.
D. It removes the event listener from the element after it has fired once.

34 Given the following JavaScript code, what will the final structure of the <ul> element look like?

HTML
<ul id="myList">
  <li id="item1">Apple</li>
  <li id="item2">Banana</li>
</ul>

<script>
  const list = document.getElementById('myList');
  const item1 = document.getElementById('item1');
  const new_item = document.createElement('li');
  new_item.textContent = 'Cherry';
  list.insertBefore(new_item, item1);
</script>

DOM traversal and manipulation Medium
A. The list will be unchanged.
B.
HTML
<ul id="myList">
  <li>Cherry</li>
  <li id="item1">Apple</li>
  <li id="item2">Banana</li>
</ul>
C.
HTML
<ul id="myList">
  <li id="item1">Apple</li>
  <li id="item2">Banana</li>
  <li>Cherry</li>
</ul>
D.
HTML
<ul id="myList">
  <li id="item1">Apple</li>
  <li>Cherry</li>
  <li id="item2">Banana</li>
</ul>

35 A development team wants to ensure that every time a developer commits code, it is automatically checked for both stylistic consistency and potential logical errors (like using a variable before it's defined). Which combination of tools is best suited for this automated workflow?

Code linting and formatting practices Medium
A. A module bundler (Webpack) and a task runner (Gulp).
B. A JavaScript framework (React) and a CSS preprocessor (Sass).
C. Only a code formatter (Prettier), as it handles all code quality issues.
D. A code formatter (Prettier) and a code linter (ESLint), likely integrated with a pre-commit hook.

36 In the DOM tree, what type of node represents the actual text inside an element like <p>Hello World</p>?

Document Object Model (DOM) structure Medium
A. An ATTRIBUTE_NODE
B. An ELEMENT_NODE
C. A TEXT_NODE
D. A CONTENT_NODE

37 What is the purpose of the dataset property on an HTML element in JavaScript?

Dynamic styling and content updates Medium
A. To store styling information that is an alternative to CSS.
B. To get and set custom data attributes (data-*) on an element in a structured way.
C. To define the type of data that a form input should accept.
D. To access large datasets from a remote server via an API.

38 You are trying to debug a complex layout issue where an element is not sized or positioned as expected. Which feature in browser developer tools would be most helpful for visualizing the element's box model (margin, border, padding, and content)?

Debugging using browser developer tools Medium
A. The box model visualizer, typically found in the Elements tab under the 'Computed' pane.
B. The Sources tab, to view the original CSS source code.
C. The Console, to log the element's offsetWidth and offsetHeight.
D. The Network tab, to check if the CSS file loaded correctly.

39 What problem do module bundlers primarily solve in the context of front-end development?

Module bundling concepts using modern build tools Medium
A. They manage the browser's HTTP request-response cycle for the developer.
B. They prevent developers from writing code with syntax errors.
C. They provide a runtime environment for executing JavaScript outside the browser.
D. They process and combine many separate JavaScript modules into fewer files (often just one) to optimize for browser loading.

40 Consider an element <button id="myBtn">Click</button>. Which JavaScript selector would find the closest ancestor element that has the class container?

DOM traversal and manipulation Medium
A. document.getElementById('myBtn').findAncestor('.container')
B. document.getElementById('myBtn').querySelector('.container')
C. document.getElementById('myBtn').parentNode('.container')
D. document.getElementById('myBtn').closest('.container')

41 Consider the following HTML structure and JavaScript code. What is the final output logged to the console when the child div is clicked?

HTML
<div id="parent">
  <div id="child">Click Me</div>
</div>



JAVASCRIPT
const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', () => console.log('Parent Bubble'), false);
parent.addEventListener('click', () => console.log('Parent Capture'), true);

child.addEventListener('click', (e) => {
  console.log('Child Bubble');
  e.stopImmediatePropagation();
}, false);

child.addEventListener('click', () => console.log('Child Capture'), true);
child.addEventListener('click', () => console.log('Child Bubble 2'), false);

Event propagation and delegation Hard
A. Parent Capture, Child Capture, Child Bubble, Child Bubble 2, Parent Bubble
B. Parent Capture, Child Capture, Child Bubble, Parent Bubble
C. Parent Capture, Child Capture, Child Bubble, Child Bubble 2
D. Parent Capture, Child Capture, Child Bubble

42 In a Webpack configuration, you are trying to implement long-term caching using [contenthash]. You notice that changing a CSS file also changes the content hash of your main JavaScript entry bundle, even though the JS code itself hasn't changed. What is the most likely cause and solution for this behavior?

Module bundling concepts using modern build tools Hard
A. The CSS is imported directly into a JavaScript file, making it part of the JS module's dependency graph. The solution is to use optimization.splitChunks to separate CSS.
B. This is caused by the Webpack runtime and manifest being embedded in the main JS bundle. The solution is to use optimization.runtimeChunk: 'single' to extract the runtime into a separate chunk.
C. Babel is transpiling the CSS import statements in a way that changes the JS output. The solution is to exclude CSS files from babel-loader.
D. The MiniCssExtractPlugin is configured incorrectly, causing it to inject metadata into the JavaScript bundle. The solution is to ensure the plugin's filename option uses [contenthash].

43 You are tasked with improving the performance of a script that adds 1000 <li> elements to a <ul> in the DOM. Which of the following methods is generally the most performant and why?

Method A: Loop 1000 times, creating an <li> and calling ul.appendChild() in each iteration.
 Method B: Loop 1000 times, creating an <li> and appending it to a DocumentFragment, then appending the fragment to the ul once.
* Method C: Build a single string of 1000 <li> elements and set ul.innerHTML with this string.

DOM traversal and manipulation Hard
A. Method A is most performant because modern JavaScript engines heavily optimize sequential appendChild calls into a single repaint.
B. Method C is most performant because it involves a single DOM operation and avoids the overhead of creating DOM objects in JavaScript.
C. Method B is most performant because it minimizes reflows/repaints by manipulating a detached DOM tree and attaching it only once.
D. Method B and C have nearly identical performance, but B is safer as it prevents XSS vulnerabilities that can occur with innerHTML.

44 A script needs to apply several style changes to an element and then read its final dimensions. The code is structured as follows:

JAVASCRIPT
const element = document.getElementById('my-box');
element.style.width = '100px';
element.style.height = '100px';
element.style.opacity = '0.5';

// Read dimensions
const rect = element.getBoundingClientRect();
console.log(rect.width);

element.style.opacity = '1';



Which statement best describes the performance implications of this code?

Dynamic styling and content updates Hard
A. The call to element.getBoundingClientRect() forces a synchronous reflow (layout) to calculate the correct dimensions, negating the browser's ability to batch the preceding style changes.
B. The browser will only perform a repaint, not a reflow, because changing opacity does not affect layout.
C. This code causes a memory leak because rect holds a reference to the element's layout properties.
D. The browser batches all style changes and applies them asynchronously after the script finishes, so there is no performance penalty.

45 While using the Chrome DevTools Performance profiler, you observe a large, solid purple block labeled 'Layout' in the flame chart, which is causing significant UI jank. What is the most effective initial step to diagnose the root cause of this 'forced synchronous layout'?

Debugging using browser developer tools Hard
A. In the 'Performance' tab, find the 'Layout' event, click on it, and inspect the 'Summary' and 'Call Stack' in the details pane to identify the specific JavaScript code that triggered the layout calculation.
B. Use the 'Memory' tab to take a heap snapshot and look for detached DOM nodes.
C. Add console.log() statements throughout the suspected code paths and re-run the profiler to correlate logs with the purple block.
D. In the 'Performance' tab, enable the 'Layout Shift Regions' checkbox and re-record to visually identify which elements are moving.

46 Your team uses ESLint and Prettier, but you encounter a conflict: Prettier formats code in a way that violates an ESLint rule (e.g., max-len). What is the standard, recommended practice for resolving such conflicts and ensuring a smooth developer experience?

Code linting and formatting practices Hard
A. Use the eslint-plugin-prettier and eslint-config-prettier packages. eslint-config-prettier disables conflicting ESLint rules, and eslint-plugin-prettier runs Prettier as an ESLint rule.
B. Disable the conflicting ESLint rule manually in the .eslintrc file, as Prettier should always have the final say on formatting.
C. Configure your code editor to run Prettier first, then ESLint, automatically fixing any issues in that specific order on save.
D. Write a custom Git pre-commit hook that runs prettier --write followed by eslint --fix, committing the result.

47 When an event originating from within a Shadow DOM is dispatched, and it crosses the shadow boundary into the light DOM, what happens to the event.target property as observed by listeners in the light DOM?

Document Object Model (DOM) structure Hard
A. event.target becomes null or undefined for listeners outside the shadow boundary.
B. event.target always refers to the original element inside the Shadow DOM, maintaining encapsulation.
C. event.target is retargeted to be the host element of the Shadow DOM to preserve its encapsulation.
D. An error is thrown because events are not allowed to cross the shadow boundary by default.

48 You're using an ES module-based library and have configured Webpack for tree-shaking. However, you notice that a large, unused portion of the library is still included in your final bundle. The library's package.json does NOT have a "sideEffects" field. Which of the following is the most probable cause for the tree-shaking failure?

Module bundling concepts using modern build tools Hard
A. The library was imported using a dynamic import() expression, which bundlers cannot statically analyze.
B. Your webpack.config.js is missing the mode: 'production' setting, which is required to enable tree-shaking optimizations.
C. The library's code contains a top-level function call or modifies a global object (e.g., window.myLib = {}), which is considered a side effect that Webpack cannot safely remove.
D. The library was authored in CommonJS (require/module.exports) and transpiled to ES modules, which often breaks tree-shaking compatibility.

49 What is a key difference between a NodeList returned by document.querySelectorAll() and an HTMLCollection returned by document.getElementsByTagName() in modern browsers?

DOM traversal and manipulation Hard
A. HTMLCollection is live, meaning it automatically updates if the DOM changes. NodeList from querySelectorAll is static.
B. HTMLCollection has a forEach method, while NodeList does not and requires Array.from() to be used for iteration.
C. NodeList is an array, while HTMLCollection is an array-like object.
D. NodeList can only contain Element nodes, while HTMLCollection can contain Element nodes, Text nodes, and Comment nodes.

50 You are implementing event delegation on a complex list where each <li> contains multiple nested elements. You want to trigger a function only when a click originates specifically on a <span> with the class .icon inside any <li>. Which event handler implementation is the most robust and efficient?

HTML
<ul id="myList">
  <li>Item 1 <span class="icon">X</span></li>
  <li>Item 2 <button>Action <span class="icon">Y</span></button></li>
</ul>

Event propagation and delegation Hard
A.
JAVASCRIPT
list.addEventListener('click', (e) => {
  if (e.target.className === 'icon') {
    // handle click
  }
});
B.
JAVASCRIPT
list.addEventListener('click', (e) => {
  const icon = e.target.closest('.icon');
  if (icon && list.contains(icon)) {
    // handle click
  }
});
C.
JAVASCRIPT
list.querySelectorAll('.icon').forEach(icon => {
  icon.addEventListener('click', (e) => {
    e.stopPropagation();
    // handle click
  });
});
D.
JAVASCRIPT
list.addEventListener('click', (e) => {
  if (e.target.tagName === 'SPAN' && e.target.classList.contains('icon')) {
    // handle click
  }
});

51 To achieve a smooth, high-performance animation in JavaScript (e.g., moving an element across the screen), why is using requestAnimationFrame(callback) superior to using setInterval(callback, 16) or a recursive setTimeout(callback, 16)?

Dynamic styling and content updates Hard
A. requestAnimationFrame allows a higher frame rate, up to 120fps, while setInterval is capped at 60fps (~16ms).
B. requestAnimationFrame runs on a separate thread from the main JavaScript thread, preventing the animation from blocking other scripts.
C. requestAnimationFrame callbacks receive a high-resolution timestamp argument, which is necessary for calculating physics-based motion.
D. The browser can optimize animations scheduled with requestAnimationFrame by grouping them into a single reflow/repaint cycle, and it will pause them in inactive tabs, saving CPU and battery life.

52 You're debugging a complex JavaScript application and suspect a specific function, updateState(), is being called with an invalid argument, but only under very specific, hard-to-reproduce conditions. The function is called thousands of times. What is the most efficient way to pause execution only when updateState(arg) is called where arg.id is null?

Debugging using browser developer tools Hard
A. Set a standard breakpoint at the beginning of updateState() and manually inspect arg each time execution pauses.
B. Set a conditional breakpoint at the beginning of updateState() with the condition arg.id === null.
C. Place console.log(arg) inside the function and manually watch the console output for a null id.
D. Use a Logpoint at the beginning of updateState() with the expression "Argument:", arg to avoid pausing execution.

53 What is the primary purpose of the overrides key in an ESLint configuration file (.eslintrc.js) and in what scenario is it most critically used?

Code linting and formatting practices Hard
A. To override the severity of a specific rule from "error" to "warn" for the entire project.
B. To specify a different parser, like @typescript-eslint/parser, for the entire project instead of the default.
C. To apply a different set of rules for a specific list of files or file glob patterns, such as having stricter rules for test files.
D. To define global variables that ESLint should not flag as undefined, like $ for jQuery.

54 Which of these statements accurately describes the relationship between the DOM, CSSOM, and the Render Tree?

Document Object Model (DOM) structure Hard
A. The DOM and CSSOM are parsed independently and have no direct relationship; the browser uses them separately to paint the page.
B. The Render Tree is created by combining the DOM and CSSOM; it includes only the nodes that are visually rendered, so elements like <head> or those with display: none; are excluded.
C. The CSSOM is a part of the DOM, representing style information as attributes on DOM nodes.
D. The Render Tree is a direct 1:1 copy of the DOM tree, with style information attached to each node from the CSSOM.

55 In the context of Webpack, what is the fundamental difference between a loader and a plugin?

Module bundling concepts using modern build tools Hard
A. Loaders are used for transpiling JavaScript (e.g., Babel), while plugins are used for handling other asset types like CSS and images.
B. Loaders operate on individual files as they are being added to the dependency graph, while plugins operate on the bundle as a whole at various points in the compilation lifecycle.
C. Plugins are configured in the module.rules array of the Webpack config, whereas loaders are configured in the top-level plugins array.
D. Loaders are officially maintained by the Webpack team, while plugins are exclusively third-party additions.

56 Given the following HTML snippet, what will el.querySelector(':scope > .c') select, where el is the DOM element with the ID a?

HTML
<div id="a">
    <div class="c">
        <!-- C1 -->
        <div class="b">
            <div class="c"></div> <!-- C2 -->
        </div>
    </div>
    <div class="b">
        <div class="c"></div> <!-- C3 -->
    </div>
</div>

DOM traversal and manipulation Hard
A. It will throw a syntax error because :scope is not valid in querySelector.
B. It will select only the div commented with C1.
C. It will select all three divs with class c.
D. It will select the divs commented with C1 and C3.

57 What is the primary difference between setting an element's opacity to 0 and setting its display to none?

Dynamic styling and content updates Hard
A. display: none is animatable using CSS transitions, whereas opacity: 0 is not.
B. opacity: 0 makes the element invisible but it still occupies its space in the layout and can receive events. display: none removes the element from the layout flow and it cannot receive events.
C. Both make the element invisible and remove it from the document layout flow.
D. opacity: 0 removes the element from the accessibility tree, while display: none does not.

58 Under what specific circumstance would you need to use pointer-events: none; in CSS as part of a complex event delegation strategy?

Event propagation and delegation Hard
A. When an element (e.g., a decorative overlay <div>) is positioned on top of another element that needs to be clickable, allowing clicks to 'pass through' the overlay to the element below.
B. To improve rendering performance by telling the browser it doesn't need to calculate hit-testing for the element.
C. To prevent an element from triggering any JavaScript events whatsoever.
D. To disable CSS hover effects on an element.

59 What is the primary purpose of a 'source map' (.js.map file) generated by a build tool like Webpack, and how does it relate to debugging?

Module bundling concepts using modern build tools Hard
A. It is a map of all dependencies in the project, used by the bundler for tree-shaking.
B. It provides metadata for package managers like NPM to resolve module versions correctly.
C. It is a lightweight version of the bundle used during development for faster hot module replacement (HMR).
D. It is a JSON file that maps the code within a bundled/minified/transpiled file back to its original position in the source files, allowing developers to debug their original code in the browser.

60 Consider the following code intended to remove all child nodes from a div with the id container. Why is the first approach problematic, while the second one works correctly?

JAVASCRIPT
// Approach 1 (Problematic)
const container1 = document.getElementById('container');
const children1 = container1.children;
for (let i = 0; i < children1.length; i++) {
    container1.removeChild(children1[i]);
}

// Approach 2 (Correct)
const container2 = document.getElementById('container');
while (container2.firstChild) {
    container2.removeChild(container2.firstChild);
}

DOM traversal and manipulation Hard
A. Approach 1 fails because container.children returns a live HTMLCollection. As children are removed, the collection shrinks and children.length changes, causing the loop to terminate prematurely and skip elements.
B. Approach 1 throws an error because you cannot iterate and modify a collection at the same time.
C. Approach 2 is inefficient because container.firstChild causes a reflow in every iteration of the loop.
D. Approach 1 fails because children is a static NodeList, which doesn't update during the loop.
Previous MCQ
Unit 3
Next MCQ
Unit 5