一、引言

　　我们昨天介绍了很多的概念以及大部分我们可以在工作中用到的事件，那么今天我们将运用这些知识做一些效果！

二、导入

　　今天的内容以实例为主。

三、重点内容

　　祝愿墙的简单构建：

　　　首先我将介绍出本次实例中将运用的知识点，有兴趣的同学可以根据我所列出的知识点构建出页面。

　　　　① 克隆节点：clonNode();

var ul = document.getElementById("list");

var li = document.getElementById("li3");

console.log(li.cloneNode(false)); //如果是False的话，仅仅是相当于复制(克隆)了一个标签

console.log(li.cloneNode(true));// 将li标签原样克隆，包含里面的一切信息，包括子节点

console.log(ul.cloneNode(false));

console.log(ul.cloneNode(true));

// 参数为True的时候，是深度克隆，克隆当前对象的一切子节点

// 参数为false的时候，是浅克隆，只会克隆标签，不包含文本信息

　　　　② 向父元素的最后追加节点：appendChild();

<body>

         <ul id="list">

            <li>111111</li>

        <li>222222</li>

        <li id="li3">333333</li>

        <li>444444</li>

      </ul>

<script>

    var ul = document.getElementById("list");

    var li = document.getElementById("li3");

    var newLI= li.cloneNode(true); // 是在内存当中重新克隆了一个一模一样的li3

    ul.appendChild(newLI); // 将克隆的子节点追加到父级元素最后

</script>

</body>

　　　　③ 随机数的生成：

var x = parseInt(Math.random()*600);  // 生成0--600的随机数

var y = parseInt(Math.random()*500);  // 生成0--500的随机数

　　　　④ 层级的提升：

        var zIndex = 0;
　　　　ctip.onclick = function () {

            zIndex++;

            this.style.zIndex = zIndex+"";//需要在外面定义一个zIndex控制层级的增加

        }

　　　　以上内容结合我们前面两天的内容就可以做出一个简单的随机生成多个祝福的祝愿墙。希望大家可以尝试一下，后面我会附上代码，不过要是连尝试都不尝试一下直接就看代码那你永远也不会进步的。很多人都喜欢看看别人的代码说嗯，我会了。但是却从没自己想过怎么创建一个属于自己。

四、总结

　　　　我会附上源代码，不过希望看得人还是先自己尝试一下。

　　　　http://files.cnblogs.com/files/wjwcn/%E7%A5%9D%E6%84%BF%E5%A2%99.zip

JavaScript 基础第九天（DOM第三天）的更多相关文章

  1. 8.6 JavaScript之HTML的DOM（三）

    8.5 HTML和JavaScript的DOM(三) 一.DOM 是Document Object Model( 文档对象模型 )的缩写. DOM把所有的html都转换为节点 .整个文档 是一个节点 ...

  2. 前端之JavaScript：JS之DOM对象三

    js之DOM对象三   一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for ...

  3. javascript基础学习--HTML DOM

    写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...

  4. JavaScript基础学习(九)—DOM

    一.DOM概述      DOM(Document Object Model)文本对象模型.      D: 文档,HTML文档或XML文档.      O: 对象,document对象的属性和方法. ...

  5. JavaScript 基础(四) - HTML DOM Event

    HTML DOM Event(事件) HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript.下 ...

  6. javascript基础学习系列-DOM盒子模型常用属性

    最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)— ...

  7. JavaScript基础知识（DOM）

    获取元素的方法 要操作谁,就要先获取谁: 获取元素 1.document.getElementById:通过ID名来获取元素 兼容性: 在IE8以下,会默认把name属性当做id来获取: docume ...

  8. JavaScript -基础- 函数与对象（三）数组对象

    一.数组对象 1.创建方式 1)创建方式一 var arr=[1,2,3]; 2)创建方式二 var arr2=new Array(1,2,3); 注意: 数组中可以存储任何数据类型.方法类型(Jav ...

  9. JavaScript -基础- 函数与对象（三）正则、Match对象

    一.正则对象 1.创建方法 1)方式一 var re_obj=new RegExp("\d+","g") 规则+模式(g 全局模式/i 不区分大小写/gi) r ...

  10. JavaScript -基础- 函数与对象（三）Date对象

    一.Date对象 1.创建方法 var date_obj=new Date(); alert(date_obj.toLocaleString()) var date_obj=new Date(&quo ...

随机推荐

  1. html+css 技巧

    3.css定义的技巧:[1].为了将来的css代码优化,建议所有的属性上要带上“:” [2].某些html 标签,有自己默认的css属性值,       例如h1 标签就有自己的属性值,自动就是加粗显 ...

  2. java中switch、while、do...while、for

    一.Java条件语句之 switch 当需要对选项进行等值判断时,使用 switch 语句更加简洁明了.例如:根据考试的名次,给予前 4 名不同的奖品.第一名,奖励笔记本一台:第二名,奖励 IPAD  ...

  3. JavaWeb 学习005-4个页面，5条sql语句(添加、查看、修改、删除)

    今天完成了的事: = 1.班级模块,list页面的添加班级信息操作,中文乱码问题 尚待解决 这俩天做得工作是: 首先搭建好main页面:是由top.left.right三个部分构成的,拼接到一起. 流 ...

  4. Nginx-->基础-->理论-->nginx进程模型

    一.nginx的进程模型基础 如上图,是nginx的基本进程模型. 1.nginx的master进程与worker进程关系 nginx的master进程负责worker进程的管理,包括创建worker ...

  5. 获得URL含有中文出现乱码解决

    如: http://www.htmlx.culub/?searchWord=工商代理 当获取链接中所对应searchWord的值时,出现 '%E5%B7%A5%E5%95%86%E4%BB%A3%E7 ...

  6. SQLYog快捷键大全

    Ctrl+M   创建一个新的连接 Ctrl+N   使用当前设置新建连接 Ctrl+F4   断开当前连接 对象浏览器 F5   刷新对象浏览器(默认) Ctrl+B   设置焦点于对象浏览器 SQ ...

  7. Cordova系列(一)

    1.安装 这里推荐用npm安装cordova,至于npm的安装,网上有很多的.打开命令行,输入 npm install -g cordova 这里就安装了好了最新版的cordova,虽然绝大多数会成功 ...

  8. NashZhou的自我介绍

    行业: 电子商务服务业,目前主要是淘宝开放平台,ISV 关键词: 电商,淘宝直通车,关键词广告,自动优化 当前目标: 广告算法 广告主自动优化 希望能在这里结识有共同爱好踏实上进的园友,共同学习,共同 ...

  9. C++中下标操作注意事项

    C++中,下标操作不添加元素,对于任何使用下标操作的情况,如string类型.vector类型等等,必须是已存在的元素才能用下标操作符进行索引.如果类型为空,通过 下标操作进行赋值时,不会添加任何元素 ...

  10. sql2000 (附加数据库)错误9003：LSN(434:94:1)无效和数据库置疑处理

    由于工作需要更换公司的服务器,于是经过一堆的动作,转移网页,转移数据……正当一切都有序进行,却卡在数据库这里,一般为了方便我对数据库的备份都是复制数据库文件的,再通过附加方法实现的,今天由于发现数据库 ...