JS about Dom and BOM

About BOM and Dom

Bom

The following picture illustrates the relationship between BOM and Dom.

The BOM provides some ways to access the Window object, which we can use to move the window position, change the window size, open a new window and close the window, pop up a dialog, navigate and get some information about the customer such as: Browser brand version, screen resolution. But the most powerful feature of the BOM is that it provides an entry---document object that accesses an HTML page so that we can use the powerful features of the DOM through this portal!!!

The Window object is the core of all objects in the BOM. The Window object represents the entire browser window, but does not have to represent what it contains. In addition, window can be used to move or adjust the size of the browser it represents, or to have other effects on it. any global function or variable in JavaScript is a property of window !!!!!!!!!!

Window Object Relationship Properties

• Parent: If the current window is a frame, point to the frame that contains the frame's window
• Self: points to the current Window object, with window consent. (Window object)
• Top: If the current window is frame, point to the Window object that contains the top-level of the frame
• window: points to the current Window object, with self consent.
• Opener: When the window is opened with JavaScript, point to the person who opened it (opener)

Window Object Positioning properties

IE provides window.screenleft and Window.screentop objects to determine the position of the window, but does not provide any way to determine the window size. With the Document.body.offsetWidth and Document.body. offsetheight properties, you can get the size of the viewport (the area that displays the HTML page), but they are not standard properties. Mozilla provides Window.screenx and Window.screeny properties to determine the position of the window. It also provides the window.innerwidth and Window.innerheight properties to determine the size of the viewport, Window.outerwidth and Window.outerheight properties to determine the size of the browser window itself.

Method of the Window object

Form Control

Moveby (x, y)-Moves the form's x pixels horizontally from the current position, moves the form y pixels vertically, X is negative, moves the form to the left, Y is negative, and moves the form up

MoveTo (x, y)-Moves the upper-left corner of the form to the (x, y) point relative to the upper-left corner of the screen, and when a negative number is used as a parameter, the form moves out of the visible area of the screen

Resizeby (w,h)--relative to the current size of the form, the width adjusts to w pixels and the height of h pixels. If the argument is negative, the form is scaled down, and the form is enlarged instead

Resizeto (W,H)--Adjusts the width of the form to w pixels, height adjusts to h pixel form scroll axis control

ScrollTo (x, y)--if there is a scroll bar in the form, move the horizontal scroll bar to a position relative to the form's width of x pixels, and move the vertical scroll bar to a position relative to the form's Y-pixel height

Scrollby (x, y)-if there is a scrollbar, move the horizontal scroll bar to the position of x pixels relative to the current horizontal scroll bar (that is, move the X-pixel to the left), move the vertical scroll bar to a position relative to the current vertical scrollbar height of y pixels (that is, move the Y-pixel downward) Form focus control

Focus ()-causes the form or control to get focus blur ()--in contrast to the focus function, causes the form or control to lose focus new form

Open ()--Opens (pops up) a new form

            window.open (URL, name, features, replace);

Open method Parameter Description

URL--the URL to load the form into

