Dom manipulation of HTML JavaScript

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

Second, window.open(" Part One ", " Part two ", " 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 dialogue box), means that you must first respond to the dialog box 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.windows.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:

the difference between the carriage return /R and the newline character / n :

/R equals enter, which is the difference between a paragraph and a paragraph.

/n is 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): A string that determines whether 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;ifNesting
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 Objects -- browser windows

Window.location: Address bar
Window.history: Access History
Window.status: Status bar
Window.document: Focus! In the next article in detail

Dom manipulation of HTML JavaScript