Javascript vs DOM vs BOM

Source: Internet
Author: User
Tags hosting

The current idea is a little messy, can't be sorted down ...

If you think about it later, continue to tidy up ....

1. Part of JavaScript

The content of JavaScript is divided into three parts: ECMAScript, Dom, and BOM.

browsers, which can be seen as ECMAScript running hosting environments, are not the only hosting environment.

The BOM consists of the objects,, navigator history screen , location and document which are children of window . In the document node is the DOM, the Document Object model, which represents the contents of the page. You can manipulate it using JavaScript.


The following list shows JavaScript Hosts

  • Web Browsers

  • Photoshop

  • Acrobat

  • Yahoo Widget Engine

  • Windows Scripting Host

  • Nombas Scriptease

JavaScript vs DOM vs BOM, Relationship explained

Indeed, a complete JavaScript implementation was made up of three distinct parts

    • The Core (based on ECMAScript spec)

    • The Document Object Model (DOM)

    • The Browser Object Model (BOM)


A Web browser is considered a host environment for ECMAScript, but it's not the only host environment. A List of other host environments listed here.

Apart from DOM and BOM, each browser have its own implementation of the ECMAScript interface.

Document Object Model (DOM)

The Document Object Model (DOM) is a application programming interface (API) for HTML as well as XML.

The DOM maps out an entire page as a document composed of a hierarchy of nodes like a tree structure and using the DOMAPI Nodes can be removed, added, and replaced.

DOM Level 1 consisted of modules:the DOM Core, which provided a-to-map the structure of an xml- Based document to allow for easy access to and manipulation of any part of a document, and the DOM HTML, which ex Tended the DOM Core by adding html-specific objects and methods.

DOM Level 2 introduced several new modules of the DOM to deal with new types of interfaces:

    • DOM Views-describes interfaces to keep track of the various views of a document (so is, the document before CSS Stylin G and the document after CSS styling)

    • DOM Events-describes Interfaces for Events

    • DOM Style-describes interfaces to deal with css-based styles

    • DOM traversal and Range-describes interfaces to traverse and manipulate a document tree

DOM Level 3 further extends the DOM with the introduction of methods to load and save documents in a uniform a (contained in a new module called Dom Load and Save) as well as methods to validate a document (Dom Validation). In Level 3, the DOM Core was extended to support all of XML 1.0, including XML Infoset, XPath, and XML Base.

Note that the DOM was not javascript-specific, and indeed had been implemented in numerous other languages. For Web browsers, however, the DOM have been implemented using ECMAScript and now makes up a large part of the JavaScript L Anguage.

Other DOMs

    • Scalable Vector Graphics (SVG)

    • Mathematical Markup Language (MathML)

    • Synchronized Multimedia Integration Language (SMIL)

Browser Object Model (BOM)

Browsers feature a Browser Object Model (BOM) that allows access and manipulation of the Browser window. Using The BOM, developers can move the window, change text in the status bar, and perform other actions that does not direct Ly relate to the page content.

Because no standards exist for the BOM, each browser have its own implementation.

2. A history of JavaScript and Dom

JavaScript was developed by Netscape. Before JavaScript appeared, the Web page of the browser could display only Hyper-text document, and after JavaScript appeared, it made the Web page more interactive.

JavaScript is a scripting language, which means that JavaScript simply tells the browser what to do instead of doing it on its own. The browser parses the JavaScript script and then completes the work accordingly.

After Javascript 1.0 was released, Netscape's Navigator browser captured the browser market. At the same time, Microsoft has provided support for VBScript in Internet Explorer in an effort to fight Netscape company.

To respond to Microsoft's behavior, Netscape and Sun developed a language standard for the joint European Computer Manufactures Association (ECMA), resulting in ECMAScript.

Later in the day, Netscape and Microsoft's browser wars were created because JavaScript and VBScript were different in the way the DOM was manipulated. For example, with an ID to get an element, the Netscape DOM operates in document.layers[' myID ', and the Microsoft DOM acquires the same element by document.all[' ID '.

Netscape and Microsoft's browser wars introduced a buzzword:dhtml. DHTML is Dynamic HTML, which is not a new technology in itself, but represents the fusion of HTML, CSS, and JavaScript. At first, the DHTML promise could lead to a world of infinite possibilities, but it was soon discovered that anyone who used it deeply would be in pain. The reason for this is that Netscape and Microsoft have inconsistencies in how they manipulate the DOM.

