JavaScript DOM Manipulation Flashcards

Question 1

What is the Document Object Model in the context of web pages?

Accepted Answer

The Document Object Model is a tree-like representation of an HTML or XML document that the browser builds when it loads a page. Each HTML tag becomes an object called a node, and JavaScript can read, change, add, or remove these nodes to update what the user sees.

Question 2

Which method returns the first element that matches a CSS selector?

Accepted Answer

The querySelector method returns the first element in the document that matches a given CSS selector, or null if nothing matches. It accepts any valid selector string, such as an id with a hash, a class with a period, or a compound selector like div.card p.

Question 3

What does getElementById return, and why is it considered fast?

Accepted Answer

The getElementById method returns the single element whose id attribute matches the string you pass, or null if no such element exists. Browsers index ids efficiently, which makes this lookup one of the quickest ways to find a node. Ids should be unique on a page, since duplicates make results unpredictable.

Question 4

How do querySelectorAll results differ from live HTMLCollection results?

Accepted Answer

A NodeList returned by querySelectorAll is static, meaning it is a snapshot taken at the moment of the call and does not update when the page changes. By contrast, collections from methods like getElementsByClassName or the children property are live, so they reflect additions and removals automatically.

Question 5

Why should you wait for the DOM to load before running a script that selects elements?

Accepted Answer

Scripts that run before the HTML is parsed may search for elements that do not exist yet, which causes queries to return null. Placing the script tag at the end of the body or adding the defer attribute ensures the markup is available first.

Question 6

What does the closest method do, and when is it useful?

Accepted Answer

The closest method starts at an element and walks up through its ancestors, returning the first one that matches a CSS selector, or the element itself if it matches. It is useful when you receive an event target that might be a child element inside a card, and you need the card container.

Question 7

How can you select elements that sit inside a specific parent element?

Accepted Answer

Call querySelectorAll on the parent element rather than on the whole document, so the search is limited to that element's descendants. For example, container.querySelectorAll('li') returns only the list items inside that container. This scoped approach keeps code readable and avoids accidentally matching identical markup elsewhere on the page.

Question 8

What does Array.from do when applied to a NodeList, and why is it helpful?

Accepted Answer

Array.from converts a NodeList or HTMLCollection into a real array, which gives you access to array methods such as map, filter, and forEach. Converting first is a common habit because it lets you combine these methods in one readable chain. Converted arrays also stop changing when the page updates, which keeps loops stable.

Question 9

How do you change the value of an existing HTML attribute with JavaScript?

Accepted Answer

Use the setAttribute method, passing the attribute name and the new value as two strings, such as element.setAttribute('href', url). You can read the current value with getAttribute, and remove the attribute entirely with removeAttribute. Assigning to a matching property, such as element.id, also works for many attributes.

Question 10

How do you check whether an element has a particular attribute before reading it?

Accepted Answer

Call hasAttribute with the attribute name, which returns true or false without changing the element. This is useful because getAttribute returns null for a missing attribute, and a null check is clearer when the attribute is optional. You can also use hasAttribute to decide whether to render a fallback message.

Question 11

What is the difference between textContent and innerHTML?

Accepted Answer

The textContent property reads or sets the plain text of an element, treating angle brackets as literal characters. The innerHTML property reads or sets markup, so the browser parses whatever string you assign into new child elements. Prefer textContent for user supplied text, because assigning untrusted strings to innerHTML can introduce security vulnerabilities.

Question 12

What is the purpose of the innerText property, and how does it differ from textContent?

Accepted Answer

The innerText property is styling aware, so it returns only the text a user would see on screen, skipping hidden elements and collapsing some whitespace. The textContent property returns every text node in the subtree, including text inside elements hidden with CSS. Because innerText triggers layout calculation, it can be slower, so textContent is usually the better choice for reading or writing plain text.

Question 13

How do you read the value of a form input, and why is value different from the value attribute?

Accepted Answer

Read the value property of the input element, which reflects what the user currently sees or types. The value attribute in the HTML sets only the initial value when the page loads, and it does not change as the user edits the field. Once the user types, the property holds the current text, so scripts should read the property rather than the attribute.

