What is DOM node in html java scripts ?
Answer
Overview
A DOM node is any individual building block of the Document Object Model (DOM) — the browser's in-memory tree representation of an HTML document. Every element, attribute, and piece of text in HTML becomes a node.
What is the DOM?
The browser parses HTML into a tree structure called the DOM:
html<!DOCTYPE html> <html> <body> <h1 id="title">Hello</h1> <p>Welcome to <strong>Flutter</strong></p> </body> </html>
Becomes the DOM tree:
textDocument └── html └── body ├── h1 (id="title") │ └── "Hello" [Text node] └── p ├── "Welcome to " [Text node] └── strong └── "Flutter" [Text node]
Types of DOM Nodes
| Node Type | Description | Example |
|---|---|---|
| Element node | HTML tags | text text text |
| Text node | Text content inside elements | text |
| Attribute node | Tag attributes | text text |
| Comment node | HTML comments | text |
| Document node | Root of the tree | text |
DOM Manipulation in JavaScript
javascript// Select a node const title = document.getElementById('title'); const items = document.querySelectorAll('.item'); // Read node properties console.log(title.textContent); // "Hello" console.log(title.innerHTML); // inner HTML string console.log(title.nodeName); // "H1" console.log(title.nodeType); // 1 (Element node) // Modify a node title.textContent = 'New Title'; title.style.color = 'blue'; title.className = 'header'; // Create and insert a node const newNode = document.createElement('p'); newNode.textContent = 'New paragraph'; document.body.appendChild(newNode); // Remove a node title.remove(); // Navigate the tree const parent = title.parentNode; // body const siblings = title.nextSibling; // next node const children = document.body.childNodes; // NodeList
Node Properties
| Property | Description |
|---|---|
text | 1=Element, 3=Text, 8=Comment |
text | Tag name (e.g., "DIV") |
text | Text content for text nodes |
text | Parent node reference |
text | List of child nodes |
text | First child node |
text | Last child node |
text | Next sibling node |
Flutter Web Context
In Flutter Web, if you use
text
dart:htmldartimport 'dart:html' as html; // Access DOM from Flutter Web final element = html.document.getElementById('myDiv'); element?.text = 'Changed from Flutter!'; // Create DOM node final div = html.DivElement(); div.text = 'Flutter Web DOM node'; html.document.body?.append(div);
Flutter Connection: While Flutter Web renders to a
(not traditional DOM), understanding DOM nodes is important for HTML-mode rendering, web interop, and embedding Flutter in existing web pages.text<canvas>