html-Lesson Plan-window.document Object

1.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.getelementsbyname ("name"); Search by name, find the array;
Docunment.getelementsbytagname ("name"); Based on the name of the tag, find out the array;
Docunment.getelementsbyclassname ("name") according to ClassName, find out the array;

Second, the contents of the operation:

1. Non-form elements:

1) Get content:

alert (a.innerhtml); The HTML code and text in the tag get all the contents of the tag.

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.outerhtml); 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:

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;
alert (t.innerhtml); Get <textarea> value here </textarea>;

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

3. A small Knowledge point:

<a href= "http://www.baidu.com" onclick = "return false" > 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:

Body in code:

<form> which year was the Republic of China founded? <input type= "Text" daan= "1912 year " value= "id=" T1 "name=" T1 "/><input type=" button "onclick=" Check () "id=" T2 "name=" T2 "value=" examine the answer " /></form>

The code in JS:

function check () {var A=document.getelementbyid ("T1");    var A1=a.value;    var a2=a.getattribute ("Daan"); if (A1==A2) {alert (" congratulations on your answer!")    ");    } else {alert (" idiot! ");    }}

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: Disabled, to change the state of the button, when disabled= "disabled" button is not available.

The code in the body:

<form><input type= "Submit" Id= "B1" Name= "B1" value= " agree (ten)" disabled= "disabled"/>< /form>

The code in JS:

var n=10;var a= document.getElementById ("B1");

function Bian () {n--;        if (n==0) {a.removeattribute ("disabled");        A.value= " consent ";    Return        } else {a.value= " agree (" +n+ ")";    Window.settimeout ("Bian ()", 1000); }}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= ""; Manipulate the properties of this ID style.

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

document.body.style.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 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 the style sheet:

<style type= "text/css" >*{margin:0px auto;    padding:0px; Font-family: "Microsoft Ya-Black";}    #tuijian {width:760px;    height:350px; Background-repeat:no-repeat;}.        pages{top:200px;    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 in the code, here is mainly every 3 seconds to call the Huan () function, to the background image of the style modification, when the left and right switch to switch to manual switching, automatic switching 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 ()", +);    }         }function dodo (m) {      n=1; &NBSP;&NBSP;&NBSP;&NBSP;XB = xb+m;    if (XB < 0)     {    &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;XB = jpg.length-1;    }    else if (XB >= jpg.length)     {        xb = 0;   &NBSP;&NBSP;}&NBSP;&NBSP;&NBSP;&NBSP;TJIMG.STYLE.BACKGROUNDIMAGE=JPG[XB];} Window.settimeout ("Huan ()", "</script");>

Effects such as:

Five, related elements operation:

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

var B = a.nextsibling, find the next sibling element of a, note the inclusion of spaces;

var B = a.previoussibling, find the previous sibling element of a, note the inclusion of spaces;

var B = A.parentnode, find the upper-level parent element of A;

var B = a.childnodes, find the array, find the next level of a sub-element;

var B = a.firstchild, first child element, LastChild last, Childnodes[n] find a few;

Alert (Nodes[i] instanceof Text); Judging is not the text, is returning true, not returning flase, using if to determine if its value is false, you can remove the space.

Vi. creation, addition and deletion of elements:

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

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

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

A.appendchild (obj); Adds a child element to a.

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

List of A.selectedindex: Selected is the first;

A.options[a.selectindex] Press the subscript to remove the first option object

Seven, the operation of the string:

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 ("); Replace the character with the specified character, put in an array, automatically sort

S.length is a property

S.indexof ("World"), where the first occurrence of world in a string is not returned-1

S.lastindexof ("O"); o the last occurrence in the string

Viii. operation of date and time

var d = new Date (); Current time

D.setfullyear (2015,11,6);/* minus 1 settings on the month you want to set */

D.getfullyear: Take the year;

D.getmonth (): Take the month, take out the less 1;

D.getdate (): Take the day;

D.getday (): Pick up the day of the week

D.gethours (): Take the hour;

D.getminutes (): Take minutes; D.getseconds (): Take seconds

D.setfullyear (): Set the year, note-1 when setting the month.

Nine, the operation of mathematical functions

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

Math.floor (); The largest integer of the current decimal number of a small fish

MATH.SQRT (); open square

Math.Round (); rounding

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

Ten, small knowledge points

Outside double quotes, inside the double quotation marks to single quotation marks;

When the row height setting is set in the Div, the row occupied by default is in the middle position (middle of the div in the upper and lower section-"default" vertically centered), no matter how high the setting is.

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, and Reg represents a string that matches both, and returns a null if two strings do not match.

Third,document:
1. Find
var d = document.getElementById ("ID of Element " );
var d = document.getelementsbyname (" element name ")
var d = document.getelementsbytagname (" label name ")

2. operating element content:
(1) Form element: text (input:type=text,input:type=password;textarea;input:type=hidden) button ( Submit,reset,button Image) selection (radio,checkbox,select,file)
d.value=xxxx;
var s = d.value;

(2) non-form elements:h1...h6,p,div,ul,ol,li
d.innerhtml = xxxx;
var s = d.innerhtml;

3. manipulating element properties:
D.setattribute ( name, value )
var s = d.getattribute ( name )
D.removeattribute ( name );

4. operation element Style:
(1) inline style:
D.style.backgroundcolor = "#FFFF00";
var s = d.style.backgroundcolor;
(2) Class attribute:
D.classname= ""
5. operation related elements:
Father, son, brother, brother

html-Lesson Plan-window.document Object