العودة إلى الدورة

What is the DOM? (Document Object Model)

JavaScript: الدورة الكاملة للمبتدئين من 'الصفر إلى الاحتراف'

78. What is the DOM? (Document Object Model)

The Document Object Model (DOM) is an interface that treats an HTML or XML document as a tree structure, where each node in the tree represents a part of the document (elements, attributes, text, etc.).

JavaScript interacts with the web page almost entirely through the DOM.

The DOM Tree

If you have this HTML:

html

Hello

Text

The DOM represents it as a hierarchy:

  • window (Global object)
    • document (The entry point)
      • <html>
        • <head>
        • <body>
          • <h1> (Element node)
            • 'Hello' (Text node)
          • <p> (Element node)

Why is the DOM necessary?

It provides a standardized way for JavaScript to:

  1. Find elements on the page.
  2. Change the content (text or attributes) of elements.
  3. Add or Remove elements dynamically.
  4. Respond to user actions (like clicks).