Javascript--dom operation--window.document Object detailed _javascript Skill

First, find the elements:

Docunment.getelementbyid ("id"); Search by ID, find one at most;
var a =docunment.getelementbyid ("id"); The found element is placed in the variable;
Docunment.getelementsbyname ("name"); Find the array by name;
Docunment.getelementsbytagname ("name"); Based on the label name, find the array;
Docunment.getelementsbyclassname ("name") according to ClassName, find out is an array;

Second, the Operation content:

1. Non-form elements:

(1) Get content:

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

such as: The body has such a div:

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

Get the contents of the div with innerHTML in the script:

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

alert (a.innerhtml);

The results are shown below:

alert (a.innertext); Just take the text inside.
Alert (a.outerhtml), including the contents of the label itself (easy to understand)

(2) Set content:

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

If you use the set content code as follows, the contents of the Div are replaced:

A.innertext will present what is assigned as it is.

Emptying content: Assigning an empty string

2. Form elements:

(1) Access to content, there are two ways to obtain:

var t = document.f1.t1; Form ID is F1 inside the ID is 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) Set 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, the default is return true will jump. button is also the same, if the button set return flase will not be submitted, use this to control the submission jump.

Third, the Operation attribute

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

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

You can then manipulate the attributes of the element:

A.setattribute ("Property name", "property value"); Set a property that can be added or changed;

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

A.removeattribute ("property name"); Remove a property.

Example 1: To do a problem, if the input of the correct answer will pop up correctly, error pop-up error;

Here in the text to write a Daan attribute, which saved the value of the answer, click to check the answer when the cheak input and the answer is the same:

Code in Body:

<form> what year was the Republic of China founded? <input type= "Text" daan= "1912" value= "id=" T1 "name=" T1 "/><input" button "type=" Check () "Onclick=" id= " Name= "T2" value= "Check Answers"/></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 of a correct answer:

Example 2: Consent button, countdown 10 seconds, consent button to be submitted, here with the Operation properties: Disabled, to change the state of the button, when disabled= "disabled" when the button is not available.

Code in the body:

<form><input type= "Submit" Id= "B1" Name= "B1" value= "Consent" (a) "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= "agreed (" +n+ ")";     
      Window.settimeout ("Bian ()", 1000);   
   } 
Window.settimeout ("Bian ()", 1000);

The results of the run:

Four, the Operation style

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

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

You can then manipulate the attributes of the element:

A.; Manipulate the properties of this ID style.

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

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

action Style class: A.classname= "className in style sheet" manipulating a batch of styles

Example 1: Automatic and manual switching of display pictures;

The code in the body, do a background picture of the div and the control objects 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 Hei"; } 
#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 in the code, here is the main call every 3 seconds Huan () function, to the background image of the style changes in the Click left and right switch becomes manual switch, 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 ()", 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 ()", 3000);</script>

The effect of the following figure:

V. Related ELEMENT operations:

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

var B = a.nextsibling, find the next sibling of a, note that contains spaces;

var B = a.previoussibling, find the previous sibling of a, note that contains spaces;

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

var B = a.childnodes, find out the array, find the next level of a child element;

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

Alert (Nodes[i] instanceof Text); Judge whether the text is returned true, not return flase, and use if to determine whether its value is false and to remove spaces.

Vi. creation, addition, deletion of elements:

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

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

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

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

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

A.selectedindex in the list: Select the first few;

A.options[a.selectindex] Take out the first few option objects by subscript

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 from third position to eighth position

Alert (S.SUBSTR (3,8)); intercept from a third position, intercept eight characters in length, and do not write back the number is truncated to the last.

S.split ("); take the characters apart, put them in an array, and sort them automatically.

S.length is a property

S.indexof ("World") the first occurrence in a string, no return-1

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

Eight, Date-time operations

var d = new Date (), Current time

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

D.getfullyear: Take the year;

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

D.getdate (): Take the day;

D.getday (): Days of the week

D.gethours (): Take the hour;

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

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

IX, operation of Mathematical functions

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

Math.floor () A small fish the largest integer of the current decimal number

Math.sqrt (): Square

Math.Round (); rounded

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

Ten, small knowledge points

The outside double quotation mark, inside the double quotation mark change single quotation mark;

In the div inside row height setting, no matter how high the setting, the line occupied by default in the middle position (div upper and lower area in the middle-"default" centered vertically).

The value that the text box takes out is a string that needs to be converted to a number with parseint ()

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

The above Javascript--dom operation--window.document object is small to share all the content, hope to give you a reference, but also hope that we support cloud habitat community.