Name-a new form (destination, which will be used in the target property of the a tag to overwrite the form's contents with the name of the existing form). The Open function defaults to opening the form to the _blank pop-up of the target, so the page will open in a popup way

Features-a string representing the attributes of the form, with each attribute in the string separated by commas

Replace-A Boolean value that indicates whether the newly loaded page replaces the currently loaded page, which is usually not specified

The Open function features the parameter description and opens a new normal window if you do not use the third argument

Parameter name	type	Description
Height	Number	Set the height of the form, not less than 100
Left	Number	Description creates the left coordinate of the form and cannot be a negative value
Location	Boolean	Whether the form displays the Address bar, the default value is no
Resizable	Boolean	Whether the form allows resizing by dragging edges, the default value is no
ScrollBars	Boolean	Whether dragging is allowed inside the form when it is outside the window's visible range, the default value is no
Toolbar	Boolean	Whether the form displays a toolbar, the default value is no
Top	Number	Description creates the top coordinate of the form and cannot be a negative value
Status	Boolean	Whether the form displays a status bar, the default value is no
Width	Number	Create the width of the form, cannot be less than 100

　Each attribute in the attribute string is separated by commas, and no spaces are allowed between each attribute

The Open method returns a reference to the Window object for a new form

Close ()--Close the form opener Properties--a reference to the parent form in a new form, meaning "opener" in Chinese

dialog box

alert (str)-pop-up message dialog box (there is a OK button in the dialog box)

confirm (str)-Popup message dialog box (contains a "OK" button and "Cancel" button)

prompt (Str,defaultvalue)-Pop-up Message dialog Box (dialog box contains a "OK" button, "Cancel" button and a text input box), due to the different browser implementation, It is also best to provide an empty string if there is no second argument (the default value in the text box)

Status bar

Window.defaultstatus Property--Changes the default display of the browser status bar (when there is no other display in the status bar), the area at the bottom of the browser is called the status bar, which is used to display information to the user

Window.status Property--temporarily changes the display of the browser status bar

Time Wait and interval function

setTimeout ()--executes the specified code after pausing the specified number of milliseconds

cleartimeout ()--cancels the code that the specified settimeout function will execute

setinterval ()--interval Specifies the number of milliseconds to execute the specified code continuously

clearinterval ()--cancels the code that the specified setinterval function will execute

The settimeout and SetInterval methods have two parameters, the first parameter can be either a string or a function reference, the second parameter is the interval of milliseconds, and their return is a numeric ID that can be used for the corresponding clear method

var tid = setTimeout ("Alert (' 1 ')", +); alert (tid); cleartimeout (TID);

History object, navigating through browser histories

History object's properties: Length returns the number of URLs in the browser history list

Methods of the History object

• Back () load the previous URL in the history list
• Forward () load the next URL in the history list
• Go (num) loads a specific page in the history list

Location Object

Properties of the Location object

• Hash set or return the URL (anchor) starting with the pound sign (#)
• Host sets or returns the hostname and port number of the current URL
• Hostname Sets or returns the host name of the current URL
• HREF Sets or returns the full URL
• Pathname Sets or returns the path portion of the current URL
• Port Sets or returns the port number of the current URL
• Protocol the protocol that sets or returns the current URL
• Search Sets or returns a URL starting from a question mark (?) (Query section)

Method of the Location object

• Assign () loads the new document, which is the same as the HREF attribute that assigns a URL directly to the Location object.
• Reload () reloads the current document, if the method does not specify a parameter, or if the parameter is False, it uses the HTTP header if-modified-since to detect whether the document on the server has changed. If the document has changed, reload () will download the document again. If the document does not change, the method will load the document from the cache. This is exactly the same as when the user clicks the browser's Refresh button. If the parameter of the method is set to true, it bypasses the cache and re-downloads the document from the server, regardless of the last modification date of the document. This is exactly the same as when the user presses the refresh button of the browser while holding down shift.
• Replace () replaces the current document with a new document, and the Replace () method does not generate a new record in the history object. When you use this method, the new URL overwrites the current record in the history object.

Navigator Object

Navigator properties of an object

• appCodeName return the code name of the browser
• AppName returns the name of the browser
• AppVersion returns the platform and version information of the browser
• Browserlanguage returns the language of the current browser
• Cookieenabled returns a Boolean value that indicates whether cookies are enabled in the browser
• Cpuclass returns the CPU level of the browser system
• OnLine returns a Boolean value indicating whether the system is in offline mode
• Platform returns the operating system platform running the browser
• Systemlanguage returns the default language used by the OS
• UserAgent returns the value of the user-agent header of the server sent by the client
• Userlanguage returns the natural language settings of the OS

Frame with multi-window communication child window with parent window

Only the window that is opened by itself and using the Window.Open method can be accessed by JavaScript, and the window opened by the Window.Open method accesses the parent window through the Window.opener property. In the opener window, you can access the open window by the return value of the window.open Method!

Framework

Window.frames collection: In a frameset or page containing an IFRAME tag, the Frames collection contains a reference to a window in a frame

alert (frames.length);//The number of frames alert (frames[0].document.body.innerhtml);//use subscript directly to get a reference to the window in the frame//not only can use subscript, You can also use the Name property of the frame tag alert (frames["frame1"].document.title);

You can also use an ID in a frameset to get a reference to a child window

var frame1 =document.getelementbyid ("frame1");//This just gets the label var Frame1win = frame1.contentwindow;// The Contentwindow of the Frame object contains a reference to the window//the reference to the document in the frame can also be obtained directly var framedoc = Frame1.contentdocument;alert (Framedoc);// But IE does not support contentdocument properties

child window access to parent window--window object's Parent Property child window Access top-level--window object's Top property browser detection

The number of browsers on the market is countless, their interpretation engines are different, and all browsers are expected to support javascript,css,dom in a consistent way, so wait until you know what time it is, but the developer can't keep waiting for that day. There have been many ways to solve browser compatibility problems in history. There are two main types: 1.userAgent string detection, 2. Object detection; Of course, you can not consider all the browser, we need to follow the customer needs, if you can be sure to browse the site users are using or most of the use of IE browser, then you can rest assured that the use of IE proprietary rich extensions, of course, once the user began to turn A visit, then the painful days began. Below is a list of the major browsers on the market:

• Internet Explorer
• Mozilla Firefox
• Google Chrome
• Opera
• Safari

Note that the browser is always updated, we not only for a variety of browser compatibility, but also to the same browser multiple versions to be compatible with. such as IE browser, Its version 6.0 and 7.0 are very popular, because Microsoft IE with the operating system binding installation (previously also synchronous release, Microsoft on average every two years to launch a personal desktop, the same IE also updated every two years; until now, because of the popularity of Firefox, ie Working Group to speed up the update of IE), so the update is slow, 6.0 and 7.0 are very poor Don't.

There are other browsers on the market, but since they are the core of the browsers listed above, or use the same interpretation engine as the browsers above, there is no need to think more. The following is a list of the main browser interpretation engines:

Using useragent detection

Here are the useragent strings displayed by the big browsers using pop-up windows

IE Browser: mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1;. NET CLR 2.0.50727)

Firefox: mozilla/5.0 (Windows; U Windows NT 5.1; ZH-CN; rv:1.9.0.4) gecko/2008102920 firefox/3.0.4

Opera Browser: opera/9.64 (Windows NT 5.1; U Edition IBIS; ZH-CN) presto/2.1.1

Safari browser: mozilla/5.0 (Windows; U Windows NT 5.1; ZH-CN) applewebkit/528.16 (khtml, like Gecko) version/4.0 safari/528.16

Google Chrome: mozilla/5.0 (Windows; U Windows NT 5.1; En-US) applewebkit/530.5 (khtml, like Gecko) chrome/2.0.172.33 safari/530.5

You can use the following code for browser detection

var Browser = {isIE:navigator.userAgent.indexOf ("MSIE")!=-1,isff:navigator.useragent.indexof ("Firefox")!=-1, IsOpera:navigator.userAgent.indexOf ("Opera")!=-1,issafari:navigator.useragent.indexof ("Safari")!=-1};

But this is not foolproof, and one exception is that opera can use useragent to disguise itself. Below is the useragent:mozilla/5.0 (Windows NT 5.1) disguised as ie. U Edition IBIS; ZH-CN; rv:1.8.1) gecko/20061208 firefox/2.0.0 opera 9.64; in the case of complete camouflage, the last "opera 9.64" string will not appear, but opera also has a special way to identify itself, It will automatically declare an opera global variable!

