JAVAScript
There 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
).
BOM
Mainly 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:
BOM
The 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