Document Object Model (DOM)
The DOM (Document Object Model) is an API that represents and interacts with any HTML or XML document. The DOM is a document model loaded in the browser and representing the document as a node tree, where each node represents part of the document (e.g. an element, text string, or comment).The DOM is one of the most-used APIs on the Web because it allows code running in a browser to access and interact with every node in the document. Nodes can be created, moved and changed. Event listeners can be added to nodes and triggered on occurrence of a given event. DOM was not originally specified—it came about when browsers began implementing JavaScript. This legacy DOM is sometimes called DOM 0. Today, the WHATWG maintains the DOM Living Standard.
Read further developer.mozilla.org/en-US/docs/Glossary/DOM
The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page. Elements in the DOM represent things — objects; that is, they have intrinsic meaning, also known as semantics. The HTMLElement interface holds the object's methods and attributes (properties).
DOM is a mapping layout model for all HTML and a way for CSS and Javascript to get in there and do stuff. Tim Wright calls it developer's best friend (after you master it). DOM is not HTML, not CSS, and not Javascript! DOM is
When an HTML document is loaded into a web browser, it becomes a document object. The document object is the root node of the HTML document and the "owner" of all other nodes. The HTML DOM defines a standard way for accessing and manipulating HTML documents. It presents an HTML document as a tree structure or a hierarchy. The DOM is a representation of the structure of our HTML page that you can interact with programmatically. An HTML document is a hierarchy of elements (objects). The browser produces an outline based on this hierarchy and displays it to the visitor (user). The browser constructs a DOM that can be used by the developer. The DOM's application programming interface (API) is exposed as objects with properties and methods, enabling you to write Javascript code to interact with HTML elements rendered to the page. Our ability to manipulate and create web pages consistently across formats comes from the document object model API. This API defines the order and structure of document files as well as how the file is manipulated to create, edit, or remove contents. Minimal HTML document starts with the root element... DOM is a collection of nodes arranged in a tree. All nodes are related to each other - a family tree of children, parents, siblings, grandparents, etc. In the HTML DOM, everything is a node: Each element in this tree has exactly one parent, with the exception of the root element, which has none. Practice identifying the relationships in a DOM structure and representing web page structure in a hierarchy diagram. The procedural paradigm focuses on designing methods. The object-oriented paradigm couples data and methods together into objects. Software design using the object-priented paradigm focuses on objects and operations on objects. Objects are the fundamental building blocks of applications from an object-oriented perspective. An object is a self-contained component that contains properties and methods needed to make a certain type of data useful. An object’s properties are what it knows and its methods are what it can do. An object represents an entity in the real world that can be distinctly identified. An object has a unique identity, state, and behaviour. The state of an object, also known as its properties or attributes, is represented by data fields with their current values. The behaviour of an object, also known as its actions, is defined by methods. To invoke a method on an object is to ask the object to perform an action. Reference your Java textbook. To design classes, you need to explore the relationships among classes. The common relationships among classes are association, aggregation, composition, and inheritance Inheritance enables you to define a general class and extend it to more specialized classes, called subclass, child class, or extended class. The existing class is called a superclass, parent class, or base class. Inheritance is a powerful feature for reusing software. A tree is a finite hierarchical tree structure. In tree order is preorder, depth-first traversal of a tree. An object that participates in a tree has a parent, which is either another object or null, and an ordered list of zero or more child objects. An object A whose parent is object B is a child of B. The root of an object is itself, if its parent is null, or else it is the root of its parent. An object A is called a descendant of an object B, if either A is a child of B or A is a child of an object C that is a descendant of B. An inclusive descendant is an object or one of its descendants. An object A is called an ancestor of an object B if and only if B is a descendant of A. An inclusive ancestor is an object or one of its ancestors. An object A is called a sibling of an object B, if and only if B and A share the same non-null parent. An object A is preceding an object B if A and B are in the same tree and A comes before B in tree order. An object A is following an object B if A and B are in the same tree and A comes after B in tree order. The first child of an object is its first child or null if it has no children. The last child of an object is its last child or null if it has no children. The previous sibling of an object is its first preceding sibling or null if it has no preceding sibling. The next sibling of an object is its first following sibling or null if it has no following sibling. The index of an object is its number of preceding siblings. Every time the browser processes HTML markup, it goes through the steps: 1. convert bytes to characters, 2.identify tokens, 3. convert tokens to nodes, and 4. build the DOM tree. This process can take some time, especially if we have a large amount of HTML to process.
The browser reads the raw bytes of HTML off the disk or network, and translates them to individual characters based on specified encoding of the file (for example, UTF-8). The browser converts strings of characters into distinct tokens—as specified by the W3C HTML5 standard for example, "<html>", "<body>" —and other strings within angle brackets. Each token has a special meaning and its own set of rules. The emitted tokens are converted into "objects," which define their properties and rules. Finally, because the HTML markup defines relationships between different tags (some tags are contained within other tags) the created objects are linked in a tree data structure that also captures the parent-child relationships defined in the original markup: the HTML object is a parent of the body object, the body is a parent of the paragraph object, and so on.
The CSSOM is a map of all CSS selectors and relevant properties for each selector in the form of a tree, with a root node, sibling, descendant, child, and other relationship. The CSSOM is very similar to the DOM. Both of them are part of the critical rendering path which is a series of steps that must happen to properly render a website.
Visual representation of DOM
Diagram
Code
<html>
<head>
<meta charset="utf-8">
<title>DOM</title>
</head>
<body>
</body>
</html>DOM nodes
Hierarchical representation of minimal HTML5 document.
Thinking in Objects
DOM processing
CSS Object Model (CSSOM)
