js中dom基础及操作dom dom基础认识 1.dom节点 1）children,获取的是所有的孩子节点，获取的是数组 2）parentNode,获取的是父节点，获取的是对象 2.dom操作方法 1）appendChild(),把节点添加到父节点后面，添加的节点是排在最后 2）insertBefore()，把节点添加到父节点的哪个位置之前 3）removeChild(),删除节点 下面一一通过代码来讲解，更加容易理解它们的含义 复制代码 <html> <head> <title>www.leyou1178.cn/</title> </head> <style> *{ margin:0; padding:0; } #tab{ margin-left:-3px; float:left; width:60px; //height:20px; background:#ccc; text-align:center; } #tab #div-www.xinghenyule.com tab{ border:1px solid www.yigou521.com/ #999; } #tab ul{ overflow:hidden; background:blue; } #tab ul li{ list-style:none; } </style> <script> window.οnlοad=function(){ var oTab=document.getElementById('tab') //获取对象 var oUl=document.getElementsByTagName('ul')[0];//获取ul标签对象 var oLl=document.getElementsByTagName('li')[0];//获取第一个li对象 alert(oUl.children.length) //获取到ul下孩子节点li，弹出数组的长度为4 alert(typeof oLl.parentNode) //获取到li父节点ul，弹出的是object，对象 oLi=document.createElement('li') //创建li节点 var node=document.createTextNode("5");//创建节点内容 oLi.appendChild(node) //把内容添加到li节点 oUl.appendChild(oLi) //再把创建的li节点，添加到ul下，默认排在最后 oDiv=document.createElement('div') //创建div节点 var node1=document.createTextNode("tab2"); //创建节点内容 oDiv.appendChild(node1) //把内容添加到新建的div节点 oTab.insertBefore(oDiv,oUl) //把创建的div添加到tab下，位置在ul之前 //oTab.removeChild(oDiv) //删除新建的div节点 } </script> <body> <div id="tab"> <div id="div-tab">tab1</div> <ul > <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> </html>
