1 $Which data structure best describes the Document Object Model (DOM)?$

A.

Stack

B.

Tree

C.

Queue

D.

Hash Map

2 $What is the return type of the method document.getElementById('header') if the element exists?$

A.

HTMLCollection

B.

NodeList

C.

HTMLElement

D.

Array

3 $Which method is used to select the first element that matches a specific CSS selector?$

A.

document.querySelectorAll()

B.

document.getElementsByClassName()

C.

document.querySelector()

D.

document.getElement()

4 $When using document.querySelectorAll(), what type of collection is returned?$

A.

A standard JavaScript Array

B.

A static NodeList

C.

A live HTMLCollection

D.

A JSON Object

5 $Which property allows you to access the text content of a node and its descendants, while being aware of CSS styling (like display: none)?$

A.

innerHTML

B.

textContent

C.

innerText

D.

nodeValue

6 $What is the primary security risk associated with using innerHTML to insert user-generated content?$

A.

Cross-Site Request Forgery (CSRF)

B.

Cross-Site Scripting (XSS)

C.

SQL Injection

D.

Memory Leaks

7 $To traverse to the immediate parent of a specific DOM node, which property should be used?$

A.

node.previousSibling

B.

node.parentNode

C.

node.childNodes

D.

node.ancestor

8 $Which method creates a new HTML element node in memory but does not attach it to the DOM tree?$

A.

document.append()

B.

document.createElement()

C.

document.createTextNode()

D.

document.render()

9 $If you want to place a new node newNode directly before an existing node referenceNode within a parent parentNode, which method matches the syntax: ?$

A.

appendChild

B.

insertBefore

C.

prepend

D.

replaceChild

10 $Which property is best used to toggle a CSS class on an element?$

A.

element.className.toggle()

B.

element.style.toggle()

C.

element.classList.toggle()

D.

element.setAttribute('class')

11 $How do you modify a CSS variable (custom property) named --main-color on the root element using JavaScript?$

A.

document.documentElement.style.setProperty('--main-color', 'red')

B.

document.body.style.backgroundColor = 'red'

C.

document.documentElement.style.customProperty('--main-color', 'red')

D.

window.css.set('--main-color', 'red')

12 $Which method retrieves the final values of all CSS properties of an element after applying active stylesheets and computing values?$

A.

element.style

B.

window.getComputedStyle(element)

C.

document.getCSS(element)

D.

element.currentStyle

13 $In the context of the DOM, what is the difference between children and childNodes ?$

A.

children contains only Element nodes; childNodes contains all node types (text, comments, elements).

B.

children is a static list; childNodes is a live list.

C.

children includes text nodes; childNodes includes only HTML tags.

D.

There is no difference; they are aliases.

14 $Which attribute allows you to store custom data on an HTML element, accessible via the dataset property in JavaScript?$

A.

meta-*

B.

data-*

C.

aria-*

D.

custom-*

15 $What are the three phases of event propagation in the correct order?$

A.

Target, Bubbling, Capturing

B.

Capturing, Target, Bubbling

C.

Bubbling, Target, Capturing

D.

Target, Capturing, Bubbling

16 $Which method is used to stop an event from bubbling up the DOM tree?$

A.

event.preventDefault()

B.

event.stopPropagation()

C.

event.stopImmediatePropagation()

D.

event.halt()

17 $What is the purpose of event.preventDefault() ?$

A.

It stops the event from reaching parent elements.

B.

It prevents the browser's default behavior associated with the event (e.g., submitting a form).

C.

It removes the event listener after one execution.

D.

It pauses the JavaScript execution.

18 $What is Event Delegation ?$

A.

Creating a custom event and dispatching it manually.

B.

Attaching a single event listener to a parent element to manage events for its descendants.

C.

Using setTimeout to delay an event trigger.

D.

Assigning multiple functions to a single event listener.

19 $In an event handler, what is the difference between event.target and event.currentTarget ?$

A.

target is the element that triggered the event; currentTarget is the element the listener is attached to.

B.

target is the element the listener is attached to; currentTarget is the element that triggered the event.

C.

target refers to the mouse position; currentTarget refers to the keyboard state.

D.

They are always identical.

20 $To enable an event listener specifically during the capturing phase, what constitutes the third argument in addEventListener ?$

A.

false

B.

true or { capture: true }

C.

"capture"

D.

null

21 $Which developer tool tab is primarily used to inspect the DOM structure and modify CSS on the fly?$

A.

Console

B.

Sources

C.

Elements (or Inspector)

D.

Network

22 $What keyword can you write in your JavaScript code to automatically pause execution and open the debugger in the browser?$

A.

pause

B.

stop

C.

debugger

D.

break

23 $Which feature in Chrome DevTools helps identifying Layout Shifts (CLS) and rendering performance?$

A.

Lighthouse / Performance Tab

B.

Application Tab

C.

Memory Tab

D.

Security Tab

24 $In the Network tab of browser DevTools, what does the status code 404 indicate?$

A.

Server Error

B.

Success

C.

Not Found

D.

Unauthorized

25 $What is the primary purpose of a Module Bundler like Webpack or Vite?$

A.

To compile Java code to JavaScript.

B.

To combine multiple JavaScript files and dependencies into a single (or few) files for the browser.

C.

To run the backend server.

D.

To test the database connection.

26 $What is 'Tree Shaking' in the context of modern build tools?$

