html-Lesson-javascript DOM Manipulation

1, The basic concept of the DOM

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 Operation

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).

Ii.window.open(" Part I ", " 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 (): Close 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 wherey represents the vertical scroll.

Vi. modal dialogs and non-modal dialog boxes

Modal dialog box (Modal DialogueBox), 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 box: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 Parameters ")

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

3.window.history Object

Window.history.back (); page to rewind;

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; get the address of the current page

Window.location.href= "http://www.baidu.com"; Change page address, will 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 ahead and walk like this ";}

Add:

Carriage return character \ R and line break \ The differencebetween N:\ r equals enter, which is the difference between a paragraph and a paragraph.

\ n equivalent to Shift+enter, is the distance between rows and rows, relatively small

Several window operation methods:

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 certain position (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 "←")

<!-- back with the. <input setting in another Web page -- type= "button" onclick= "A ()" value = " point me forward "/>

function A () {Window.history.forward ();/* forward to 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 ) -false -true

Operator: Four types of
expression:
Statement: three major classes (order, branch, Loop)
Branch: if () {}; If...else ...; If...else if...else If ... else;if nested
Loop: Exhaustive, iterative; four elements (initial condition, cyclic condition, loop body , state change):
Array; var a = new Array ()
Function: Four elements ( name, input, return, processing
function Show ()
{
}

Second,DOM operation: Tree
Window Objects -- browser windows

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

html-Lesson-javascript DOM Manipulation