Analysis of the difference between DOM and BOM in JavaScript

JAVAScriptThere are three parts, ECMAScript DOM and BOM , depending on the browser, the specific forms of expression are also different. Let's talk today about the differences between the DOM and the BOM.

In terms of the encyclopedia:

1. Dom is the standard of the "the"; [Standard of public compliance for all browsers]

2. BOM is the implementation of various browser vendors according to the DOM in their respective browsers; [Performance varies by browser definition and implemented differently]

3. Window is a BOM object, not a JS object;

DOM(Document Object model) is HTML XML the and Application Interface ( API ).

BOMMainly handles browser windows and frames, although browser-specific JavaScript extensions are often considered part of the BOM. These extensions include:

<1>pop up a new browser window<2>move, close, and resize a browser window<3>Anchor object that provides details about the Web browser<4>Screen object that provides detailed information about the user's screen resolution<5>Support for Cookies<6>IE expands the BOM, joins the ActiveXObject class, and can instantiate ActiveX objects through JavaScript 

javacsript is accessed through the bom (Browser object Model) objects to access, control, modify the client (browser), because window contains document , The properties and methods of the Window object are directly available and perceived, so you can use the window object . Span style= "Font-family:nsimsun;" >document the property, the document property allows you to access, retrieve, Modifies the content and structure of XHTML documents. Because document object is also the root node of the DOM (document Object) model. It can be said that the BOM contains the dom (object), the browser provides access to the BOM object, from the BOM object re-access to Span style= "Font-family:nsimsun;" >dom object, so JS can manipulate the browser and the document read by the browser. Where
Dom contains: window

The Window object contains properties: Document, location, navigator, screen, history, Framesdocument root node contains child nodes: forms, location, anchors, images, Links

As window.document you can see, the most fundamental object of the DOM is the sub-object of the BOM's Window object. The biggest difference before them: Dom describes methods and interfaces for handling Web content, and the BOM describes the methods and interfaces that interact with the browser.

First, let's take a closer look at the DOM:

The node hierarchy of the DOM in HTML is:

Dom Operation Createlement (Element) creates a new element node Creattextnode () creates a new text node containing the given text appendchild () Adds a new subsection after the last node list of the specified node InsertBefore () inserts a given node in front of the given child node of a given element node removechild () Removes a child node from a given element replacechild () Replacing a child node in a given parent element with another node, the DOM creates a tree to represent the document, describes the methods and interfaces that handle the content of the Web page, gives the developer unprecedented control over the content and structure of the document, and can easily delete, add, and replace nodes with the DOM API.

Here's how to access nodes:

var ohtml = document.documentelement;//Returns the document root node that exists in the XML as well as the HTML document Ohtml contains a representation 
Get to the node after the operation of it, the operation of the method we use events to implement, the event type is:
Mouse events: Click, Dbclick, MouseDown, MouseUp, MouseOver, mouseout, MouseMove keyboard events: KeyDown, KeyPress, KeyUp HTML events: Load, unload , Abort, error, select, change, submit, reset, resize, scroll, focus, Blur
Some people often confuse outhtml with innertext and innerHTML, in fact they are very well differentiated:
So that they can clearly understand their division.
The DOM basic operation mind Map is as follows:
Let's take a look at the BOM:
BOMThe core is window , and the window object has a dual role, it is not only through the JS access to the browser window of an interface, but also a Global (global) object. This means that any object, variable, and function defined in a Web page is treated with window as its global object.
Window.close (); Close the window  window.alert ("message");//pop Up a system message box with OK button to display the specified text window.confirm ("is you  sure?");// A query dialog box with OK and Cancel buttons pops up, returning a Boolean value of  window.prompt ("What's your name?", "Default"), and//prompting the user to enter information, accept two parameters, That is, the text to be displayed to the user and the default value in the text box, return the value in the text box as a function value  window.status//Can make the text of the status bar temporarily change  window.defaultstatus//default status bar information, The text can be changed before the user leaves the current page  window.settimeout ("alert (' xxx ')", 1000);//set to execute the specified code after a specified number of milliseconds, accept 2 parameters, code to execute and number  of milliseconds to wait Window.cleartimeout ("ID"); Cancels a pause that has not yet been performed, passes the pause ID to it  window.setinterval (function, 1000), or the specified code repeats once every specified time interval, with the same parameters as  settimeout () Window.clearinterval ("ID"); Cancels the interval, passing the intervals ID to it  window.history.go (-1);//access the history of the browser window, negative for back, positive for forward  Window.history.back ();  Window.history.forward (); Ditto  window.history.length//Can view the number of pages in history  
Document Object
Document object: is actually a property of the window object, document = = Window.document is True, is the only object that belongs to both the BOM and the DOM  document.lastmodified// Gets the string representation of the date on which the page was last modified  document.referrer//used to track where the user was linked from  document.title//Get the title of the current page, read and write  document. URL//Get the URL of the current page, read/write  document.anchors[0] or document.anchors["anchname"]//access all anchors in the page  Document.forms[0] or document.forms["formName"]//access all the forms on the page  document.images[0] or document.images["imgname"]//access all images  on the page document.links [0] or document.links["linkname"//access all links in the page  document.applets [0] or document.applets["Appletname" ]//Access all the applets on the page  document.embeds [0] or document.embeds["embedname"]//Access all the embedded objects on the page  
Location Object
Location object: Represents the URL of the loaded window, and can also be used to window.location reference it  location.href//The full URL of the page currently loaded, such as Http://www.somewhere.com/pictures /index.htm  location.portocol//url used in the protocol, that is, the previous part of the double slash, such as the HTTP  location.host//server name, such as Www.wrox.com  Location.hostname//is usually equal to host, sometimes omitting the requested port of the previous WWW  location.port//url declaration, by default, most URLs do not have port information, such as 8080  Location.pathname the part of the host name in the//url, such as/pictures/index.htm  location.search//or the section after the question mark in the URL that executes the GET request, also called the query string, such as? param= XXXX  Location.hash//If the URL contains #, return the contents after the symbol, such as #anchor1  location.assign ("http:www.baidu.com"); With Location.href, the new address will be added to the browser's history stack  location.replace ("http:www.baidu.com"),//With assign (), but the new address will not be added to the browser's history stack, cannot be accessed through back and forward  
Navigator Object
Navigator object: Contains a lot of information about the Web browser, it is very useful to detect the browser and the operating system, you can also use Window.navigator reference it  navigator.appcodename//Browser code name string representation  navigator.appname//Official browser name string representation of  Navigator.appversion//Browser version information string representation  navigator.cookieenabled// Returns true if the cookie is enabled, or false  navigator.javaenabled//returns False if Java is enabled to return true  navigator.platform// The string representation of the computer platform on which the browser is located  navigator.plugins//plugin array installed in the browser  navigator.taintenabled//returns False if data stain is enabled  navigator.useragent//String representation of user agent headers   
Screen Object
Screen object: Used to get some information about the user's screen, or window.screen reference it  screen.width/height//The width and height of screens, in pixels  screen.availwidth/ availheight//window can use the width and height of the screen, in pixels  screen.colordepth//user represents the number of colors, most systems use 32-bit  window.moveto (0, 0);  Window.resizeto (Screen.availwidth, screen.availheight); Populate the user's screen
The Window object method has the following types:
Structure relationship of BOM and Dom:
Window Object Mind Map:
The above is what I understand the DOM and BOM the direction of the two, hope that we have any valuable experience can be supplemented, we eat good drink, see you.
Analysis of the difference between DOM and BOM in JavaScript