javascript DOM(3)
日期：2014-05-16 浏览次数：20364 次
javascript DOM(三)
三个练习:
?
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 =
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
