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>效果图
js中dom基础及操作dom
原文地址：https://www.cnblogs.com/superCwen/p/9853329.html