Question 14

What do the dataset properties let you do with data attributes?

Accepted Answer

The dataset property gives you read and write access to all data-prefixed attributes on an element as a simple object. An attribute named data-user-id appears as dataset.userId, with the hyphenated name converted to camel case. This lets you store custom information in the HTML and read it in scripts.

Question 15

What is a boolean attribute such as disabled, and how do you control it with a property?

Accepted Answer

A boolean attribute is present or absent rather than holding a meaningful value, so its presence alone turns the feature on. The matching DOM property, such as button.disabled, is a true or false value that you can set directly. Assigning false removes the attribute and assigning true adds it.

Question 16

How do you update an image's source and alternative text in one step?

Accepted Answer

Assign new values to the src and alt properties of the image element, since each property reflects its matching HTML attribute. Both changes take effect immediately on the page without reloading it. Keep the alternative text meaningful, because screen readers announce it when the image is the content users need.

Question 17

What is the classList property, and what four main methods does it provide?

Accepted Answer

The classList property is a live object that represents the classes on an element and offers a convenient way to manage them. Its four main methods are add, remove, toggle, and contains, which insert, delete, switch, and check for a class name. Using these methods is safer than editing the className string by hand because you never have to worry about extra spaces.

Question 18

What does the second argument of toggle do?

Accepted Answer

The optional second argument of toggle is a boolean that forces the class on or off, regardless of its current state. Passing true adds the class and passing false removes it, which is handy when a single condition controls the appearance. Without the argument, toggle simply flips the class and returns true or false.

Question 19

What is the difference between the style property and a CSS class when changing appearance?

Accepted Answer

The style property sets inline styles directly on one element, and those values generally take precedence over rules in external stylesheets. A CSS class keeps presentation rules in the stylesheet, so several elements can share one definition. Toggling a class is usually preferred because it keeps design decisions in CSS.

Question 20

How do you read the computed style of an element, and why is it different from element.style?

Accepted Answer

Call window.getComputedStyle with the element, then read the property you need from the returned object. Unlike element.style, which shows only inline values you set, computed style reports the final value after all stylesheets and inheritance are applied. Computed values are read only, so you change appearance by updating classes or inline styles instead.

Question 21

How do you set a CSS custom property, such as a color variable, from JavaScript?

Accepted Answer

Call element.style.setProperty with the property name starting with two hyphens, followed by the value, such as setProperty(', accent', 'teal'). Stylesheets can then read the variable using the var function, so one script change updates every rule that uses it. To read it back, use getPropertyValue on the element's style object.

Question 22

What happens when you set a style property to an invalid value?

Accepted Answer

The browser silently ignores the assignment and keeps the previous value, so no error is thrown in the script. This is why a style change may appear to do nothing. Check the spelling of the property name and the units, such as px, and use the browser developer tools to confirm the computed result.

Question 23

How do you hide an element without removing it from the DOM?

Accepted Answer

Add a class that applies display none, or set the element's style.display property to none, which removes it from layout while keeping it in the tree. Its state, event listeners, and form values remain intact, so you can show it again later. This differs from deleting the node, which discards all of that.

Question 24

How do you remove every class from an element at once?

Accepted Answer

Set the className property to an empty string, or call element.removeAttribute('class') to delete the class attribute entirely. Assigning an empty string keeps the attribute present but empty, which is harmless in most cases. Use the attribute removal method when you want the markup to look as though no class was ever set.

Question 25

What is the difference between a text node and an element node?

Accepted Answer

An element node represents a tag such as div or p and can have attributes and child nodes. A text node holds only character data and has no children of its own. Whitespace between tags also produces text nodes, which is why childNodes and children can return different results.

Question 26

How do you create a new element and give it text content?

Accepted Answer

Call document.createElement with the tag name, such as 'li', to produce a detached element that is not yet visible on the page. Then set its textContent to add readable text. The element only appears once you insert it into the document with a method such as append.

Question 27

What is the difference between appendChild and append?

Accepted Answer

