Confused by relation between DOM and HTML (APIs)

Question

How are DOM and HTML related? Is one subset of another, is one a more abstract concept than the another? Is HTML an extension of DOM? Or do they describe rather unrelated concepts (related only in that you can transform from HTML into DOM)? How would you draw these 2 in one picture if you had to?

For example, what is the purpose of these difference specs. Both first and last links contain information about HTMLElement..

I found a possible answer to this question here: http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-1176245063-h2, which is

The goals of the HTML-specific DOM API are:

to specialize and add functionality that relates specifically to HTML documents and elements

...

to provide convenience mechanisms, where appropriate, for common and frequent operations on HTML documents.

Does this mean that the 3rd link in the list above extends the DOM Core, which is described in the 1st link?

Or if you implement DOM Core, that allows you to manipulate simple documents, but if you implement HTML, that gives you like a super-DOM that allows you to manipulate more complicated objects?

Finally, say you want to implement your own browser that is able to open only HTML5 websites (render, as well as support JavaScript). Is it enough to read the specification found in the 3rd link, or do you first need to implement everything provided in DOM and then implement HTML5 specific things?

UPDATE
I guess I'm wondering about DOM API vs HTML API vs DOM HTML API vs HTML DOM API.

Note, the current DOM Core standard is DOM Core 3, not DOM Core 2. — Šime Vidas, Nov 29 '10 at 23:32

score 12 · Answer 1 · answered Nov 29 '10 at 18:42

12

HTML is text and the DOM is the in-memory object model to represent the tree that the HTML described.

answered Nov 29 '10 at 18:42

Lou Franco

87,846
14
132
192

score 11 · Answer 2 · answered Nov 29 '10 at 18:54

The HTML spec describes HTML in terms of a text document with a specific syntax. The DOM on the other hand describes the object-model that the browser generates, when it parses the HTML document. But both specs kind of describe the same abstract model which is the elements and attributes of HTML.

The DOM-core is the object model that is common for all XML documents (including HTML) with elements and attributes. The HTML-DOM is an extension of the core DOM with more specific interfaces for the various HTML elements.

score 10 · Answer 3 · answered Nov 29 '10 at 23:32

In short:

The HTML standards define the HTML language - which tags / attributes exist and what they mean.

The DOM standards define interfaces that are implemented by the objects from the DOM object tree in the browser. (The web-browser parses the HTML source code and creates an object tree based on it. The objects in that tree have properties which are defined by DOM (and other) standards.)

The HTML5 standard also defines interfaces for stuff that wasn't defined before - like the window object, the navigator and history object, global functions like alert and prompt, timeout functions, etc.

The different standards are not subsets of each other - they are just distinct standards that define a piece of the whole picture.

@Karolis The object model in the browser - which objects live in the browser and what are their properties. That would be the whole picture for the browser API standards. — Šime Vidas, Nov 30 '10 at 13:44

score 6 · Answer 4 · edited Jan 18 '21 at 12:38

Answered elsewhere, but apparently we're supposed to embrace (some) duplication:

The document object model is the browser's internal representation of HTML. It's based on the idea of 'children'. So a  tag might contain several text nodes and several  tags, like this:

<p><span>Hello,</span> this is some text. <span>It</span> is just a short paragraph</p>

This  tag has 4 children: two s, and two text nodes ( this is some text and is just a short paragraph). The other bits of text are children of their respective  tags.

The browser stores this information (instead of just storing a huge stream of HTML, which is very difficult to process) in its internal memory. This makes it much easier to format it using Cascading Style Sheets (CSS) and to make changes to it using JavaScript (create and delete parts, move parts from one parent to another, etc).

All versions of HTML (except perhaps very early ones) use the DOM. Each version has rules, such as which tags are valid, and which can be children to each element. These rules are implemented when processing the HTML and creating a DOM representation of it.

Confused by relation between DOM and HTML (APIs)

4 Answers4

Linked