标签：hid ntb ul li 父节点 内容 长度 height load width
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>
效果图
标签：hid ntb ul li 父节点 内容 长度 height load width
原文地址：https://www.cnblogs.com/superCwen/p/9853329.html
