DOM

DOM

文档对象模型 document object model 赋予开发者操作页面的接口

常见的dom节点类型 nodeType

元素节点 div ul li 等元素 nodeType 为 1
document 的 nodeType 为 9
文本节点 （可能为空格或者回车也是文本节点） nodeType 为 3
注释节点 nodeType 为 8
属性节点 通过ele.attributes属性 nodeType 为2

                                          nodeValue  为属性的值    nodeName为属性名

获取到某个节点的所有子节点

ele.childsNodes属性 会返回一个数组 代表的是所有的子节点

children   属性   会返回一个数组  代表的是这个元素里边所有的元素节点

获取元素的父节点

ele.parentNode 得到某个元素的父节点
document-> html->body->ele

获取兄弟节点

ele.nextElementSibling 得到他的最近的下一个兄弟节点（一个兄弟节点）

                     依次使用这个属性就会得到后面的所有的兄弟节点

ele.previousElementSibling 得到最近的上一个兄弟节点（一个兄弟节点）

                     依次使用这个属性就会得到前面的所有的兄弟节点

得到最后一个子节点和第一个子节点

parentNode.lastElementChild 得到父元素中最后一个子节点
parentNode.firstElementChild 得到父元素中第一个子节点

得到节点的宽度和高度

offsetParent 得到最近的有定位属性的祖先节点 如果没有找到的话 就会找到body
offsetLeft ele的外边框到有定位父级的内边框的距离
js不能够通过ele.style.width 来得到元素的宽度 而不是针对窗口
通过以下的方式可以得到ele的样式

   var container=document.getElementById("container")
      console.log(getComputedStyle(container))

只有offsetLeft offsetTop但是没有offsetRight、offsetBottom
用offsetLeft来模拟元素到窗口左边的距离

 while(elm){   //得到元素离窗口的左边距
          left+=elm.offsetLeft;
          elm=elm.offsetParent
          console.log(left)
      }