A.

Randomizing variable names for security.

B.

Eliminating dead (unused) code from the final bundle.

C.

Reorganizing the folder structure automatically.

D.

Splitting the CSS from the JavaScript.

27 $In Webpack, what is the role of a 'Loader'?$

A.

It loads the website in the browser.

B.

It transforms files other than JavaScript (like CSS, Images, TypeScript) into valid modules.

C.

It downloads npm packages.

D.

It manages the database connection.

28 $What is 'Minification'?$

A.

Making the browser window smaller.

B.

Removing whitespace, comments, and shortening variable names to reduce file size.

C.

Compressing images only.

D.

Writing less code manually.

29 $Which tool is primarily used for Linting (identifying code quality issues and potential bugs)?$

A.

Prettier

B.

ESLint

C.

Webpack

D.

Babel

30 $Which tool is primarily used for Code Formatting (enforcing style consistency like indentation and quotes)?$

A.

ESLint

B.

Prettier

C.

Jest

D.

PostCSS

31 $In a DOM tree, if Node A contains Node B, then:$

A.

A is a child of B.

B.

B is an ancestor of A.

C.

B is a descendant of A.

D.

A and B are siblings.

32 $Which method removes a node from the DOM tree in modern browsers?$

A.

node.delete()

B.

node.remove()

C.

document.erase(node)

D.

node.kill()

33 $What happens if you define a script with type="module" in your HTML?$

A.

It is executed immediately before the DOM is parsed.

B.

It is deferred by default and has its own scope (not global).

C.

It allows writing PHP inside HTML.

D.

It disables all JavaScript features.

34 $What is the concept of 'Hot Module Replacement' (HMR)?$

A.

Replacing hardware modules while the server is running.

B.

Updating modules in the browser at runtime without a full page refresh.

C.

Swapping JavaScript for Python.

D.

Replacing CSS with SASS.

35 $Using the Console API, which method displays data as an interactive table?$

A.

console.log()

B.

console.table()

C.

console.dir()

D.

console.list()

36 $If you perform, what allows you to use .forEach ?$

A.

querySelectorAll returns an Array.

B.

querySelectorAll returns a NodeList, which supports .forEach in modern browsers.

C.

You must convert it to an array first using Array.from .

D.

It is a syntax error.

37 $Which property would you use to change the background color of an element to blue via JavaScript?$

A.

element.style.background-color = 'blue'

B.

element.style.backgroundColor = 'blue'

C.

element.css.background = 'blue'

D.

element.setAttribute('color', 'blue')

38 $What is the standard configuration file name for ESLint?$

A.

eslint.config.js

B.

.eslintrc (or .eslintrc.json/js)

C.

lint.config

D.

package.json only

39 $To clone a node and all of its descendants (deep copy), how should cloneNode be called?$

A.

node.cloneNode()

B.

node.cloneNode(true)

C.

node.cloneNode(false)

D.

node.deepClone()

40 $Which event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets and images?$

A.

load

B.

DOMContentLoaded

C.

beforeunload

D.

readystatechange

41 $In a build pipeline, what is 'Transpilation' (e.g., using Babel)?$

A.

Converting TypeScript to Java.

B.

Converting modern JavaScript (ES6+) into backward-compatible JavaScript (ES5) for older browsers.

C.

Compressing image files.

D.

Translating comments into another language.

42 $What does the command npm run build typically do in a front-end project?$

A.

Starts a development server.

B.

Runs unit tests.

C.

Executes the build script defined in package.json to generate production assets.

D.

Installs dependencies.

43 $When debugging, what allows you to execute code in the context of the currently paused function?$

A.

The Console

B.

The Network Tab

C.

The Elements Tab

D.

The Application Tab

44 $Which DOM property creates a reference to the next node in the same tree level?$

A.

nextSibling

B.

firstChild

C.

parentNode

D.

childNodes

45 $How do you correctly remove an event listener named handleClick ?$

A.

element.removeEventListener('click', handleClick)

B.

element.deleteEventListener('click', handleClick)

C.

element.removeListener('click')

D.

element.off('click', handleClick)

46 $Which of the following is a benefit of using a 'CSS-in-JS' approach or Dynamic Styling?$

A.

It reduces the size of HTML files.

B.

It allows styles to be scoped to components and change based on application state (variables).

C.

It removes the need for a browser.

D.

It converts CSS to binary.

47 $What creates a 'Memory Leak' regarding event listeners?$

A.

Adding a listener to a button.

B.

Removing an element from the DOM but failing to remove the event listeners attached to it.

C.

Using console.log too often.

D.

Using querySelector instead of getElementById .

48 $In the context of linting, what does the --fix flag usually do?$

A.

It ignores all errors.

B.

It automatically corrects fixable errors (like missing semicolons or indentation).

C.

It deletes files with errors.

D.

It creates a report in PDF format.

49 $Which object represents the browser window and serves as the global scope in client-side JavaScript?$

A.

document

B.

root

C.

window

D.

console

50 $If you have a list of items <li>, and you want to log the text of the clicked item using Event Delegation on the parent <ul>, which property checks if the clicked target was actually an <li> ?$

A.

event.target.tagName === 'LI'

B.

event.target.type === 'LI'

C.

event.currentTarget.tagName === 'LI'

D.

event.isLi()

Unit 4 - Practice Quiz