<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. 逆向实用干货分享,Hook技术第二讲,之虚表HOOK

    逆向实用干货分享,Hook技术第二讲,之虚表HOOK 正好昨天讲到认识C++中虚表指针,以及虚表位置在反汇编中的表达方式,这里就说一下我们的新技术,虚表HOOK 昨天的博客链接: http://www ...

  2. HDU1541--Stars（树状数组）

    Stars Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  3. greenplum在执行vacuum和insert产生死锁问题定位及解决方案

    首先声明:未经本人同意,请勿转载,谢谢! 本人使用自己编译的开源版本的greenplum数据库用于学习,版本为PostgreSQL 8.3.23 (Greenplum Database 4.3.99. ...

  4. 【日常学习】【IDA*】codevs2449 骑士精神题解

    题目描写叙述 Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在不论什么时候一个骑士都能依照骑士的走法(它能够走到和它横坐标相差为1.纵坐标相差为2或 ...

  5. Bayan 2015 Contest Warm Up D题(GCD)

    D. CGCDSSQ time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...

  6. [UWP]了解TypeConverter

    1. 前言 TypeConverter是XAML解释器的幕后功臣,它做了大量工作,从WPF诞生以来,几乎每一次XAML的运作都有它的参与.虽然UWP中TypeConverter已经彻彻底底退居幕后,连 ...

  7. Hibernate--使用xml配置映射关系

    写在前面: 配置实体类与数据库的映射关系,有两种方式: 1.使用*.hbm.xml  2.使用@注解 二:xml的配置方式: eg:员工的xml配置文件: <?xml version=" ...

  8. std::shared_ptr<void>的工作原理

    前戏 先抛出两个问题 如果delete一个指针,但是它真实的类型和指针类型不一样会发生什么? 是谁调用了析构函数? 下面这段代码会发生什么有趣的事情? // delete_diff_type.cpp ...

  9. JavaWeb之ssm框架整合，用户角色权限管理

    SSM框架整合 Spring SpringMVC MyBatis 导包: 1, spring 2, MyBatis 3, mybatis-spring 4, fastjson 5, aspectwea ...

  10. Struts2学习---基本配置，action，动态方法调用，action接收参数

    首先我们先来直接配置,然后再来讲原理: 第一步:jar包的引入: 我们可以到struts2的官网上下载: http://struts.apache.org/download.cgi#struts251 ...