1. History Properties<body>
<a href= "js02history.html" > Current page </a>
<a href= "js03history.html" > next page </a>
<a href= "Javascript:history.forward ()" >forward () forward an interface </a>
<a href= "Javascript:history.go (1)" >go (1) forward one interface </a>
</body>
<body>
<a href= "Javascript:history.back ()" >back () back one interface </a>
<a href= "Javascript:history.go ( -1)" >go (-1) Back one interface </a>
</body>2. Location Properties<script type= "Text/javascript" >
document.write ("Host value:" +location.host+ "<br/>")
document.write ("hostname value:" +location.hostname+ "<br/>")
document.write ("href value:" +location.href+ "<br/>")
document.write ("Hash Value:" +location.hash+ "<br/>")
document.write ("Search Value:" +location.search+ "<br/>")
</script>
<body>
<input type= "Text" >
<input type= "button" value= "Refresh current Page" onclick= "Location.reload ()" >
<input type= "button" value= "Replace current page" onclick= "Location.replace (' http://www.bdqn.cn ')" >
</body>3. Document Properties<style type= "Text/css" >
body{font-size:14px;
line-height:30px;
}
input{margin:1px;
width:90px;
font-size:12px;
padding:0;
}
#node {
width:100px;
font-size:24px;
Font-weight:bold;
Float:left;
}
</style>
<script type= "Text/javascript" >
/* Change Layer Contents */
function ChangeLink () {
document.getElementById ("Node"). Innerhtml= "document.getElementById ("Node"). innertext= "}
/* Get all the value*/in all input tags
function All_input () {
var allinput= document.getelementsbytagname ("input");
/* Declare variable to receive all value*/in all input tags
var str= "";
for (Var i=0;i<allinput.length;i++) {
Str+=allinput[i].value+ "<br/>";
}
/* Give the value of STR to the P tag */
document.getElementById ("S"). Innerhtml=str;
}
/* Gets all the name attribute values are season value*/
function S_input () {
var season= document.getelementsbyname ("season");
/* Declare variable to receive all value*/in all input tags
var str= "";
for (Var i=0;i<season.length;i++) {
Str+=season[i].value+ "<br/>";
}
/* Give the value of STR to the P tag */
document.getElementById ("S"). Innerhtml=str;
}
</script>
<body>
<div id= "Node" > Sina </div>
<input name= "B1" type= "button" value= "Change layer Content" onclick= "ChangeLink ();"/><br/>
<BR/><input name= "season" type= "text" value= "Spring"/>
<input name= "season" type= "text" value= "Summer"/>
<input name= "season" type= "text" value= "Autumn"/>
<input name= "season" type= "text" value= "Winter"/>
<br/><input name= "B2" type= "button" value= "Show input Content" onclick= "all_input ()"/>
<input name= "B3" type= "button" value= "Show season Content" onclick= "s_input ()"/>
<p id= "S" ></p>
</body>4. Open<script type= "Text/javascript" >
function Opennew () {
window.open (
"Http://www.baidu.com",
"Baidu Page",
"Height=400,width=400"
);
}
</script>
<body>
<input type= "button" value= "open new Window" onclick= "Opennew ()" >
</body>5. Timing function<script type= "Text/javascript" >
var time=0;
function count () {//Count method
document.getElementById ("context"). Innerhtml= "Time:" + (++time); }
var interval,timeout;
Timing function
function SetI () {//setinterval functions cycle execution
Interval=setinterval ("Count ()", 1000);
}
function sett () {//settimeout functions execute once
timeout= setTimeout ("Count ()", 1000);
}
Clear Timer function
function Cleari () {//clear setinterval functions
Clearinterval (interval);
}
function Cleart () {//clear settimeout functions
Cleartimeout (timeout);
} </script>
<body>
<div id= "Context" ></div>
<input type= "button" value= "SetInterval function" onclick= "SetI ()" >
<input type= "button" value= "settimeout function" onclick= "sett ()" ><br/>
<input type= "button" value= "clear setinterval function" onclick= "Cleari ()" >
<input type= "button" value= "clear settimeout function" onclick= "Cleart ()" >
</body>6. Access Nodes<script type= "Text/javascript" >
/*
* NodeName:
* The element node displays the label name
* Attribute node displays the property name
* The text node shows the #text
* The document node shows the #document
* NODEVALUE;
* Text nodes are displayed with text
* Attribute nodes display attribute values
*
* NodeType:
* 1 ELEMENT nodes
* 2 attribute nodes
* 3 Text nodes
* 8 Notes
* 9 Documents
* */
Window.onload=function () {
var ul= document.getelementsbytagname ("ul") [0];
/* Alert ("Node name:" +ul.nodename);
Alert ("Node type:" +ul.nodetype); */
/* Get the first li*/in UL
var li=ul.firstelementchild;
Alert ("Node name:" +li.nodename);
Alert ("Node type:" +li.nodetype);
Alert ("Node content:" +li.childnodes[0].nodevalue); /* Change the width of the kitten picture */
var image=document.getelementsbyname ("Cat") [0];
Image.setattribute ("width", "200px");
Gets the value of SRC
Alert (Image.getattribute ("src"));
} </script>
<body>
<ul>
<li> Xiao Qiang 1</li>
<li> Xiao Qiang 2</li>
<li> Xiao Qiang 3</li>
</ul>
</body>7, the node changes and additions<script type= "Text/javascript" > Window.onload=function () {
var ul= document.getelementsbytagname ("ul") [0];
/* NEW node */
var newli= document.createelement ("Li");
Newli.innerhtml= "Small Black";
Ul.appendchild (NEWLI);
/* Get ul third li*/
var second= ul.getelementsbytagname ("Li") [2];
Ul.insertbefore (Newli,second);
/*clone*/
var ul2= document.getelementsbytagname ("ul") [0].clonenode (true);
document.getElementById ("D"). AppendChild (UL2);
/* Delete node */
var renode= ul.getelementsbytagname ("li") [0];
Ul.removechild (Renode);
/* Replace node */
Ul.replacechild (Newli,renode);
} </script>
<body>
<ul>
<li> Xiao Qiang 1</li>
<li> Xiao Qiang 2</li>
<li> Xiao Qiang 3</li>
</ul>
<div id= "D" >
</div>
</body>
JavaScript (i)
