【JS-DOM 习题练习】

知识点回顾：JS——DOM中获取标签节点、改变标签节点样式、获取节点、创建节点、操作节点.......

1、向上添加内容：单击下面的“添加”按钮，添加标签

<!-- HTML -->
 <div class="total">
        <!-- 标题 -->
        <p>单击下面的“添加”按钮，添加标签</p>
        <div class="frame" id="frame">
        </div>
        <!-- 按钮 -->
        <button id="clearButton" onclick="addAll()">全部清除</button>
        <!-- 添加选项 -->
        <div class="addOptions">
            <!-- 第一部分 -->
            <div class="options">
                <p>John Doe</p>
                <button onclick="add('John Doe')">添加</button>
            </div>
            <div class="options">
                <p>Jane Doe</p>
                <button onclick="add('Jane Doe')">添加</button>
            </div>

            <div class="options">
                <p>Dan Doe</p>
                <button onclick="add('Dan Doe')">添加</button>
            </div>

            <div class="options">
                <p>Danielle Doe</p>
                <button onclick="add('Danielle Doe')">添加</button>
            </div>

            <div class="options">
                <p>Mike Doe</p>
                <button onclick="add('Mike Doe')">添加</button>
            </div>

            <div class="options">
                <p>Leah Doe</p>
                <button onclick="add('Leah Doe')">添加</button>
            </div>
        </div>
</div>

<!-- CSS -->   
   <style>
        body {
            background-color: #002D52;
        }

        * {
            padding: 0;
            margin: 0;
        }

        .total {
            width: 476px;
            height: 610px;
            margin: 20px auto 0px auto;
        }

        .total>p {
            color: #fff;
            font-size: 24px;
            font-weight: 300;
            margin-bottom: 20px;
        }

        .frame {
            width: 100%;
            height: 120px;
            background-color: #fff;
            border-radius: 4px;
            padding: 10px;
            overflow-y: scroll;
        }

        #clearButton {
            background-color: #F25D4B;
            border: none;
            width: 185px;
            height: 32px;
            color: #fff;
            font-size: 16px;
            border-radius: 2px;
            margin-top: 15px;
            letter-spacing: 2px;
            margin-bottom: 35px;
        }

        .frame p {
            display: inline-block;
            padding: 7px;
            border-radius: 3px;
            background-color: #329A51;
            color: #fff;
            font-size: 18px;
            margin-right: 3px;
            margin-bottom: 8px;
        }

        .frame span {
            font-weight: 600;
            margin-right: 5px;
            margin-left: 5px;
            cursor: pointer;
        }

        .addOptions {
            width: 310px;
            height: 310px;
        }

        .options {
            width: 100%;
            height: 36px;
            margin-bottom: 20px;
        }

        .options>p {

            color: #fff;
            font-size: 20px;
            line-height: 36px;
            float: left;
            line-height: 36px;
        }

        .options>button {
            display: block;
            float: right;
            width: 100px;
            height: 34px;
            background-color: #F45D55;
            border: none;
            border-radius: 3px;
            color: #fff;
            font-size: 18px;
            letter-spacing: 3px;
        }
    </style>

    <!-- JS -->
    <script>
        var oFrame = document.getElementById('frame');
        function add(obj) {
            //需要把 John Doe 添加到 frame 里面去 
            //1、创建标签节点 
            var newP = document.createElement('p');
            var newSpan = document.createElement('span');
            //2、创建文本节点
            var textNode1 = document.createTextNode(obj);
            var textNode2 = document.createTextNode('X');
            //3、将文本节点装进标签节点中
            newSpan.appendChild(textNode2);
            newP.appendChild(textNode1);
            newP.appendChild(newSpan);
            //把newP 装进 oFrame 里面
            oFrame.appendChild(newP);
            //给 X 绑定一个点击效果：节点.onclick = function (){}
            newSpan.onclick = function () {
                //删掉 newP
                oFrame.removeChild(newP);
            }
        }
        //清除所有
        function addAll() {
            //删除frame里面所有子节点
            var oFrameChild = oFrame.children
            console.log(oFrameChild);
            for (var i = 0; i < oFrameChild.length; i++) {
                oFrame.removeChild(oFrameChild[i])
                i--;
            }
        }
    </script>