DHTML promised a world of possibilities.  But anybody the actually attempted to use it discovered a world of pain instead. It wasn ' t long before DHTML became a dirty (buzz) word.

While the browser makers are fighting for the browser market, the company quietly introduced the standard DOM model (the world's quietly putting together a standardized Document Object model). Fortunately, browser vendors (Netscape, Microsoft, other browser vendors) are able to lay down their conflicts of interest and develop new standards with the company. DOM Level 1 was completed in October 1998.

In this case, DOM level 1 is also present in DOM level 0. DOM Level 0 is the concept before the browser wars. JavaScript at that time also provided a way to query and manipulate Web document (mostly images and forms), such as


document.forms[' Details ']

This time the attempt to document Object model is called DOM level 0. It is characterized by this: the way DOM is manipulated is not a standard that all browsers follow, but a DOM operation that JavaScript then defines itself. To standardize the operation of the DOM, DOM Level 1 has been implemented.

For DOM, I think there are two ways to understand it: First, Dom provides a way to organize a document, and, second, the DOM provides a series of API actions to change the structure, style, and content of the document. So, how are these two aspects combined? The DOM provides a way for a document to be organized, that is, it consists of a series of nodes and objects, which is the first aspect, and the nodes and objects themselves in the document contain properties and methods that are the APIs, the second aspect of the DOM.

For a Web page, the beginning of the "content", and then HTML so that the "content" has a certain structure of the document, then the CSS provides the "content" presentation style, and finally JavaScript can be "content", "document organization" and "style" modification.

3. What is the relationship between JavaScript and Dom?

1th, the complete JavaScript consists of three parts: ECMAScript, Dom, and BOM.

The 2nd part, with JavaScript, and later to solve the "browser war" in the DOM operation inconsistent, there is a DOM standard.

I have a few questions now that are quite confusing:

1. What is the relationship between DOM standards and JavaScript dom?

DOM standards are independent of any language, whether it is a scripting language (script language) or a programming language (programming language), the DOM standard can not only apply HTML, It can also be applied to an XML file (for example, DOM4J can read an XML file).

var el = document.getElementById (myID);

Document is an API object defined in the JavaScript manipulation DOM

A Web page is a document. This document can is either displayed in the browser window, or as the HTML source. But it's the same document in both cases. The document Object Model (DOM) provides another-represent, store and manipulate that same Document. The DOM is a fully object-oriented representation of the Web page, and it can be modified with a scripting language such a S JavaScript.

var paragraphs = document.getelementsbytagname ("P");

Paragraphs[0] is the first <p> element

PARAGRAPHS[1] is the second <p> element, etc.

alert (paragraphs[0].nodename);

It's written in JavaScript, but it uses the DOM-to-access the document and its elements. The DOM isn't a programming language, but without it, the JavaScript language wouldn ' t has any model or notion of the We b pages.

Every element in a document-the document as a whole, the head, tables within the document, table headers, text within the Table Cells-is part of the Document object model for this document, so they can all is accessed and manipulated using the DOM and a scripting language like JavaScript.

In the beginning, JavaScript and the DOM were tightly intertwined, but eventually they evolved into separate entities. The page content is a stored in DOM and may are accessed and manipulated via JavaScript, so that we could write this Approximat Ive equation:

API (Web or XML page) = DOM + JS (scripting language)

The DOM was designed to being independent of any particular programming language, making the structural representation of the Document available from a single, consistent API. Though we focus exclusively on JavaScript in this reference documentation, implementations of the DOM can is built for any Language, as this Python example demonstrates:

# Python DOM Example

Import Xml.dom.minidom as M

doc = M.parse ("C:\\projects\\py\\chap1.xml");

Doc.nodename # DOM property of document object;

P_list = Doc.getelementsbytagname ("para");

How do I Access the DOM?

You don ' t has the anything special to begin using the DOM. Different browsers has Different implementations of the DOM , and these implementations exhibit varying degrees of conformance to the actual DOM standard (a subject we try to avoid I n this documentation), but every web browser uses some Document object model to make Web pages accessible to script.

When you create a script, you can immediately begin using the API for the document or window elements to manipulate the Do Cument itself or to get on the children of that document, which is the various elements in the Web page. Your DOM programming May is something as simple as the following, which displays a alert message by using the alert () fun Ction from the Window object, or it could use more sophisticated DOM methods to actually create new content, as in the longe r example below.

Javascript vs DOM vs BOM

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.