What is DOM? (summary and importance)

问题:

What is the Document Object Model (DOM)?

I am asking this question because I primarily worked in .NET and I only have limited experience, but I often hear more experienced developers talk about/mention it. I read tutorials online but I am unable to make sense of the whole picture. I know that it is an API!

More specific questions are:

1. Where is it currently used?
2. What field(s) of developers use it (ex-.NET developers)?
3. How relevant is it for all developers in general to understand?

回答1:

In general terms a DOM is a model for a structured document.
It is a central concept in today's IT and no developer can opt out of DOM. Be it in .net, in HTML, in XML or other domains where it is used.
It applies to all documents (word documents, HTML pages, XML files, etc). In the developer sphere it applies mainly in the HTML and the XML domains with slightly different meanings.

HTML

In the HTML arena, the DOM was introduced to support the revolution called in the late 90ies "dynamic HTML". Before IE4 and Netscape 4.0, HTML documents where not changeable inside the browser (all you had in these remote times to sprite up a web page was "animated GIF" !!!! and HTML was version 3.2).
Therefore dynamically manipulating inside the browser the document sent by the server was a huge revolution and initiated the march towards the attractive web sites we see today.

Javascript had been introduced by Netscape (baptised javascript to surf on the new Java trend, but unrelated) and was supported by both Netscape HTTP servers and Netscape browsers, with Internet Explorer eagerly following the move inside the browser. However When javascript is used to manipulate the content of a document, you need an easy way to designate the part of the document you want to interact with. That's where the DOM comes in. Although HTML 4 is not "well formed", browsers build an internal representation of the page with the "body" element at its top and plenty of html tags below, in a hierarchical organisation (child nodes, parent nodes attributes etc). The DOM is the model underpinning the API that allows to navigate this hierarchy.

Since both Netscape and IE browsers were competing solutions, there was little chance the NS and the IE DOM would converge. The W3C stepped in to allow smaller browser vendors to enter the competition and endeavoured to standardised the DOM. Hence the W3C DOM. All it did was just to introduce another dialect and as everybody knows it took years and two serious competitors to force MS to comply with the standards.

Even though more moderns navigating techniques like JQuery have shorthand notations for the DOM, they internally rely on the DOM.

XML

HTML made obvious the disadvantages of showing leniency towards the "well-formedness" of documents and this ushered a new craze : XML. In the web arena, XML and XSLT were first supported by IE5 and adopted in many more domains than just displaying pages.
To parse XML, in the Java Word mainly, you would develop a SAX parser which is basically a plugin to a SAX engine in which you describe what the engine should do of all the XML events (tags...) it will encounter in the parsed document. Developing a SAX parser is not straightforward but is a low footprint solution.
However you have to develop a specific one for each new document type...
So it was not long before libraries started to appear to parse any document and build an in-memory map of its hierarchy. Because it also had the same concepts of root, parents and children (inherited from SGML through HTML), it was also termed a DOM and the name applies regardless of the library.

Other domains

The concept of DOM is not restricted to or even invented for HTML or XML. A DOM is a general concept applicable to any document, especially those (the vast majority of them do) showing a hierarchical structure in which you need to navigate. You can speak about the DOM of a MS-Word document and there are APIs to navigate these as well.

回答2:

The DOM is the application programming interface for well-defined HTML and XML structures (per W3C's document). It is used in any place where you interact with the elements of a web page (any element - style, text, attributes, etc). You will hear a lot about the DOM with JavaScript and/or JavaScript libraries, such as jQuery (which, of course, is JavaScript). It is also referenced with Java, ECMAScript, JScript, and VBScript.

If you are programming .NET it is important if you are doing web-based work. If you are doing application programming, it's not as important. The DOM is definitely not a thing of the past - it is used and worked within every day by many developers. With that said, there has been work towards standardization of the DOM across web browsers. (Again, libraries can help hide these differences. This is one reason jQuery is so popular. You don't have to worry about the browser specifics - you just do what you need to do.)

The document I linked to above does a great job of answering all your questions and more. I would highly recommend reading it. If you have more questions, you can also check out the links below:

• What is the Document Object Model? (W3C)
• Document Object Model (Wikipedia)

回答3:

I'm really not going to be able to explain it any better than the Wikipedia Article on DOM

But to answer a few of your questions:

Where do we still use it?

Every web browser since the mid-nineties.

Who uses it,

Every web developer since the mid-nineties.

in what technology?

Mostly the web via JavaScript, but pretty much anytime you access XML/HTML programatically you are using some kind of DOM implementation.

How important is it for anyone in .net carrier? [sic]

Extremely, although you probably use it without even knowing it.

Is this just a thing of the past which was heavily used but had problems?

If it is then somebody needs to tell John Resig that he has wasted the past 3 years of his life.

回答4:

What is DOM?

The Document Object Model (DOM) is a programming API for HTML and XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. A standard defined by w3 consortium.

Source: http://www.w3.org/TR/WD-DOM/introduction.html

回答5:

When a browser loads an HTML page, its convert it to the Document Object Model (DOM).

The browser's produced HTML DOM, constructs as a tree that consists of all your HTML page element as objects. For example, assuming that you load below HTML page on a browser:

<!DOCTYPE html>
<html>
    <head>
        <title>website title</title>
    </head>
    <body>
        <p id="js_paragraphId">I'm a paragraph</p>
        <a href="http://somewebsite.com">some website</a>
    </body>
</html>

After loading, the browser converts it to:

Some of the ability of scripting languages on HTML DOM consists of:

1- Change all the HTML elements in the page.

2- change all the HTML attributes in the page.

3- Change all the CSS styles on the page.

4- Remove existing HTML elements and attributes.

5- Add new HTML elements and attributes.

6- React to all existing HTML events in the page.

7- create new HTML events on the page.

Let's back to your questions:

1- It currently used in all modern browsers.

2- Front-end developers.

3- All Front-end developers that using scripting languages especially JavaScript.

回答6:

DOM is just a runtime interface between input-html and the output-html Html can just display tags. DOM used to manipulate tags. For example, the getelementbyid in javascript will not work without DOM.