javascript DOM(三)
7542 ワード
三つの練習:
1.
2.
3.
1.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
// li ,
//1. window.onload
window.onload = function(){
//2. li ,
var liNodes = document.getElementsByTagName("li");
//3. 2
for(var i = 0; i < liNodes.length; i++){
//var liNode = liNodes[i];
//4. li onclick
//5. , li
liNode.onclick = function(){
alert(this.firstChild.nodeValue);
//alert(liNodes[i].firstChild.nodeValue);
// , i , 8
//alert(j);
// i 8, liNodes[8] ,
//alert(liNodes[i].firstChild.nodeValue);
}
}
};
var liNodes = document.getElementsByTagName("li");
for(var i = 0; i < liNodes.length; i++){
alert(i);
liNodes[i].onclick = function(){
alert(i);
}
}
</script>
</head>
<body>
<p> ?</p>
<ul id="city">
<li id="bj" title="Beijing"> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<br><br>
<p> ?</p>
<ul id="game"><li id="ra"> </li>
<li> </li>
<li> </li>
<li id="war3"> </li></ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
</html>2.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function(){
// : li , : "^^", "^^",
var liNodes = document.getElementsByTagName("li");
for(var i = 0; i < liNodes.length; i++){
liNodes[i].onclick = function(){
var val = this.firstChild.nodeValue;
var reg = /^\^{2}/;
if(reg.test(val)){
val = val.replace(reg, "");
}else{
val = "^^" + val;
}
this.firstChild.nodeValue = val;
};
}
};
</script>
</head>
<body>
<p> ?</p>
<ul id="city">
<li id="bj" title="Beijing"> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<br><br>
<p> ?</p>
<ul id="game"><li id="ra"> </li>
<li> </li>
<li> </li>
<li id="war3"> </li></ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
</html>3.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function(){
//**** : js null, undefined, 0, false false , true
// : submit , type, : " ";
// ( ), , : " ";
// , ul li
//1. #submit , onclick
document.getElementById("submit").onclick = function(){
//3. name="type" (radio): types
var types = document.getElementsByName("type");
//4. types ,
var typeValue = null;
for(var i = 0; i < types.length; i++){
if(types[i].checked){
typeValue = types[i].value;
break;
}
}
//5. type , " ",
if(!typeValue){
alert(" ");
return false;
}
//6. name="name" : name
var nameNode = document.getElementsByName("name")[0];
//7. name value ( )
var val = nameNode.value;
//7.1 ,
var reg = /^(\s+)|(\s+)$/g;
val = val.replace(reg, "");
nameNode.value = val;
//8. , : " ",
if(val == ""){
alert(" ");
return false;
}
//9. li <li>name-value</li>: liNode
var liNode = document.createElement("li");
var liText = document.createTextNode(val);
liNode.appendChild(liText);
//10. liNode #type-value
document.getElementById(typeValue).appendChild(liNode);
//2. #submit
return false;
};
}
</script>
</head>
<body>
<p> ?</p>
<ul id="city">
<li id="bj" name="BeiJing"> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<br><br>
<p> ?</p>
<ul id="game">
<li id="rl"> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<br><br>
<form action="dom-5.html" name="myform">
<input type="radio" name="type" value="city">
<input type="radio" name="type" value="game">
name: <input type="text" name="name"/>
<input type="submit" value="Submit" id="submit"/>
</form>
</body>
</html>