Window.document object in JS

Small knowledge point Note: Outside double quotes, inside the double quotation marks to single quotation marks;

In the Div, the row height setting is the same as the entire outer height to be centered vertically and centered on the row

The value of the text box is a string that needs to be converted to a number using parseint ().

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

5. Related element operation

var A=document.getelementbyid ("id"); Find a

var b=a.nextsibling; Look for the next sibling element of a, note the inclusion of spaces;

var b=a.previoussibling, looking for A's previous sibling element, note contains spaces;

var b=a.parentnode, find the previous parent element of A;

var b=a.childnodes; Find out is the array, looking for the next level of a sub-element;

var b=a.firstchild; First child element, LastChild last, Childnodes[n] find the number one

Alert (Nodes[i] instanceof text); Determines whether the text is true, is not return false, and if the value is not false, you can remove the space.

6. Creation, addition, deletion of elements:

var A=document.getelementbyid ("id"); find A;

Create: Var obj=document.createelement ("tag name"); Create an element

Obj.innerhtml= "Hello World"; When you add it, you first need to create an element.

Add: A.appendchild (obj); add a child element to a.

A.removechild (obj); Delete a child element.

A.selectindex in the list: Select the first; A.options[a.selectindex] Press the subscript to remove the number of option objects

7. Manipulation of strings

var s=new String (), or var s= "AAAA";

var s= "Hello World";

Alert (S.tolowercase ()); turn lowercase touppercase () to uppercase

Alert (s.substring (3,8)); Intercept to eighth position from the third position

Alert (S.SUBSTR (3,8)), starting from the third position intercept, intercept eight characters length, do not write the following number is truncated to the last.

S.split ("); to detach a string according to the specified character

S.length is a property

S.indexof ("Wordl"); the position of the first occurrence of world in a string, no return-1

S.lastindexof ("O"); O where the last occurrence of the string

8. Date-time operation

var d=new date (); Current time

var d=new date (1999,3,2); Define a time, April 2, 1999, 3 to add 1

D.getfullyear: Take the Year; D.getmonth (): Take the month, take out the less 1;d.getdate (): Take the day; D.getday (); Take the week

D.gethours (): Take the Hour, d.getminutes (), take the Minute, D.getsecond (); take the second; D.setfullyear (): Set the year, and add 1 when you set the month.

9. Operation of Mathematical functions

Math.ceil (); the smallest integer greater than the current decimal

Math.floor (); The largest integer less than the current decimal

MATH.SQRT (); open square

Math.Round (); rounding

Math.random (); random number, 0-1

Small knowledge Points: the outer double quotation marks, inside the double quotation marks to single quotation marks;

In the Div, the row height setting is the same as the entire outer height in order to center the center of the line with the value.

The value of the text box is a string that needs to be converted to a number using parseint ().

S.match (reg); s represents a String, Reg represents a string, both match, and if two strings do not match, returns a null.

Iv. Forms validation and events

㈠ Form Validation

1. Non-null verification (go blank)

2. Contrast verification (compare with a value)

3. Scope validation (judging by a range)

4. Fixed format verification: Phone number, Social Security number, mailbox, credit card number, etc., need to use regular expression to verify.

5. Other validation

㈡ Regular Expressions

Use symbols to describe writing rules:/Intermediate write regular Expressions/

^: match at the beginning, $: match end;/^e/with ve beginning/ve$/with VE end

\d: An arbitrary number

\w: An arbitrary number or letter

\s: arbitrary string

{n}: Repeat n-times the expression on the left

{M,n}: Repeat the expression on the left at least m times, up to N times

{m,} Repeat the expression on the left at least m times, at most

+: The expression on the left appears at least once, at most, equal to {1,}

*: The expression on the left appears at least 0 times, at most, equal to {0}

?: the expression on the left appears at least 0 times and appears at most 1 times, equivalent to {0,1}

[A,b,c]: Only one of the contents in square brackets can be taken

[A-z] or [1-9]: Take one of the ranges [a-z,a-z]

|: delegate or; (): Priority \: Escape-"\ (\)" This is the parenthesis that will appear and need to be escaped

Window.document object in JS