The DOM Tree
The DOM is an object-oriented representation of a web page, which can be modified with a scripting language like JavaScript. It’s not part of JavaScript itself, but rather a Web API used by JavaScript to interact with HTML and XML documents.
The DOM represents a document as a hierarchical tree of nodes:
- Document: The root node
- Element nodes: HTML elements
- Text nodes: Text content
- Attribute nodes: Element attributes
- Comment nodes: HTML comments
document├── html│ ├── head│ │ ├── title│ │ │ └── Text node: "My Page"│ │ └── meta, link, script elements...│ └── body│ ├── div│ │ ├── h1│ │ │ └── Text node: "Hello World"│ │ └── p│ │ └── Text node: "Welcome to my website"│ └── more elements...plaintext
The DOM defines various node types:
ELEMENT_NODE(1)ATTRIBUTE_NODE(2)TEXT_NODE(3)COMMENT_NODE(8)DOCUMENT_NODE(9)DOCUMENT_TYPE_NODE(10)