Editing Document Object Model (section)

== DOM tree structure ==
A Document Object Model (DOM) tree is a hierarchical representation of an HTML or [[XML]] document. It consists of a root node, which is the document itself, and a series of child nodes that represent the elements, attributes, and text content of the document. Each node in the tree has a parent node, except for the root node, and can have multiple child nodes.

=== Elements as nodes ===
Elements in an HTML or XML document are represented as nodes in the DOM tree. Each element node has a tag name and attributes, and can contain other element nodes or text nodes as children. For example, an HTML document with the following structure:<syntaxhighlight lang="html">
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome to DOM</h1>
    <p>This is my website.</p>
  </body>
</html>
</syntaxhighlight>will be represented in the DOM tree as:<syntaxhighlight lang="text">
- Document (root)
  - html
    - head
      - title
        - "My Website"
    - body
      - h1
        - "Welcome to DOM"
      - p
        - "This is my website."

</syntaxhighlight>

=== Text nodes ===
Text content within an element is represented as a text node in the DOM tree. Text nodes do not have attributes or child nodes, and are always leaf nodes in the tree. For example, the text content "My Website" in the title element and "Welcome" in the h1 element in the above example are both represented as text nodes.

=== Attributes as properties ===
Attributes of an element are represented as properties of the element node in the DOM tree. For example, an element with the following HTML:<syntaxhighlight lang="html">
<a href="https://example.com">Link</a>
</syntaxhighlight>will be represented in the DOM tree as:<syntaxhighlight lang="text">
- a
  - href: "https://example.com"
  - "Link"

</syntaxhighlight>