Read and Update the DOM Safely

A browser represents the page currently on screen as a live DOM tree. The top entry point is the document object. Inside it are element nodes, such as main, h1, p, ul, and li, plus text nodes that hold words such as “Reading List.”

Tree relationships describe structure: the ul is the parent of its li children, and the two book li elements are siblings. This live tree is what browser JavaScript will work with throughout this tutorial.

In one local folder, create these three files. Paste the complete source below into index.html. It links the stylesheet and loads script.js with defer. Keep this starter page unchanged as later steps replace only the contents of script.js.

index.html

styles.css

script.js

Open index.html in your browser and open the Console. The message confirms that script.js can reach the current document.

The saved index.html is source on your computer; the DOM is the browser's current in-memory tree. A temporary DevTools edit changes the current page, not the saved file. Reloading reconstructs the DOM from the saved HTML and runs script.js again.

document.querySelector() starts at the document and accepts a CSS selector. It returns the first matching element.

Store that result in a clearly named variable before you use it. On the Reading List page, '#page-title' identifies the page heading.

A selector can be valid but still find nothing. In that case, querySelector() returns null, not an element.

Replace the current contents of script.js with this code, save, then refresh the local page. Open the browser Console to inspect the result.

Check for null before accessing an element’s properties or methods. The else branch is the only place where this script uses heading, so it runs only when an element was found.

This separates a normal missing-element case from code that expects an element. It also makes the variable’s purpose clear: heading holds the selected heading or null.

querySelectorAll() finds every element that matches a CSS selector and returns a NodeList in document order. On the Reading List page, document.querySelectorAll('#reading-list .book') finds the two book li elements: first HTML Basics, then CSS Layouts.

A NodeList is not an Array, but this NodeList provides useful features including .length and .forEach(). Each entry refers to an actual element in the current DOM tree.

Replace the previous example in script.js, refresh the page, and inspect the output in the Console.

A selector can be valid but match nothing. Replace script.js with this example, refresh, and inspect the Console.

querySelector() returns null when it finds no element. In contrast, querySelectorAll() returns an empty NodeList, not null.

An empty NodeList has length 0, and its forEach() runs no callbacks because there are no entries to visit.

textContent reads the text contained by an element. On the starter page, #message contains the text Two books ready., so its textContent is that string.

Assigning to textContent replaces the selected element’s child content with a text node. It is useful when you want displayed characters to remain text—not page structure.

In script.js, replace the previous example with this code. Save the file and refresh the page. The Console first shows the message’s original text; then the page updates.

An attribute is named information attached to an element in the DOM tree. For the Reading List, work with the ordinary text attribute title on #reading-list.

Use getAttribute('title') to read it. The result is a string when the attribute exists, or null when it is absent. That makes “no title attribute” different from a title whose value happens to be an empty string.

Replace script.js with this code, save, refresh the local page, and inspect the Console. The final call leaves the Reading List with its fixed title attribute.

setAttribute() adds the attribute when it is missing and updates it when it already exists. In contrast, removeAttribute() removes the attribute itself; assigning '' only creates or keeps an attribute whose value is an empty string.

After refreshing, use the browser’s Elements inspector to select #reading-list. Its title attribute should be Books to explore after the previous script finishes.

Now replace script.js with this version. It compares an empty attribute value with an absent attribute, then restores the fixed title.

A control has live properties on its DOM element. They describe what the control contains or does now:

• bookTitle.value is the text currently in the input.
• highlightBook.checked is the checkbox’s current boolean state.
• previewButton.disabled is whether the button is currently unavailable.

HTML attributes establish markup and often initial defaults. After someone edits a control, read its property—not its original attribute—to learn the current state.

Replace script.js with this complete file, save it, and reload the local page. The first three log lines read the starter state. The assignments then change the current page: they do not rewrite index.html.

script.js

Keep the page open after the script runs. Change the input text to Changed in the page and check the checkbox yourself. Do not reload.

Then use the Console to inspect the current page. No event listener is needed: the browser has already applied your manual edits, and the properties expose their current state.

Console

An element can carry more than one CSS class. On a Reading List item, book supplies the base styling, while is-highlighted supplies optional emphasis.

classList.add('is-highlighted') adds that one class token without replacing book. Likewise, classList.remove('is-highlighted') removes only the named class. Pass class names to classList without the CSS dot.

Work with an existing list item in this step. The explicit null check ensures class operations run only when the intended element was found.

Replace script.js with this code, save, and refresh the local page. The first Reading List item receives emphasis, then returns to its base appearance. The Console records its class attribute after each change.

classList.toggle() has two different behaviors:

• With one argument, it reverses whether that class is present. Run the same call twice and the second call undoes the first.
• With a second boolean argument, it forces a result: true makes the class present and false makes it absent.

For a one-time update based on the control as it is now, use highlightBook.checked as the second argument. This reads the checkbox’s current property; it does not create an automatic response to later checkbox changes.

Replace the previous script.js with this version, save, and refresh. Watch the first book and inspect the Console. Two ordinary toggles alternate its appearance. The two boolean-forced calls both use the checkbox’s current checked value, so they leave the same result each time.

document.createElement('li') makes an element object, but does not put it into the DOM tree. The new element has no parent until code inserts it.

Prepare the detached li first: assign its textContent and add its base book class. Then call append() on #reading-list. append() inserts the configured element after the list’s existing children.

Replace script.js with this code, save, and refresh the unchanged starter page. The original two books stay in place and the configured new book appears last.

Child-element methods affect the children of the element that receives the method. Target readingList, not an ancestor that also contains the input, checkbox, and button.

replaceChildren(newBook) removes the list’s current children and inserts the supplied child. With no arguments, replaceChildren() clears the list. book.remove() detaches that selected list item from the document.

A NodeList returned earlier is static. After an update, run querySelectorAll() again when you need a fresh selection that includes the current list membership.

This replacement script.js removes the first original book, replaces the remaining list children with one new book, then creates a fresh NodeList. Save, refresh, and inspect the Console.

You have already learned each DOM operation separately. Now combine them in one helper: previewBook().

Each time you call it, the helper selects the required elements, explicitly guards against a missing element, reads the controls as they are now, and creates one li. The typed string becomes text content, not page structure.

The update stays narrow: it replaces only #reading-list children, then updates the message, fixed list metadata, and Preview control state. There is no event listener yet; you will call the helper manually from the Console.

Complete the helper in script.js. The helper selects its required elements when it is called, so the explicit guard can safely stop the update if any selection returns null.

Fill each blank with the operation that matches its target. The function is not connected to a click: after saving and refreshing, you can invoke it manually from the Console.

Replace the contents of script.js with this complete helper. Save the file and refresh your local page so the function is available in the Console.

In the page, replace the input value with this exact safety-test string. Leave Highlight new book checked. Without refreshing, enter previewBook() in the Console.

<strong>New book</strong> & notes

The list now has one preview item. Its visible content must include the angle brackets, tag name, and ampersand as ordinary characters. The input, checkbox, and button remain on the page because only the list’s children were replaced.

Console — run these checks after calling previewBook(). The first line checks for a nested strong element using a selector; the last line checks whether an element with the highlight class was found.

Test the guard without editing your saved files. First reload to restore the starter page. In the Console, remove the Preview control, then invoke the helper:

document.querySelector('#preview-button').remove();
previewBook();

One required selection is now null, so the helper returns without an error. The initial message and two original list items remain unchanged. Reload once more to restore the removed control.