To understand this more clearly, let's consider the following simple HTML document.
<!DOCTYPE html> <html> <head> <title>Learn DOM</title> <meta name="keywords" content="DOM, Why DOM" /> </head> <body> <h1>Rohatash</h1> <p>Programmer</p> </body> </html>
The above HTML document can be represented by the following DOM tree.
The above diagram demonstrates the parent/child relationships between the nodes. The top most node i.e. the Document node is the root node of the DOM tree, which has one child, the element. Whereas, theand elements are the child nodes of the parent node. The and elements are also siblings since they are at the same level. Further, the text content inside an element is a child node of the parent element. So, for example, "Rohatash" is considered as a child node of the <h1> that contains it, and so on.