Dom manipulation of JavaScript

JavaScript BOM

First, BOM (the Browser objectmodel):-Browser object model,

(1) The BOM provides objects that are independent of the content and interact with the browser window.

(2) The BOM is primarily used to manage the communication between windows and Windows, so its core object is window.

(3) A BOM is composed of a series of related objects, and each object provides many methods and properties.

(4) BOM does not have a uniform standard, each browser has its own BOM implementation.

Third, BOM The main object is detailed:

1. Window object:

The Window object is the top-level (core) object of the BOM, so the specified Window object can not be displayed when its child object is called.

Eg:window.alert ("Hello"); Equivalent to alert ("Hello");

Any global function or variable in JavaScript is a property of window.

1.1 The main method of the Window object:

(1) moveby (dx, dy); --Window movement (dx,dy) of pixels.

(2) MoveTo (x, y); --the window moves to (x, y) pixels.

(3) Resizeby (DW, DH); --Adjusts (dw,dy) pixels, expands when the value of x, Y is greater than 0, and shrinks when it is less than 0.

(4) Resizeto (W, h); --Adjusts to a width of w pixels and a height of h pixels.

(5) ScrollTo (x, y); --Scrolls the contents of the window to the specified position.

(6) Scrollby (dx, dy); --Scrolls the contents of a window (dx,dy) by pixels.

(7) focus (); --Causes the window to be focused and executes the code specified by the onfocus event.

(8) Blur (); --Move the focus away from the top-level window.

(9) alert (text); --pops up a message box.

(comfirm) (text); --A confirmation box pops up.

(one) prompt (Text,defaulttext); --Pop up a prompt box

The first parameter is the text that is displayed to the user

The second argument is the default text in a text box

The return value is the string that the user writes to the text box. Programming Staff

(a) open (url,name,parameterlist,replace); --Create a new browser window and load a specified URL address into a new window

The first parameter: the URL of the Web page to open, which can be a relative path;

Second parameter: The name of the open window (can also include _self,_parent, _top, and _blank several special values)
The third parameter: Describes the properties of the open window, such as size, whether it has toolbars, and so on.

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

The fourth parameter: A Boolean value that indicates whether the newly loaded page replaces the currently loaded page, which is usually not specified.

Eg:window.open ("http://www.baidu.com/", "_blank", "height=150,width=300,top=10,left=10,resizable=yes");

Close ();--Method close a browser window

(setTimeout) (fn,time); --Used to execute a function after a specified period of time

The first parameter: can be a string of jascript code, or it can be a function name.

Second parameter: Represents the time, in milliseconds.

(a) cleartimeout (timer); --Clear the timer created by settimeout

Eg:var Itimeoutid =settimeout ("alert (' Hello world! ')", 1000);

Cleartimeout (Itimeoutid);

(+) setinterval (fn,time); --For periodic execution of a function;

(+) clearinterval (timer); --Clears the timer specified by the setinterval;

(+) createpopup (); --Create a popup window.

(+) ExecScript (); --Executes the specified script in the given language.

(navigate) (sURL); --Jump to the specified URL, only ie valid.

(+) print (); --Prints the contents of the current window.

(ShowModalDialog) (sURL [, varguments] [, sfeatures]); --

sURL: Required parameter, type: String. Used to specify the URL of the document to be displayed by the dialog box.

Varguments: Optional parameter, type: Variant. Used to pass parameters to the dialog box. There are no limits on the types of arguments passed, including arrays. The dialog box uses window.dialogarguments to get the arguments passed in.

Sfeatures: Optional parameter, type: String. Used to describe the appearance of the dialog box and other information, you can use the following one or several, with a semicolon ";" Separated.

1.dialogHeight: Dialog height, not less than 100px,ie4 in dialogheight and dialogwidth the default unit is EM, and IE5 is PX, for the convenience of its see, in the definition of modal Mode dialog box, use PX to do the unit.
2.dialogWidth: Width of the dialog box.
3.dialogLeft: The distance from the left of the screen.
4.dialogTop: Distance from the screen.
5.center: {yes | no | 1 | 0}: The window is centered, the default is yes, but you can still specify the height and width.
6.help: {yes | no | 1 | 0}: Whether the Help button is displayed, default yes.
7.resizable: {yes | no | 1 | 0} [ie5+]: Whether the size can be changed. Default No.
8.status: {yes | no | 1 | 0} [ie5+]: Whether the status bar is displayed. Default is yes[Modeless] or no[modal].
9.scroll:{Yes | no | 1 | 0 | on | off}: Indicates whether the dialog box displays a scroll bar. The default is yes.

1.2 The main properties of the Window object:

(1) Screenx,screeny

Measurement window location (Firefox and Safari support).

(2) Screenleft,screenright

Measurement window location (IE, Safari and opera support).

(3) Status,defaultstatus

