【黑马程序员济南】前端与移动开发就业班笔记DOM讲解:Day04 - 黑马程序员技术交流社区

【黑马程序员济南】前端与移动开发就业班笔记DOM讲解:Day04

今天我们主要是根据前三天的知识点做一些整合做几个小Demo。
案例一：许愿墙

效果如图所示，我们需要许愿墙具有层级关系出现层叠效果，还要具有双击纸条顶部可关闭的功能，下一节我们再讲纸条可移动的功能。
首先我们需要根据墙外的纸条进行复制，代码如下：（因代码较多，这里只粘贴核心代码，附近会上传具体的代码）

[JavaScript] 纯文本查看 复制代码

/**

*@author 传智播客

*/

    var content = document.getElementById("content");

    var tip = document.getElementById("cc");//纸条



    for (var i = 0; i < 10; i++) {

        var cloneTip = tip.cloneNode(true);//克隆出来的节点

        cloneTip.id = "cc" + i;

        content.appendChild(cloneTip);//将克隆出来的纸条添加到内容区域

    }

通过克隆出来的纸条我们会发现所有的纸条都在一个位置，所以我们要借助random对象将纸条进行位置摆放

[JavaScript] 纯文本查看 复制代码

/**

*@author 传智播客

*/

    for (var i = 0; i < 10; i++) {

        var cloneTip = tip.cloneNode(true);//克隆出来的节点

        cloneTip.id = "cc" + i;

        content.appendChild(cloneTip);

        //设置位置

        //400-800  [0,1) * 400 [0,400) + 400 [400,800)

        var x = parseInt(Math.random() * 400 + 400);

        //0-400 [0,1) * 400 [0,400)

        var y = parseInt(Math.random() * 400);

        //控制cloneTip的样式

        cloneTip.style.left = x + "px";

        cloneTip.style.top = y + "px";

        //层级

        cloneTip.onclick = function () {

            zIndex++;

            this.style.zIndex = zIndex;

        };

    }

双击关闭的功能给头部设置一个双击事件即可

[JavaScript] 纯文本查看 复制代码

/**

        *@author 传智播客

        */

        //双击头部关闭纸条

        //firstElementChild 第一个子元素

        var header = cloneTip.firstElementChild;

        header.ondblclick = function () {

            //this.parentNode.style.display = "none";

            content.removeChild(this.parentNode);

        };

现在的基本功能已经完成，但是firstElementChild 在低版本ie上并不兼容，所以我们还有做一下兼容处理

[JavaScript] 纯文本查看 复制代码

/*

*@author 传智播客

*/

//获取第一个子元素的兼容函数

function getFirstElement(element) {

if (element.firstElementChild) {//判断element有无firstElementChild属性

return element.firstElementChild;

} else {

var node = element.firstChild;//第一个子节点

while (node && node.nodeType !== 1) {//当节点是元素节点时

node = node.nextSibling;

}

return node;

}

}

document.write()：只能把也没上所有的东西都顶掉

div.innerHTML += ""；追加

[JavaScript] 纯文本查看 复制代码

<script>

/**

 *@author 传智播客

 */

    var btn = document.getElementById("btn");

    var box = document.getElementById("box");

    btn.onclick = function () {

        var start = +new Date();

        for (var i = 0; i < 1000; i++) {

            box.innerHTML += "<ul><li>111</li></ul>";

        }

        var end = +new Date();

        console.log(end - start);

    };

</script>

但是这样做比较浪费内存，因为在for循环里面执行添加操作会一遍遍的渲染HTML页面，所以建议不要这么写，我们可以在for循环里面将内容先拼接出来之后再添加到页面上

[JavaScript] 纯文本查看 复制代码

/**

 *@author 传智播客

 */

    var btn = document.getElementById("btn");

    var box = document.getElementById("box");

    btn.onclick = function () {

        var start = +new Date();

        var arr = [];

        for (var i = 0; i < 1000; i++) {

            arr.push("<ul><li>111</li></ul>");

            //1拼接字符串

        }

        box.innerHTML = arr.join("");

        //2把字符串变成DOM对象

        //3把DOM对象挂在DOM树上

        //4还要渲染

        var end = +new Date();

        console.log(end - start);

    };

</script>

下面我们动态的创建一个列表首先是HTML代码：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>传智播客</title>

    <style>

        .cls {

            list-style: none;

            width: 150px;

            margin: 0;

            padding: 0;

            background-color: yellowgreen;

            text-align: center;

        }

    </style>

</head>

<body>

<input type="button" id="btn" value="创建"/>



<div id="box"></div>



</body>

</html>

下面是js代码

[JavaScript] 纯文本查看 复制代码

  /**

  *@author 传智播客

  */

    var phones = ["小米", "华为", "中兴", "苹果", "三星", "魅族"];

    var btn = document.getElementById("btn");

    var box = document.getElementById("box");

    btn.onclick = function () {

        //一进来先检测 如果页面上已经有了 就返回 没有才追加

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

        //如果有 是对象 如果没有 是null

        if (ul) {

            //如果能进来说明有了 就不再重复创建了

            return;

        }



        ul = document.createElement("ul");

        ul.id = "u";

        ul.className = "cls";

        box.appendChild(ul);

        //创建li并追加到ul中

        for (var i = 0; i < phones.length; i++) {

            var phone = phones;//每个品牌

            var li = document.createElement("li");

            li.innerHTML = phone;

            ul.appendChild(li);

        }

    };

想看更多内容请点这里。

今天的讲解到此结束，如果小伙伴们还有什么不懂的可以在下方留言，或者去黑马程序员官网下载最新资料进行学习---http://www.itheima.com/