JS（五）

创建/插入/删除DOM元素

• createElement
appendChild给某东西添加子节点

    <input type="text" id="txt1">
    <input type="button" id="btn1" value="创建li">
    <ul id="ul1">
	</ul>
    

    <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn1');
            var oUl = document.getElementById('ul1');
            var oTxt = document.getElementById('txt1');

            oBtn.onclick = function(){
                var oLi = document.createElement('li');

                oLi.innerHTML = oTxt.value;

                //父级.appendChild(子节点);
                oUl.appendChild(oLi);
            }
        }
    </script>

• insertBefore(节点,原有节点)在已有元素前插入

   <input type="text" id="txt1">
    <input type="button" id="btn1" value="创建li">
    <ul id="ul1">
	</ul>
    

    <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn1');
            var oUl = document.getElementById('ul1');
            var oTxt = document.getElementById('txt1');

            oBtn.onclick = function(){
                var oLi = document.createElement('li');
                var aLi = oUl.getElementsByTagName('li');

                oLi.innerHTML = oTxt.value;

                if(aLi.length>0){
                    oUl.insertBefore(oLi,aLi[0]);
                }else{
                    oUl.appendChild(oLi);
                }
            }
        }
    </script>

• 父级.removeChild(子节点)删除

    <ul id="ul1">
        <li>12345<a href="javascript:;">删除</a></li>
        <li>asdas<a href="javascript:;">删除</a></li>
        <li>ghjfy<a href="javascript:;">删除</a></li>
        <li>rtyuf<a href="javascript:;">删除</a></li>
        <li>hrte<a href="javascript:;">删除</a></li>
    </ul>


    <script>
        window.onload = function (){
            var aA = document.getElementsByTagName('a');
            var oUl = document.getElementById('ul1');

            for(var i=0;i<aA.length;i++){
                aA[i].onclick = function(){
                    oUl.removeChild(this.parentNode);
                };
            };
        };
    </script>

排序

    <ul id="ul1">
        <li>13</li>
        <li>42</li>
        <li>35</li>
        <li>64</li>
        <li>18</li>
    </ul>
    
    <input id="btn1" type="button" value="排序">



    <script>
        window.onload = function (){
          var oUl = document.getElementById('ul1');
          var oBtn = document.getElementById('btn1');

          oBtn.onclick = function(){
              var aLi = oUl.getElementsByTagName('li');
              var arr = [];
            for(var i=0;i<aLi.length;i++){
                arr[i] = aLi[i];
            }
            arr.sort(function(li1,li2){
                var n1 = parseInt(li1.innerHTML);
                var n2 = parseInt(li2.innerHTML);
                return n1-n2;
            });
            for(var i=0;i<arr.length;i++){
                oUl.appendChild(arr[i]);
            }
          };
        };


        
    </script>

表单

• onsubmit提交时发生

<form id="form1" action="www.baidu.com">

    用户名：<input type="text" name="username"><br>
    密码：<input type="password" name="password">
    <input type="submit">

</form>



    <script>
        window.onload = function (){
          var oForm = document.getElementById('form1');
          oForm.onsubmit = function(){
              alert('提交时发生');
          }
        };


        
    </script>

运动

<div id="div1"></div>
<input id="btn1" type="button" value="运动" onclick="startMove()">



    <script>
        var timer = null;
        function startMove (){
          var oDiv = document.getElementById('div1');
          clearInterval(timer);               //在开始运动时，关闭已有计时器
          timer = setInterval(function(){
              var speed = 10;
              if(oDiv.offsetLeft > 300){      //控制停止
                clearInterval(timer);
              }else{							//将运动和停止隔开
              oDiv.style.left = oDiv.offsetLeft + speed + 'px';
              }
          },30);
          
        };


        
    </script>

• 实例（分享框）

<div id="div1">
    <span>分享到</span>
</div>


    <script>
        
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            oDiv.onmousemove = function (){
                startMove(0);
            };
            oDiv.onmouseout = function (){
                startMove(-150);
            };
        };
        var timer = null;
        function startMove(iTarget){

            var oDiv = document.getElementById('div1');

            clearInterval(timer);

            timer = setInterval(function(){

                var speed = 0;
                if(oDiv.offsetLeft>iTarget){
                    speed = -10;
                }else{
                    speed = 10;
                }

                if(oDiv.offsetLeft == iTarget){
                    clearInterval(timer);
                }else{
                    oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                }
            },30);
        };
        
    </script>