DOM基础：
子节点：chrldNodes父节点：parentNode节点类型：nodetypeoffsetParent基本概念
子节点：通俗的说就算一个父元素下面包着一个子元素。相当于一种“家族的学院关系图”。。例如：无序列表：ul下面的li 其中li相对于ul来说就是它的子节点
<script type="text/javascript">window.onload=function(){var oUl=document.getElementById('ul');alert(oUl.chrldNodes.length) //输出7，原因是chrildNodes就是将文本节点和元素节点两部分相加起来//解决上述问题：我们可以通过nodetype来判断获取元素节点，改变其样式stylefor(var i=0;var i<oUl.chrldNodes.length;i++){alert(oUl..chrldNodes[i].nodetype); //循环判断每个节点，其中当==3时，为文本节点，==1时为元素节点if(oUl.length.nodetype==1){oUl..chrldNodes[i].style.background='red';}}}</script>
*上部分javascript代码获取元素节点样式过于复杂，要多一个判断的步骤，增加了代码量
*
我们可以通过children直接获取元素节点，例如：
<script type="text/javascript">window.onload=function(){var oUl=document.getElementById('ul1');alert(oUl.children[i].length) //输出3，也就是有三个 li元素节点for(var i=0;i<oUl.children.length;i++){oUl.children[i].style.background='red'; //这样一来我们就可以直接获取或者改变子元素的样式；}}</script>
<ul id="ul1"><li></li><li></li><li></li></ul>
注：其中chrldNodes，childre可以理解为一个数组，可以通过length查找元素个数
父节点：parentNode
举例说明怎么样获取父节点：点击每个超链接a后，使其li消失
<script type="text/javascript">var aA=documentElementsTagName('a'); //将每个a元素获取出来for(var i=0;i<aA.length;i++){aA.onclick=function(){aA.parentNodes.style.display='none'; //获取a的父节点元素li}}</script>
<ul><li>aaaa<a href="javascript:;">a</a></li><li>bbbb<a href="javascript:;">b</a></li><li>cccc<a href="javascript:;">c</a></li><li>dddd<a href="javascript:;">d</a></li></ul>
offsetParent：可以获取一个元素用来定位的那个父级元素
例如：有两个div1和div2，其中div1是div2的父元素。这个时候，当我们div1没有任何定位，div2就会向上寻找一个属于他的父级元素也就是最外层的body
<style>#div1{width:200px;height:200px;margin:100px;background-color:#ccc;position:relative; //相对定位}#div2{width:100px;height:100px;background-color:red;position:absolute; //绝对定位left:50px;top:50px;}</style>
<script type="text/javacript">window.onload=function(){var oDiv2=documen.getElementById('div2');alert(oDiv2.offsetParent); //这个时候我们获取的是div2 的元素}</script>
<body><div id="div1"><div id="div2"></div></div></body>
注：如果在CSS3里面去掉div1的相对定位position:relative，那么div2输出的就是body了。
