一、引言

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

二、导入

  今天的内容以实例为主。

三、重点内容

  祝愿墙的简单构建:

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

    ① 克隆节点:clonNode();

  1. var ul = document.getElementById("list");
  2. var li = document.getElementById("li3");
  3. console.log(li.cloneNode(false)); //如果是False的话,仅仅是相当于复制(克隆)了一个标签
  4. console.log(li.cloneNode(true));// 将li标签原样克隆,包含里面的一切信息,包括子节点
  5. console.log(ul.cloneNode(false));
  6. console.log(ul.cloneNode(true));
  7.  
  8. // 参数为True的时候,是深度克隆,克隆当前对象的一切子节点
  9. // 参数为false的时候,是浅克隆,只会克隆标签,不包含文本信息

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

  1. <body>
  2. <ul id="list">
  3. <li>111111</li>
  4. <li>222222</li>
  5. <li id="li3">333333</li>
  6. <li>444444</li>
  7. </ul>
  8. <script>
  9. var ul = document.getElementById("list");
  10. var li = document.getElementById("li3");
  11. var newLI= li.cloneNode(true); // 是在内存当中重新克隆了一个一模一样的li3
  12. ul.appendChild(newLI); // 将克隆的子节点追加到父级元素最后
  13. </script>
  14. </body>

    ③ 随机数的生成:

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

    ④ 层级的提升:

  1. var zIndex = 0;
        ctip.onclick = function () {
  2. zIndex++;
  3. this.style.zIndex = zIndex+"";//需要在外面定义一个zIndex控制层级的增加
  4. }

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

四、总结

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

    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. nginx 隐藏版本信息

    隐藏nginx头部  修改后的src/core/nginx.h ,代码如下:   /*  * Copyright (C) Igor Sysoev  * Copyright (C) Nginx, Inc ...

  2. 动态设置 button的 name 的话 闪动的问题 解决

    其实 只要把  button设置成  custom 的  type 的话   就会 解决这个问题

  3. history对象的一些知识点

    history对象可以保存用户的上网的历史记录,即从窗口被打开的那一刻算起.这里有个比较纠结的问题,出于安全因素的考虑,开发人员无法得知用户浏览过的URL, 只能通过用户访问过的页面列表,实现后退和前 ...

  4. PDFsharp Samples

    http://www.pdfsharp.net/wiki/PDFsharpSamples.ashx http://www.pdfsharp.net/?AspxAutoDetectCookieSuppo ...

  5. h5弹框去掉ip地址

    <script> window.alert = function(name){ var iframe = document.createElement("IFRAME" ...

  6. easyui 下拉树改造

    <select id="cc" style="width: 250px"></select> <div id="sp&q ...

  7. C++常用输出 cout、cerr、clog

    三者在C++中都是标准IO库中提供的输出工具: cout:写到标准输出的ostream对象: cerr:输出到标准错误的ostream对象,常用于程序错误信息: clog:也是输出标准错误流(这点儿和 ...

  8. Java监控工具介绍,VisualVm ,JProfiler,Perfino,Yourkit,Perf4J,JProbe,Java微基准测试

    本文是本人前一段时间做一个简单Java监控工具调研总结,主要包括VisualVm ,JProfiler,Perfino,Yourkit,Perf4J,JProbe,以及对Java微基准测试的简单介绍, ...

  9. 说一说line-height

    line-height这个样式相信大家一定不会陌生,我们经常用它来让文本上下居中,这样做一般不出出现什么问题,但是如果对这个属性不是很熟悉的话,可能会踩到一些坑,今天亲自去试验了一下,并总结了一下li ...

  10. Java中从控制台输入数据的几种常用方法

    Java中从控制台输入数据的几种常用方法 一.使用标准输入串System.in //System.in.read()一次只读入一个字节数据,而我们通常要取得一个字符串或一组数字 //System.in ...