DOM *** 作节点&定时器
<!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;">删除自己</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); // 子元素最后一个位置追加 //$(‘Box‘).insertBefore(tmpObj,$(‘Box1‘)); // 父.insertBefore(新的子节点,做为参考的节点) }; // 删除子节点 父.removeChild(子节点) $(‘btn2‘).onclick = function () { $(‘Box‘).removeChild(tmpObj) }; // 删除自己 $(‘btn3‘).onclick = function () { this.parentNode.removeChild(this); }; // 获取父节点 亲爹 console.log($(‘Box1‘).parentNode); console.log($(‘Box1‘).parentNode.parentNode.parentNode.parentNode); // 获取的是复数 亲儿子 console.log($(‘Box‘).children); // 动画 定时器每隔一定时间增加左边距 marginleft var timer = null; var num = 20; $(‘btn4‘).onclick = function () { clearInterval(timer); timer = setInterval(function () { num += 1; $(‘Box1‘).style.marginleft = num + ‘px‘; },20) }; $(‘btn5‘).onclick = function () { clearInterval(timer); }; </script></body></HTML>总结
以上是内存溢出为你收集整理的12 DOM *** 作节点&定时器全部内容，希望文章能够帮你解决12 DOM *** 作节点&定时器所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）