Shulou(Shulou.com)06/02 Report--

This article focuses on "how to understand BOM and DOM in JavaScript". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand BOM and DOM in JavaScript.

BOM and DOM from JavaScript experience

Since netscape navigator2.0 introduced js to browsers, js has been inextricably linked with browsers, and the speed at which js is executed in browsers is one of the main indicators for various browsers to show off their performance. So what exactly are BOM and DOM?

BOM:Browser Object Model is a set of features related to browsers. Because it is related to browsers, there must be no uniform standard. The reason is that there is ms, but fortunately, there are some de facto standards.

DOM:Document Object Model, this is the standard, formulated by the famous W3C. At present, the level of * * is level 3, but 3 has not been completely completed. At present, mainstream browsers can support (only support to oh, not fully comply with) level 2, for html, that is, html4.x, at present, it is 4.01. later, W3C moved closer to xml, so there was xhtml1.0, and then there was xhtml1.0. W3C wants to build a xhtml2.0, but as a result, the progress is slow, and the major manufacturers are not optimistic about it, so they have html5.0 (something very powerful, waiting to be tried).

If you are interested in specifications, you can browse an article on Wikipedia.

BOM description of the experience of using JavaScript

All right, that's the end of the history of BOM and DOM. Let's do something substantive. Let's talk about the architecture of BOM:

Let's start with window. For window, the simplest sentence is that it represents the browser window that opens the page and does not contain the content of the page. Please keep in mind the latter sentence, I used it to access the content of the page at the very beginning, and of course I couldn't.

Since it is a window that represents a browser, it must contain:

◆ New window (window.open ())

◆ closes the window (window.close ())

◆ changes the window position (resizeBy (), resizeTo ())

◆ Mobile window (moveBy (), moveTo)

There are also some inherent features, such as:

◆ opens a new connection and can specify how to open it

◆ pops up the system dialog box (alert (), confirm (), prompt ())

◆ sets timeout and pause (setTimeout (), setInterval ())

◆ status bar

The previous operations can be used to consult the documentation, of course, it is better to remember. Note, however, that different browsers have different support for these methods, Oh,My God,It's a confusion of world! The last two operations are very unprofessional. Do not use them.

For the features to be long-winded, * a feature, unprofessional, try not to use, the second and the third, you can see, there is nothing to say, * it is necessary to say.

Ask a question: how to open a connection in a new window through js, that is, similar clicks through js

Sina

The effect, use location, wrong, although location has the attribute of target, but, that is not good, then how to solve the class? Hehe, the answer is to use

Window.open ('http://www.sina.com','_blank');

The actual meaning of this code is to open a connection within a specified frame (frame), _ self

, _ top,_blank, these are proprietary framework names.

Then let's talk about a few confusing things. Can you tell the difference between parent,self,top,opener,?

Of which self is always equal to window, just the name is different, but it is precisely because of this feature, using it can make our code easier to read, and top object and parent object, I think, only in multiple frames (frames) will be used, top object points to the top level of the framework, that is, when a page uses frame or iframe, will be used. * * opener is used for child windows opened by window.open ().

Then let's talk about document and location objects. First of all, I marked these two objects as red in the architecture diagram of BOM above. Why the class? Simple, because of chaos.

Document is an object that belongs to both BOM and DOM, while location object is an attribute that belongs to both window and document. From BOM's point of view, the document object contains some common properties and collections in the page, but many of the alinkColor,bgColor,fgColor,linkColor,vlinkColor in document can be controlled by css, so my suggestion is to use css as much as possible using css control, while the rest of the properties (lastModifie)

Referrer is basically not very useful. To be useful, I think only DJR may be useful. It can tell you how users access your page. In fact, the main function of document is for DOM.

The location object represents the URL of the loaded window, and can also be used to parse the URL. For example, to get the parameters after the GET request, you can use the

Location.search

For history and navigator objects, the history object provides go (int), back (), forward () methods, their functions are similar to the browser's forward and backward, but for security reasons, history only provides navigation, to get the user's browsing history, it is not possible to rely on this object alone.

At this point, I believe you have a deeper understanding of "how to understand BOM and DOM in JavaScript". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.