Suggest an edit

Improve this article

Refine the answer for “What is a node (node)?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## Short answer

A node is an element of a data structure, most often a tree, that stores a value and references to other nodes. In web development this usually means a DOM node (the Node interface): the basic building block of an HTML document (elements, text, comments, and so on). Graph and AST elements are also called nodes. Don't confuse this with the Node.js platform, which is a JavaScript runtime, not a "node" as a structural element.

## Detailed answer

### 1) Basic node model

- Data (value/payload).
- Links (references/edges) to other nodes: parent, children, next/prev sibling (in trees), neighbors (in graphs).
- Concepts: root, descendant, leaf (no children), degree, depth, height, path.

### 2) Nodes in the DOM

- Node is the base interface. Specific cases: Element (HTMLElement, SVGElement), Text, Comment, Document, DocumentFragment.
- Key properties: nodeType, nodeName, parentNode/parentElement, childNodes (NodeList), firstChild/lastChild, nextSibling/previousSibling.
- Manipulations: append/appendChild, prepend, before/after, replaceWith, remove, cloneNode, insertBefore (an outdated API style, but still needed for compatibility).
- A NodeList differs from an HTMLCollection: a NodeList can include text/comment nodes, and can be live or static depending on the method.

```
// Example: creating and working with DOM nodes
const div = document.createElement('div'); // Element (an element node)
const text = document.createTextNode('Hello'); // Text (a text node)
const comment = document.createComment('note'); // Comment (a comment)

// Build a small tree
div.append(text);
div.before(comment);

document.body.append(div);

console.log(div.nodeType); // 1 (ELEMENT_NODE)
console.log(text.nodeType); // 3 (TEXT_NODE)
console.log(comment.nodeType); // 8 (COMMENT_NODE)

// Navigating nodes
console.log(div.parentNode === document.body); // true
console.log(div.firstChild === text); // true
console.log(comment.nextSibling === div); // true

// Replacing and removing
const span = document.createElement('span');
span.textContent = 'World';
div.replaceWith(span); // replaced div entirely with span
span.remove();
```

### 3) Nodes in classic structures (trees/graphs)

A node stores a value and references to adjacent nodes. Linked lists, trees (including binary trees), and graphs are all built from nodes.

```
// Binary tree node and basic traversals
class TreeNode {
  constructor(value, left = null, right = null) {
    this.value = value;
    this.left = left;
    this.right = right;
  }
}

// DFS (preorder): O(n)
function preorder(node, visit) {
  if (!node) return;
  visit(node);
  preorder(node.left, visit);
  preorder(node.right, visit);
}

// BFS over a tree: O(n)
function bfs(root, visit) {
  const q = [];
  if (root) q.push(root);
  while (q.length) {
    const curr = q.shift();
    visit(curr);
    if (curr.left) q.push(curr.left);
    if (curr.right) q.push(curr.right);
  }
}

const tree = new TreeNode(1,
  new TreeNode(2, new TreeNode(4), new TreeNode(5)),
  new TreeNode(3)
);

preorder(tree, n => console.log('DFS:', n.value));
bfs(tree, n => console.log('BFS:', n.value));
```

```
// Graph nodes and breadth-first search
function bfsGraph(adj, start) {
  const visited = new Set([start]);
  const q = [start];
  while (q.length) {
    const v = q.shift();
    console.log('visit', v);
    for (const u of adj[v] || []) {
      if (!visited.has(u)) {
        visited.add(u);
        q.push(u);
      }
    }
  }
}

const adj = {
  A: ['B', 'C'],
  B: ['D'],
  C: ['D', 'E'],
  D: [],
  E: []
};

bfsGraph(adj, 'A');
```

### 4) Nodes in an AST (abstract syntax tree)

Compilers and linters represent code as a tree of nodes (types: Program, FunctionDeclaration, Identifier, Literal, and so on). An AST node holds a type, ranges/positions, and children. This is the basis for code transformations and analysis.

```
// Example of an AST node in the ESTree style (simplified)
const ast = {
  type: 'BinaryExpression',
  operator: '+',
  left: { type: 'Literal', value: 2 },
  right: { type: 'Identifier', name: 'x' }
};
```

### 5) Operations and complexity

- Traversing the nodes of a tree/graph: O(n) in the number of nodes n.
- Search/insert/delete depend on the structure: O(log n) for balanced trees, up to O(n) for unbalanced ones.
- In the DOM, the cost of operations isn't determined by algorithmic complexity alone but also by "rendering cost": reflow/repaint, subtree size, and so on.

### 6) Common interview questions and subtleties

1. How does Element differ from Node? Answer: Element is a specific case of Node with attributes/classes/styles; Node also includes Text/Comment/Document and others.
2. How does a NodeList differ from arrays? It's iterable, but doesn't have all Array methods; it's often static (querySelectorAll) versus the "live" HTMLCollection (getElementsBy...).
3. Why is it better to minimize changes to a large DOM subtree? Because every update can trigger style/layout recalculation and repainting.
4. Don't confuse "node" as a structural element with Node.js, the server-side JS runtime.

### Quick summary

- A node = data + links.
- On the web, "node" usually refers to a DOM Node (Element/Text/Comment/Document).
- Traversals: DFS and BFS; complexity O(n).
- Don't confuse it with Node.js.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts749 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.