DOM Intro
DOM (Document Object Model)
The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of an HTML or XML document as a tree-like structure, where each node in the tree corresponds to a part of the document, such as elements, attributes, or text.
When an HTML document is loaded in a browser, it becomes a document object called the DOM. It serves as the root element that represents the HTML document and provides properties and methods for manipulation. Using the document object, we can add dynamic content and elements to our web page.
As mentioned earlier, it is the object of the window. So
window.document
" The DOM is a W3C (World Wide Web Consortium) standard. The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to access dynamically and update the content, structure, and style of a document dynamically."
Key features of the DOM include:
-
Tree Structure: The DOM represents an HTML or XML document as a tree of objects, with each element, attribute, and text node represented as a node in the tree.
-
Node Manipulation: Developers can access, create, modify, and delete nodes within the DOM tree. This allows for dynamic updates to the document content and structure.
-
Event Handling: The DOM provides mechanisms to handle user interactions and events, such as clicks, keyboard input, and form submissions.
HTML DOM Tree of Objects
With the HTML object model, JavaScript has the ability to make dynamic changes to HTML. It has the following capabilities:
- Modify all HTML elements on the page
- Modify all HTML attributes on the page
- Modify all CSS styles on the page
- Remove existing HTML elements and attributes
- Add new HTML elements and attributes
- Respond to all existing HTML events on the page
- Create new HTML events on the page
HTML DOM
The HTML DOM is a standardized object model and programming interface for HTML. It defines HTML elements as objects and provides properties, methods, and events for accessing and manipulating HTML elements.
Using the HTML DOM, JavaScript can effectively access and modify all elements within an HTML document.
