& Timer operation node 12 DOM

DOM & timer operation node
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-U-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>DOM操作节点&定时器</title>
    <style type="text/css">
        #box2{
            background-color: red;
        }
        .cls{
            margin: 20px;
            height: 100px;
            width: 200px;
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <button id="btn1" style="display: block; margin: 20px;">插入</button>
    <button id="btn2" style="display: block; margin: 20px;">删除</button>
    <button id="btn3" style="display: block; margin: 20px;> Delete own </ button>"
    <button id="btn4" style="display: block; margin: 20px;">moveIt</button>
    <button id="btn5" style="display: block; margin: 20px;">stopIt</button>
    <div id = 'box'>
        <div class="cls" id = 'box1'>box1</div>
        <div class="cls" id = 'box2'>box2</div>
    </div>
    <script type="text/javascript">
        function $(id) {
            return document.getElementById(id);
        }
        //  创建子节点
        var tmpObj = null;
        $('btn1').onclick = function () {
            tmpObj = document.createElement('p');
            tmpObj.setAttribute('class','cls');
            tmpObj.innerText = 'box3 ' ; 
            $ ( ' Box ' ) .appendChild (tmpObj);   // child element is added last position
             // $ ( 'Box') insertBefore (tmpObj, $ ( 'box1'));.   // Parent .insertBefore (new child node as the node reference) 
        }; 

        //   delete the child node of the parent .removeChild (child node) 
        $ ( ' btn2 ' ) .onclick = function () { 
            $ ( ' Box ' ) .removeChild (tmpObj) 
        }; 

        // delete your 
        $ ( ' btn3 ' ).onclick = function () {
            this .parentNode.removeChild (the this ); 
        }; 

        // get the parent node Qindie 
        the console.log ($ ( ' box1 ' ) .parentNode); 
        the console.log ($ ( ' box1 ' ) .parentNode.parentNode.parentNode.parentNode); 

        // acquired It is a complex pro-son 
        console.log ($ ( ' Box ' ) .children); 

        // animation timer at regular intervals to increase the left margin marginLeft 
        var the timer = null ;
         var NUM = 20 ; 
        $ ( ' btn4 ' ) .onclick = function () { 
            the clearInterval (Timer);
            timer = setInterval(function () {
                num += 1;
                $('box1').style.marginLeft = num + 'px';
            },20)
        };
        $('btn5').onclick = function () {
            clearInterval(timer);
        };
    </script>
</body>
</html>
& Timer operation node 12 DOM

Guess you like
