<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. P1629 邮递员送信

    题目描述: 有一个邮递员要送东西,邮局在节点1.他总共要送N-1样东西,其目的地分别是2~N.由于这个城市的交通比较繁忙,因此所有的道路都是单行的,共有M条道路,通过每条道路需要一定的时间.这个邮递员 ...

  2. 实践作业2：黑盒测试实践——小组任务分工 Day 1

    今日教学实验任务分配后,课下小组例会完成任务分工,具体分工如下: (1)系统需求分析--刘思佳 (2)设计测试用例--王俊杰 (3)编写.运行测试脚本--郜昌磊 (4)记录测试过程--吴慧杰 (5)记 ...

  3. web前端素材整理汇总

    最近一直搞前端开发,整理下前端用的一些常用素材,分享给大家 框架类 Vue:https://cn.vuejs.org/ iview:https://www.iviewui.com/ 插件类 Jquer ...

  4. nuget服务器搭建，以及如何发布一个Nuget包

    本文章主要介绍如何将本地dll打包成为一个Nuget包,并如何发布到自己的nuget服务器.章节如下 1. 本地dll如何打包,以及版本的更新 2. 在linux上搭建nuget.server 3. ...

  5. setTimeout和setInterval和单线程

    我们知道,js是单线程执行的(单线程j就是说在程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行).所以其实setTimeout和setInterval所谓的"异 ...

  6. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  7. 剑指Offer_6_从尾到头打印链表

    题目描述        输入应该链表的头节点 , 从尾到头反过来打印出每个节点的值.链表定义如下 : typedef struct ListNode { int m_nKey ; ListNode * ...

  8. sed命令针对文件操作具体解释

    Linux的简单shell脚本中改动文件操作 1.Sed简单介绍 sed 是一种在线编辑器,它一次处理一行内容.处理时.把当前处理的行存储在暂时缓冲区中,称为"模式空间"(patt ...

  9. C++、Objective-C 混合编程

    在XCODE中想使用C++代码,你须要把文件的扩展名从.m改成.mm.这样才会启动g++编译器. 我们来看个測试代码: [java] view plaincopy class TestC { priv ...

  10. 11g使用非duplicate方式创建物理standby要注意的问题总结

    在上篇博文中,使用了duplicate方式来创建物理standby http://blog.csdn.net/aaron8219/article/details/38434579 今天来说说在11g中 ...