JS-DOM 

 1 //获取三种方法
 2 getElementById
 3 getElementsByTagName
 4 getElementsByClassName
 5 
 6 //创建dom元素
 7  createElement 
 8 //插入 显示在尾部
 9     appendChild(节点)
10 //删除 removeChild
11     insertBefore(子节点,原有节点之前)
12 
13 window.onload=function ()
14 {
15     var oBtn=document.getElementById('btn1');
16     var oTxt=document.getElementById('txt1');
17     var oUl=document.getElementById('ul1');
18     
19     oBtn.onclick=function ()
20     {
21         var oLi=document.createElement('li');
22         //var aLi=oUl.getElementsByTagName('li');
23         oLi.innerHTML=oTxt.value;
24         
25         //父.appendChild(子节点)
26         oUl.appendChild(oLi);
27 
28         //oUl.insertBefore(oLi, aLi[0]);
29     }
30     }
31 }
 1 window.onload=function ()
 2 {
 3     var oBtn=document.getElementById('btn1');
 4     var oTxt=document.getElementById('txt1');
 5     var oUl=document.getElementById('ul1');
 6     
 7     oBtn.onclick=function ()
 8     {
 9         var oLi=document.createElement('li');
10         var aLi=oUl.getElementsByTagName('li');
11         
12         oLi.innerHTML=oTxt.value;
13         
　　　　　　　//加判断  否则找不到aLi[0] 报错,
14 if(aLi.length==0) 15  { 16  oUl.appendChild(oLi); 17  } 18 else 19  { 20 oUl.insertBefore(oLi, aLi[0]); 21  } 22  } 23 }
//删除  
<script type="text/javascript">
window.onload=function ()
{
    var aA=document.getElementsByTagName('a');
    var oUl=document.getElementById('ul1');
    var i=0;
    
    for(i=0;i<aA.length;i++)
    {
        aA[i].onclick=function ()
        {
            oUl.removeChild(this.parentNode);
        }
    }
}
</script>
</head>

<body>
<ul id="ul1">
    <li>111 <a href="javascript:;">删除</a></li>
    <li>222 <a href="javascript:;">删除</a></li>
    <li>333 <a href="javascript:;">删除</a></li>
    <li>444 <a href="javascript:;">删除</a></li>
</ul>
  •  DOM节点
  • children  子节点
  • parentNode 父节点
  • offsetParent  (根据定位的上一级)通过offsetParent  可以定位自己在页面得实际位置
posted @ 2018-06-12 16:59  研一研二  阅读(104)  评论(0)    收藏  举报