Dom manipulation of JavaScript

1. DOM the basic concept

The DOM is the Document Object model, which is a tree model; a document is a label document; An object is a document; A model refers to something that is abstract.

2. Window Object Manipulation

first, properties and methods :

Property (value or Sub-object):

Opener: Opens the source window of the current window, or opener is null if the current window is open for the first time the browser is started.

Dialogargument: The return value of the dialog box.

Sub-object: History,location,document,status,menubar,toolbar, etc.

Method (function): event (pre-Set program, triggered).

Second, window.open ( " First Part " , " Part II " , " Part III " , " Fourth Part " )

Characteristic parameters of window.open:

The first part: write the page address.

The second part: _blank Open the way, in a new window or its own window.

The third part: Control the Open Window format, you can write multiple, separated by a space as follows:

Toolbar=no the newly opened window has no tool bar;

Menubar=no no menu bar Status=no no status bar;

width=100 height=100 width height;

left=100 Open window distance to the left;

Resizable=no window size is not adjustable;

Scrollbars=yes scroll bar appears;

Location=yes has address bar;

Window.Open also has a return value, and its return value is: The newly opened Window object.

For example:

The simplest open window: window.open ("untitled-6.html");

Open a window and save it in the variable: var w= window.open ();

You can save multiple open windows in the array W:

function Openw ()

{

W[i++]=window.open ();

}

Third, window.close () : Closes the current window;

W.close (): Close the window that is saved in the variable W;

Close multiple child windows: The open window is stored in an array, and the loop is used to turn it off;

Close the source window that opens the current window: Window.opener.close ();

Iv. interval and delay

Interval execution of a piece of code (function): Window.setinterval ("Code to execute", number of milliseconds between intervals)

Cleanup interval execution: window.clearinterval (interval ID); The code that is used to clear the isolated execution after a loop

Delay a period of execution of a piece of code (function): Window.settimeout ("Code to execute", number of milliseconds to delay)

Purge delay: window.cleartimeout (delayed ID); Clear settimeout

Five, adjust the page

Window.navigate ("url") jumps to the target page, there is a bug under Google Chrome;

Window.moveto (x, y) moves the page to a location that is determined by X and y;

Window.resizeto (wide, high) adjusts the width and height of the page;

Window.scrollto (x, Y) scrolls the page to where Y represents the vertical scroll.

Vi. modal dialogs and non-modal dialog boxes

Modal dialog box (Modal dialogue box), which means that the dialog box must first be responded to when the user wants to work with an application other than the dialog box. If you click the OK or Cancel button to close the dialog box, it is always pinned to the non-modal dialog box, and the difference is whether the user is allowed to manipulate other objects while the dialog box is open.

Open Modal Dialog: window.showModalDialog ("url", "Value passed to target dialog box", "window feature parameter");

Feature parameters: separated by semicolons, pixel size with px. Dialogheight,dialogwidth,center, et

Open the Non-modal dialog box: Window.showmodelessdialog ("url", "Value passed to target dialog box", "window feature parameter")

var a = window.dialogargument; You can use a parameter to get the values passed by the modal or non-modal dialog box.

3. windows.history Object

Window.history.back (); page back;

Window.history.forward (); page forward;

Window.history.go (n); n If a positive number represents the forward n pages, n is a negative number that represents back n pages, which is commonly used.

4. window.location Object

Location Bar

var s = window.location.href; Gets the address of the current page

Window.location.href= "http://www.baidu.com"; Change page address, jump page

Window.location.hostname: Host name, domain name, site name, available variable receive

Window.location.pathname: path name, available variable receive

5. Window.status Object

Status bar, you can add the text you want to display to the status bar

Window.status= "What to display in the status bar"; Set the status bar text

For example:

function S ()

{

Window.status = "Go forward and walk like this";

}

Add:

Carriage return character / R and line break / N difference:/R equals Enter, which is the difference between a paragraph and a paragraph,

/n is equivalent to Shift+enter, which is the distance between rows and rows, smaller than

several window Operation Method:

1. Get the current window size and print:

var height=window.innerheight;var width = window.innerwidth;

document.write ("<br/>" + "height" +height+ ", width" +width);

2. Open the window, close the current window

window.open ("http://baidu.com");

Window.close ();

3. Move the current window to a location (x, y)

Window.moveto (200,200);

4. Change the size of the current window (width,height)

Window.resizeto (1100,1100);

5. Get the current page address

document.write (LOCATION.HREF);

6, "History" page forward (forward to the previous history, equivalent to "→"), back (back to the previous history, equivalent to "←")

<!--backwards use the. Back method setting in another Web page to--><input type= "button" onclick= "A ()" value = "point me forward"/>

function A ()

{

Window.history.forward ()/* Go ahead to the previous history */

}

*navigator Visitor's browser information

Alert: Warning Box confirm: Confirmation box prompt: Prompt box

Basic syntax: Data type (string, Decimal, Integer, Boolean, time) Var,
var s = "3.14"; var n = parsefloat (s);; s + = 5;
var d = parseint (s);
IsNaN (String): A string that determines if it is a digital shape;-false; not-true.

Operators: Four categories
An expression:
Statements: three major classes (sequential, branching, looping)
Branch: if () {}; If...else ...; If...else if...else If ... else;if nested
Cycle: exhaustive, iterative; four elements (initial conditions, cyclic conditions, loop bodies, state changes):
Array; var a = new Array ()
Functions: Four elements (name, input, return, processing)
function Show ()
{
}

Second, Dom operation: Tree
Window Object--browser windows

Window.location: Address bar
Window.history: Access History
Window.status: Status bar
Window.document: Focus!

Dom manipulation of JavaScript