Dom manipulation of JavaScript

1. DOM the basic concept

Htmldom is a model of an object-oriented tree that contains all the elements in the HTML, and all the elements contained in the DOM can be found through HTML.

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

window.open ("Part I", "Part II", "Part Three", "Part IV")

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 delayed) (more commonly used)

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.

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

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

3. 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";

}

4. window.document Object

First, find the element:

Docunment.getelementbyid ("id"); Search by ID, up to one;
var a =docunment.getelementbyid ("id"); The found element is placed in a variable;

Docunment.getelementbyname ("name"); Search by name, find out the array;//use array attributes to value, assign
Docunment.getelementbytagname ("name"); Based on the name of the tag, find the array;//Use the array attribute to value, assign
Docunment.getelementbyclassname ("name") based on classname, find out the array, (called when the same way as the array a[0] means the first one)

Second, the contents of the operation:

1. Non-form elements:

1) Get content:

alert (a.innerhtml); The HTML code and text in the tag are captured.

such as: The body has such a div:

<div id= "Me" ><b> try it </b></div>

In script, get the contents of the DIV using innerHTML:

var a= document.getElementById ("Me");

alert (a.innerhtml);

Results such as:

alert (a.innertext); take only the words inside
alert (a.outhtml); includes the contents of the label itself (simple to understand)

2) Set content:

a.innerhtml = "<font color=red >hello World </font>";

If you use the Set content code result, the contents of the div are replaced with the following:

A.innertext will present the things that are assigned.

Empty content: Assign an empty string

2. Form elements:

1) to get the content, there are two ways to get it:

A, (single label <input/>)

var t = document.f1.t1; The form ID of the form is F1 with ID T1 input;
var t = document.getElementById ("id"); Get directly with ID.

alert (T.value); Gets the value in input;

B, <textarea> here's the value </textarea>
alert (t.innerhtml); Get <textarea> Here the value of </textarea>;//is the same as non-form element fetching method

C, <onselect><onselect>

2) Setting content: t.value= "content change";

3. A small Knowledge point:

<a href= "www.baidu.com" onclick = "return flase" > Turn to Baidu </a>, add return flase will not jump, default is return True will jump. The button is the same, if the button is set to return flase will not commit, this can be used to control the commit jump.

Third, Operation Properties

This element is first found using the ID of the element and stored in a variable:

var a = document.getElementById ("id");

You can then manipulate the attributes of the element:

A.setattribute ("attribute name", "attribute value"); Set a property, add or change all can;

A.getattribute ("attribute name"); Gets the value of the property;

A.removeattribute ("attribute name"); Remove an attribute.

Example 1: Do a question, if the input answer is correct then pop up correctly, error pop-up error;

Here in text write a Daan attribute, which stored the value of the answer, click to check the answer when Cheak input and answer whether the same:

The result when the answer is correct:

Example 2: The Consent button, countdown 10 seconds, the consent button becomes available, here is the Action property: Disable, to change the state of the button, when disable= "Disable" button is not available.

1 The code in Body: 2  3 <form><input type= "Submit" Id= "B1" Name= "B1" value= "agree (9)" disabled= "disabled"/></ Form> 4 JS Code: 5  6 var n=10;var a= document.getElementById ("B1"); function Bian () 7 {8     n--; 9     if (n==0) 10
   {11         a.removeattribute ("Disabled");         a.value= "Agree"; return;14}15     else16     {17         a.value= "(" +n+ ")", "         window.settimeout (" Bian () "," + "),     }20}21 window.settimeout (" Bian () ", 1000);

Results of the operation:

Four, Operation style

This element is first found using the ID of the element and stored in a variable:

var a = document.getElementById ("id");

You can then manipulate the attributes of the element:

A.style. style = ""; Manipulate the properties of this ID style.

Styles are styles in CSS, and all styles can be manipulated in code.

document.body.stye.backgroundcolor= "COLOR"; the background color of the entire window.

Action Style class:a.classname= "className in style sheet" action batch style

Example 1: Automatic and manual switching of the display image;

The code in body, make a div with background picture and control object on both sides: </div> <div id= "Tuijian" style= "Background-image:url (imges/tj1.jpg);" > <div class= "pages" id= "P1" onclick= "Dodo ( -1)" ></div> <div class= "pages" id= "P2"    Onclick= "Dodo (1)" ></div> </div> code in style sheet: <style type= "text/css" >*{margin:0px auto;    padding:0px; Font-family: "Microsoft Jas Black";}    #tuijian {width:760px;    height:350px; Background-repeat:no-repeat;}    . pages{top:200px;    Background-color: #000;    Background-position:center;    Background-repeat:no-repeat;    opacity:0.4;    width:30px; height:60px;}    #p1 {background-image:url (imges/prev.png);    Float:left; margin:150px 0px 0px 10px;}    #p2 {background-image:url (imges/next.png);    Float:right; margin:150px 10px 0px 0px;} </style>js code, where the main is to call the Huan () function every 3 seconds, to change the style of the background picture, when the left and right switch changes to manual switch, automatic switch stop: <script language= "javascript ">var jpg =new Array (); jpg[0]=" url (imges/tj1.jpg) "; jpg[1]=" url (imges/tj2.jpg) "; jpg[2]=" url (imges/tj3.jpg), var tjimg = document.getElementById ("Tuijian"); var xb=0;var n=0;function Huan ()    {xb++;    if (XB = = jpg.length) {xb=0;    } TJIMG.STYLE.BACKGROUNDIMAGE=JPG[XB];    if (n==0) {var id = window.settimeout ("Huan ()", 3000);    }}function Dodo (m) {n=1;    XB = xb+m;    if (XB < 0) {xb = jpg.length-1;    } else if (XB >= jpg.length) {xb = 0; } TJIMG.STYLE.BACKGROUNDIMAGE=JPG[XB];} Window.settimeout ("Huan ()", +);</script>

The effect is as follows

Dom manipulation of JavaScript