DOM Basics — Element Selection, Traversal & Styles

The DOM (Document Object Model) is the browser's in-memory tree of an HTML page. For interviews, you need to know how to find elements, read their properties, traverse the tree, and understand the difference between inline styles and computed styles.

1. Finding Elements

querySelector vs getElementBy*: The querySelector methods return static NodeLists. The getElementBy* methods return live HTMLCollections — they update automatically when the DOM changes.

2. Element Properties

3. classList API

Interview use: getElementsByClassName (#24) checks element.classList.contains(className) to match descendants.

4. Attributes

5. Traversing the Tree

Important: children returns only element nodes. childNodes returns ALL nodes (text nodes, comments, etc.). Always use children for tree traversal — it's what the native DOM methods traverse.

Interview use: DFS walk in getElementsByClassName (#24) — iterate element.children.

6. Creating, Inserting, and Removing Elements

7. Styles

Inline Styles (element.style)

Computed Styles (getComputedStyle)

Key difference: element.style only reads inline styles. getComputedStyle(element) reads the final applied style after all CSS rules and inheritance are resolved.

Interview use: getElementsByStyle (#24) — use getComputedStyle to check the actual rendered style.

8. Events

9. Data Storage on Elements

Quick Reference

Interview Tips

• Use element.children, not childNodes — childNodes includes text nodes and comments.
• Tag names are UPPERCASE in HTML — element.tagName returns 'DIV', not 'div'. Use .toUpperCase() for case-insensitive comparison.
• getComputedStyle, not element.style — the interviewer wants to see you know the difference.
• DFS over children preserves document order — the native DOM methods return elements in document order, which is DFS pre-order.

Related Articles

• #24 — DOM Traversal
• DOM Events #1 — Event Delegation & Bubbling