dom元素

 dom tree
  当浏览器加载HTML页面的时候，首先就是DOM结构的计算，计算出来的DOM结构就是DOM树
  （把页面中的HTML标签像树状结构一样，分析出之间的层级关系）
  DOM 树描述了标签和标签之间的关系（节点间的关系），我们只要知道任何一个标签
  都可以依据DOM中提供的属性和方法，获取到页面中任意一个标签或者节点
 
  获取在Js中获取dom元素的方法
 
  ··getElementBId
 通过元素ID获取指定的元素对象，使用的时候都是 document.getElementById 此处的DOCUMENT是限定了获取元素的范围
 1.getElementBId 上下文只能是document  因为严格意义上，一个页面中的ID是不能重复的，浏览器规定 在整个文档中只可以获取这个唯一的id
  2. 如果页面中的ID重复了 我们基于这个方法 只能获取到第一个元素， 后面相同的ID元素无法获取
  3.在IE 6 -7浏览器中，会把表单元素（input...）的name属性值当作ID来使用（建议：以后使用表单元素的时候，避免name和id的值有冲突）
 
 ·· getElementsByTagName
 
  [context].getElementsByTagName在指定的上下文中，根据标签名获取到一组标签集合（HTMLCollection）
  1.获取的元素集合是一个类数组（不能直接的使用数组中的方法）
  2.它会把当前上下文中，子子孙孙（后代）层级内的标签都获取到。
  3.基于这个方法获取到的结果永远都是一个集合（不管里面是否有内容，也不管有几项，它是一个容器或者集合），如果想操作集合中具体的某一项，需要基于获取索引获取到才可以。
 
  ··getElementsByClassName
  [context].getElementsByClassName() 在指定的上下文中，基于元素的样式类名
  class='xxx'获取到一组元素集合
  1.真是项目中，我们经常是基于样式类来给元素设置样式， IE6-8不兼容。
 
  ··getElementsByName
  document.getElementsByName() 它的上下文也只能是document 在整个文档中，基于元素的name属性值获取一组节点集合（也是一个类数组）
 1.在IE浏览器中（IE9及以下版本），只对表单元素的name属性起作用
 
 
  ··querySelector
 [context].querySelector 在指定的上下文中 基于选择器（类似于css选择器） 获取到指定的元素对象（获取的是一个元素，哪怕选择器匹配了多个，我们只获取第一个）
 
  querySelectorAll
 基于querySelector 我们获取选择器匹配到所有的元素，结果是一个元素集合
  querySelector/querySelectorAll 不兼容IE6-8的浏览器（不考虑兼容的情况下，我们能用Byid或者其他方式获取，也尽量不要用这两个方法，这两个方法性能消耗较大）
 
  document.head
  获取head元素对象
 
  document.body
  获取body 元素对象
 
 document.documentElement
  获取HTML元素对象
 
//获取浏览器一屏幕的宽度和高度（兼容所有浏览器）

document.documentElement.clientWidth||document.body.clientWidth

document.documentElement.clientHeight||document.body.clientHeight