<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 节点, 都弹出其文本值. 

                 //1. 获取所有的 li 节点

                 var liNodes = document.getElementsByTagName("li");

                 //2. 实用 for 循环进行遍历. 得到每一个 li 节点

                 for(var i = 0; i < liNodes.length; i++){

                     //3 为每一个 li 节点添加 onclick 响应函数. 

                     liNodes[i].onclick = function(){

                         //4. 在响应函数中获取当前节点的文本节点的文本值

                         //5. alert 打印.

                         //this 为正在响应事件的那个节点.

                         alert(this.firstChild.nodeValue);

                         //此时 i 已经是 8 了, 而 liNodes[8] 不指向任何节点.

                         //alert(i);

                     }

                 }

             }

         </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>

         name: <input type="text" name="username"

             id="name" value="atguigu"/>

     </body>

 </html>    
 <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 节点, 若 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 = /^\^{3}/g;

                         if(reg.test(val)){

                             val = val.replace(reg, "");

                         }else{

                             val = "^^^" + val;

                         }

                         this.firstChild.nodeValue = val;

                     }

                 }

                 /*

                 //1. 使用正则表达式判断是否已 ^^ 开始

                 //2. 调用字符串的 replace(reg, str) 方法除去指定的字符串. 

                 var str = "^^abc";

                 var reg = /^\^{2}/g;

                 alert(reg.test(str)); //true

                 str = str.replace(reg, "");

                 alert(str);

                 var str2 = "abc";

                 alert(reg.test(str2)); //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>

         name: <input type="text" name="username"

             id="name" value="atguigu"/>

     </body>

 </html>

JavaScript的DOM编程--06--两个实验的更多相关文章

  1. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  2. 高性能JavaScript之DOM编程

    我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...

  3. 高性能Javascript(2) DOM编程

    第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...

  4. 高性能JavaScript（DOM编程）

    首先什么是DOM?为什么慢? DOM:文档对象模型,是一个独立于语言的,用于操作XML和HTML文档的程序接口(API) 用脚本进行DOM操作的代价很昂贵.那么,怎样才能提高程序的效率? 1.DOM访 ...

  5. JavaScript的DOM编程--12--innerHTML属性

    innerHTML属性: 1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容 <html> < ...

  6. JavaScript的DOM编程--09--节点的替换

    节点的替换: 1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,o ...

  7. JavaScript的DOM编程--02--获取元素节点

    如何来获取元素节点: 1) .document.getElementById: 根据 id 属性获取对应的单个节点 2) .document.getElementsByTagName: 根据标签名获取 ...

  8. JavaScript的DOM编程--01--js代码的写入位置

    DOM:Document Object Model(文本对象模型) D:文档 – html 文档 或 xml 文档 O:对象 – document 对象的属性和方法 M:模型 DOM 是针对xml(h ...

  9. javascript之DOM编程根据属性找标签练习

    首先看一下需求: 当点击全选时,选中所有的,当再点击时,全部取消.且选中某些项,点击总金额,会显示处总的金钱数. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

随机推荐

  1. 第六届河南省赛 River Crossing 简单DP

    1488: River Crossing Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 83  Solved: 42 SubmitStatusWeb ...

  2. nginx: [emerg] the "ssl" parameter requires ngx_http_ssl_module in /usr/local/nginx/conf/nginx.conf:37

    一:开始Nginx的SSL模块 1.1 Nginx如果未开启SSL模块,配置Https时提示错误 1 nginx: [emerg] the "ssl" parameter requ ...

  3. php 写程序求三个数的最大值

    最简单的调用PHP自带的max函数即可:echo max(1,2,3,4,5);如果要自定义函数的话:function test($a,$b,$c){ return $a > $b ?($a & ...

  4. 浅谈Android中Serializable和Parcelable使用区别

    版权声明:本文出自汪磊的博客,转载请务必注明出处. 一.概述 Android开发的时候,我们时长遇到传递对象的需求,但是我们无法将对象的引用传给Activity或者Fragment,我们需要将这些对象 ...

  5. 一个在 .NET 一线战斗了十年的 C# 程序员的内心独白

    这是我的一个内心独白,内容有点长,希望你能耐心地看完. 估计看到标题,大部分人都会说:哇!大牛!膜拜--之类的.至于是不是大牛,那我不知道,毕竟我依然有很多地方不懂,特别是现在已经流行的 Redis ...

  6. gulp入门详细教程

    简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码, ...

  7. poj 1035KINA Is Not Abbreviation

    题目链接:http://poj.org/problem?id=4054 本题的题意是在下面那部分待检验的单词中找到与之相对应的正确的代词,包含几种情况,一是全部字母相同,二是有一个字母不相同,三是多一 ...

  8. 被动式Telnet研究及实现(解决内外网远程维护的困难)-part A

    欢迎转载.转载请保留原文链接:http://blog.csdn.net/mikulee/article/details/40149779 项目背景及需求: 近期公司有一个项目: 我们在一个arm主机上 ...

  9. Vue深度学习（2）

    Text 可以在表单的input 元素上使用v-model 指令来创建双向数据绑定.它会根据input元素的类型自动选取正确的绑定模式. <div id="app"> ...

  10. 王磊：AI 时代物流行业的 OCR 应用

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ OCR 是人工智能里面非常重要的基础能力之一.腾讯云人工智能产品总监王磊,结合物流场景解读了OCR技术."OCR文本识别能够优化 ...