Not only that, our testing also overlooked a point, that is, those who use the same engine and different brands of browsers, so, direct detection of the browser is not necessary, detection browser interpretation engine is necessary!

var Browser = {isIE:navigator.userAgent.indexOf ("MSIE") >-1 &&!window.opera,isgecko: Navigator.userAgent.indexOf ("Gecko") >-1 &&!window.opera && navigator.userAgent.indexOf ("khtml") ) ==-1,iskhtml:navigator.useragent.indexof ("Khtml") >-1,isopera:navigator.useragent.indexof ("Opera") >-1};

Dom

The Document object has three powerful ways to get any element of the page

1.document.getelementbyid ("P1");//Gets the element with ID p1 2.document.getelementsbytagname ("P");//gets all P tags in the document return is a collection      getElementsByTagName can also use wildcard characters * to get all the elements      var allTags = document.getElementsByTagName ("*");      More powerful, getElementsByTagName can be called not only on the Document object, but also on other HTML elements called      var p2 = document.getElementById ("P2"); var p2ps = P2.getelementsbytagname ("em");//Will get P2 below the EM element without acquiring an em 3.document.getelementsbyname outside of P2 ("check");// Gets all the elements of the name check

Because name can be repeated, the Getelementsbyname method always returns a collection, regardless of whether the name is unique on the page. IE 6.0 and Opera 7.5 There are some errors in the use of this method. First, they also return an element with an ID equal to the given name. Second, they only examine <input/> and elements.

Transfer from HTTP://BLOG.CSDN.NET/X6587305X/ARTICLE/DETAILS/7045285#T3

JS about Dom and BOM