Used to control the status bar information (set or get), where defaultstatus refers to the default status bar information that is used when the page is loaded for the first time.

(4) opener

Get the main window to open this window

Eg:window.opener.msg

(5) Closed

Determines whether the reference window is closed.

(6) dialogarguments

Sets or gets an array of variables or variables passed to the modal dialog window.

(7) Dialogheight/dialogwidth/dialogleft/dialogtop

Sets or gets the height/width/left/top coordinate of the modal dialog box.

(8) FrameElement

Gets the frame or IFrame object that generated the window in the parent document.

(9) Length

Sets or gets the number of frames in the window.

(Ten) name

Sets or gets the window name. Java

(one) offscreenbuffering

Sets or gets whether the object is drawn outside the screen before it is visible to the user.

() Parent

Gets the parent window in the object hierarchy.

(returnvalue)

Sets or gets the value returned from the modal dialog box.

(+) Self

Gets a reference to the current window or frame.

() Top

Gets the topmost ancestor window.

(Innerwidth/innerheight)

Gets the width/height of the window's document display area.

(+) Outerwidth/outerheight

Gets the outer width/height of the window.

(Pagexoffset/pageyoffset)

Sets or returns the X position of the current page relative to the upper-left corner of the window display area.

2. Document object:

The Document object is a property of the Window object, and any properties and methods of the Window object can be accessed directly. It is the only property BOM and attribute Dom.

2.1 The Main method of the Document object:

(1) AddEventListener ();--Add Event listener

(2) appendchild ();--Add node

(3) createelement (); --Create a node

(4) getElementById (); --Gets the DOM node for the specified ID

(5) Getelementsbyname (); --Gets the node collection of the specified name

(6) getElementsByTagName (); --Gets the node collection of the specified label

(7) removechild (); --Delete child nodes

(8) ReplaceChild (); --Replace child nodes

(9) insertbefore (); --inserting nodes at the specified node location

Write () and Writeln ()--for outputting content in a document

Eg: <script>document.write (newdate (). getFullYear ()) </script>

(one) open (); --for opening the document, preparing the content for output

() close (); --Close Document output

2.2 The main properties of the Document object:

Normal properties:

(1) Lastmodifier--page last modified time

(2) Referrer--Open the previous page of the document

(3) title--the title of the document

(4) URL--The URL of the document

(5) Alinkcolor--mouse moves to the color of the connection label, the value of the ALink property in the body

(6) BgColor--background color, the value of the BgColor attribute in the body tag

(7) LinkColor--Connection label color, body in the value of the link property

(8) Fgcolor--text color, body in the value of the Text property

(9) Vlinkcolor--The color of the access connection, the value of vlink in the body

Collection Properties:

(1) Anchors--all bookmarks in the document <a name= "A1" ></a>

(2) Applets--Get all applets objects in the document

(3) Embeds--Get all embeds objects in the document

(4) Forms--Get all the form objects in the document

(5) Images--Get all the picture objects in the document

(6) Links--Get all the connection objects in the document <a href= "test.html>aaa</a>

Access the collection element: Document.links[0] or document.links["A1"].

3. Location object:

The Location object represents the URL of the loaded window, and the URL can be resolved.

The main methods for 3.1 location objects are:

(1) Assign (); --Used to orient the specified connection

(2) replace (); --Used to launch a specified connection and does not record open document information in the history record.

(3) reload (cache); --for reloading the contents of the document, the parameter cache indicates whether to allow loading from the cache

Cache--true: loaded from the server.

--false: loaded from the cache.

Main properties of the 3.2 location object:

(1) href--get URL

(2) Port/protocol--ports and protocols

(3) Search--the string after the address?

(4) Host/hostname--Host or host name

(5) Hash--The contents of # and later in the address

4. Navigator object:

4.1 The main properties of the Navigator object:

(1) appCodeName--Product name

(2) AppName--Application name

(3) AppVersion--Version number

(4) cookieenabled--whether to allow the use of cookies

(5) Language--language

(6) OSCPU--Operating system name

(7) Platform--Operating system platform

(8) Product-code or name

(9) Productsub--Product release date

(ten) UserAgent--Client details

(one) Cpuclass--The CPU level of the browser system

5. Screen object:

5.1 The main properties of the screen object:

(1) availheight-the height of the screen that the window can use (measured in pixels)

(2) Availwidth-the width of the screen (in pixels) that the window can use.
(3) ColorDepth--the user represents the number of colors, most systems use 32 bits.
(4) Height--the height of the screen, measured in pixels.
(5) Width--the height of the screen, measured in pixels.

6. History object:

6.1 The main methods of the History object:

(1) history.go (index); --Jump in the browser history (positive for forward, negative for back hop)

(2) History.back (); --Back Jump

(3) History.forward (); --Front jump

Main properties of the 6.2 history object:

(1) History.length; --Get the length of the history record

Dom manipulation of JavaScript