The Document Object Model (DOM) in HTML
- The browser produces a Document Object Model of a web page when it is loaded.
- The HTML DOM model is built as a hierarchy of Objects.
What exactly is the DOM?
The Document Object Model (DOM) is a W3C (World Wide Web Consortium) standard.
The DOM establishes a standard for document access:
“The W3C Document Object Model (DOM) is a platform- and language-independent interface that enables programs and scripts to dynamically access and edit a document’s content, structure, and style.”
The W3C DOM standard is divided into three sections:
The Core Document Object Model (DOM) is a common model for all document formats.
The XML Document Object Model (DOM) is a standard model for XML documents.
HTML DOM (Document Object Model) is a standard model for HTML documents.
What is the HTML Document Object Model (DOM)?
The HTML DOM is a programming interface and standard object model for HTML. It specifies:
The HTML element has objects within a function.
All HTML elements have properties.
All HTML components can be accessed using the following techniques.
All HTML elements have their own set of events.
In other words, the HTML DOM is a set of rules for getting, changing, adding, and removing HTML elements.
createElement() – creates a new element while manipulating elements.
appendChild() – adds a node to the list of child nodes of a parent node.
textContent -Get and set the text content of a node with textContent.
innerHTML – retrieve and set an element’s HTML content.
innerHTML vs. createElement- Explain the differences between innerHTML and createElement in terms of creating new elements.
DocumentFragment- Learn how to assemble DOM nodes and insert them into the active DOM tree with DocumentFragment.
insertBefore() – inserts a new node as a child node of a specified parent node before an existing node.
insertAfter() is a helper method that inserts a new node as a child node of a specified parent node after an existing node.
append() – adds a node to the end of a parent node’s final child node.
prepend() – inserts a node before a parent node’s first child node.
insertAdjacentHTML() – parses a text as HTML and inserts the generated nodes at a given point in the page.
Child() – replaces an existing child element with a new one.
cloneNode()- Clone an element and all of its descendants with cloneNode().
removeChild() – removes a node’s child items.
If you have any queries or feedback do let us know in the comment section.