JavaScript 基础第九天（DOM第三天）

时间：2022-03-30 16:48:53

一、引言

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

二、导入

　　今天的内容以实例为主。

三、重点内容

　　祝愿墙的简单构建：

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

　　　　① 克隆节点：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

标签：

相关文章