The appendChild method accepts exactly one node and returns that node, so it cannot take plain text directly. The append method accepts several nodes or strings in one call and returns nothing. Both add the new child at the end of the parent's list of children.

Question 28

How do you insert a new element before an existing reference element?

Accepted Answer

Use parent.insertBefore, passing the new node first and the reference node second, so the new node is placed directly ahead of the reference. The reference node must be a direct child of that parent or the call throws an error. Modern code can also use the before method on the reference element itself.

Question 29

What does cloneNode do, and what does passing true change?

Accepted Answer

The cloneNode method creates a copy of a node, so you can reuse existing markup without rebuilding it. Passing true makes a deep clone that includes all descendants, while passing false or no argument copies only the element itself. Cloned elements do not keep event listeners added with addEventListener, so you must reattach them.

Question 30

How do you remove an element from the document?

Accepted Answer

Call the remove method directly on the element, which takes it out of the tree without needing a reference to its parent. Older code often uses parent.removeChild(child) instead, and that form is still valid. Either way, the node is detached but can be reinserted later if your script keeps a reference to it.

Question 31

What is a DocumentFragment, and why would you use one to add many elements?

Accepted Answer

A DocumentFragment is a lightweight container that holds nodes without being part of the visible document tree. You append many new elements to the fragment, then insert the fragment once, which causes a single update to the page instead of many. This pattern reduces repeated layout work and keeps loops that build lists efficient.

Question 32

How would you build a list of items from an array of strings and add it to a page?

Accepted Answer

Create a parent element, then loop over the array and create one list item for each string, setting its textContent to the value. Append each item to the parent, and then insert the parent into the page. This approach avoids string building with innerHTML and keeps user text safe from markup injection.

Question 33

What is an event in the DOM, and how do you respond to one?

Accepted Answer

An event is a signal the browser fires when something happens, such as a click, a key press, or a page finishing loading. You respond by attaching a listener function to an element or target with addEventListener, which runs your code each time the event occurs.

Question 34

What arguments does addEventListener take, and what does the third one do?

Accepted Answer

The addEventListener method takes an event type string, a callback function, and an optional third argument called options. The options value can be a boolean for capture phase or an object with settings such as once and passive. Using once set to true removes the listener automatically after its first run.

Question 35

How does onclick differ from addEventListener for handling events?

Accepted Answer

The onclick property holds a single handler, so assigning a new function replaces the old one. The addEventListener method can attach many listeners to the same event on the same element without overwriting each other. Its options also support features such as capture and removal, which property handlers cannot offer.

Question 36

What does the event object's target property tell you?

Accepted Answer

The target property refers to the element where the event originally occurred, which may be a deeply nested child of the element with the listener. It is the starting point for finding the relevant element, often combined with closest. Use currentTarget instead when you need the element the listener is attached to.

Question 37

What is the purpose of event.preventDefault, and when would you call it?

Accepted Answer

The preventDefault method stops the browser from performing the action it would normally take for that event, such as following a link or submitting a form. You call it inside the listener when your script wants to handle the behavior itself, for example validating a form first.

Question 38

How do you read the value of a text input when the user presses a key?

Accepted Answer

Attach an input or keyup listener to the field, then read the value property inside the callback. The input event fires after the value changes, so the property already contains the latest characters. Reading the value in a keydown handler can miss the newest character, because the change has not been applied yet.

Question 39

Why should you call preventDefault on a submit event before validating a form?

Accepted Answer

Without preventDefault, the browser submits the form and navigates away as soon as the event finishes, before your checks can run. Calling it in the submit listener lets your script inspect the fields first. If validation passes, you can then send the data yourself with fetch or submit the form programmatically.

Question 40

What is event delegation, and why does it help with many similar elements?

Accepted Answer

Event delegation means attaching one listener to a shared parent and letting events bubble up from its children. Inside the handler, event.target identifies which child was clicked, so you can respond appropriately. This reduces the number of listeners you manage and also handles elements added to the page later.

JavaScript DOM Manipulation Flashcards

1Selecting and Reading Elements

2Changing Content and Attributes

3Classes and Inline Styles

4Creating and Removing Nodes

5Events and User Input

Learning Resources