JavaScript DOM编程学习笔记-两个小示例

来源：互联网发布：淘宝是猫京东是狗编辑：程序博客网时间：2024/05/17 00:53

<!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));//truestr = 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

0 0

JavaScript DOM编程 学习笔记-两个小示例

JavaScript DOM编程学习笔记-两个小示例