js中dom基礎及操作dom
摘要：
dom基礎認識
1.dom節點
1）children,獲取的是所有的孩子節點，獲取的是陣列
2）parentNode,獲取的是父節點，獲取的是物件
2.dom操作方法
1）appendChild(),把節點新增到父節點後面，新增的節點是排在最後
2）insertBefo...
dom基礎認識
1.dom節點
1）children,獲取的是所有的孩子節點，獲取的是陣列
2）parentNode,獲取的是父節點，獲取的是物件
2.dom操作方法
1）appendChild(),把節點新增到父節點後面，新增的節點是排在最後
2）insertBefore()，把節點新增到父節點的哪個位置之前
3）removeChild(),刪除節點
下面一一通過程式碼來講解，更加容易理解它們的含義
<html>
<head>
<title></title>
</head>
<style>
*{
margin:0;
padding:0;
}
#tab{
margin-left:-3px;
float:left;
width:60px;
//height:20px;
background:#ccc;
text-align:center;
}
#tab #div-tab{
border:1px solid #999;
}
#tab ul{
overflow:hidden;
background:blue;
}
#tab ul li{
list-style:none;
}
</style>
<script>
window.onload=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>
效果圖
