首页 > 代码库 > JavaScript DOM编程 学习笔记-两个小示例
JavaScript DOM编程 学习笔记-两个小示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
//点击每个li节点都弹出其文本值
var liNodes = document.getElementsByTagName("li");
//得到每一个li节点
for(var i = 0; i < liNodes.length; i++){
//为每一个li节点添加onClick响应函数
liNodes[i].onclick = function(){
//在响应函数中获取当前节点的文本节点的文本值
alert(this.firstChild.nodeValue);
//alert(liNodes[i].firstChild.nodeValue);
//这种方式不行。因为具体执行这段代码的时候for循环已经执行完了，i的值为liNodes.length
}
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>武汉</li>
<li>深圳</li>
</ul>
<ul id="book">
<li id="xyj" name="xyj">西游记</li>
<li>三国演义</li>
<li>水浒传</li>
</ul>
</body>
</html><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
//点击每个li节点，如果如果li节点的文本值没有^^则加上，如果有则去除
/*
//使用正则表达式去除判断是否已^^开始
//调用字符串的replace(reg, str)去除执行的字符串
var str = "^^abc";
var reg = /^\^{2}/g;
alert(reg.test(str));//true
str = str.replace(reg, "")
var str2 = "abc";
alert(reg.test(str2));//false
*/
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}/g;
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" name="beijing">北京</li>
<li>上海</li>
<li>武汉</li>
<li>深圳</li>
</ul>
<ul id="book">
<li id="xyj" name="xyj">西游记</li>
<li>三国演义</li>
<li>水浒传</li>
</ul>
</body>
</html>本文出自 “阿凡达” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/1564494
JavaScript DOM编程 学习笔记-两个小示例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。