JS中的盒子模型属性

一、操作DOM的属性和方法
【获取元素或者元素集合】
getElementById
–>上下文只能是document（只有document这个实例的原型上才能找到这个方法，其他实例找不到）
–> ID重复了会获取第一个
–> IE 6 -7 中会把表单的元素的name当做 id使用
getElementsByTagName
–> 获取当前上下文中，所有子子孙孙中标签名为 “xxx”的元素
getElementsByClassName
–> IE 6-8 中不兼容
getElementsByName
–> 在IE浏览器中只对表单的元素的name起作用
querySelector
querySelectorAll
–> 不兼容IE6-8
–> 没有DOM映射
document.documentElement
document.body
document.head
…

【描述节点和节点之间的属性】

    元素节点    1    大写标签名    null
    文本节点    3    #text            文本内容
    注释节点    8    #comment   注释内容
    文档节点    9    #document   null

    children:所有元素子节点（IE6-8中会把注释当做元素节点）
    parentNode
    previousSibling / previousElementSibling
    nextSibling
    firstChild
    lastChild

【动态操作DOM】
    createElement
    createDocumentFragment
    appendChild
    insertBefore
    cloneNode( true / false )
    removeChild
    set/get/removeAttribute

【散】
    xxx.style.xxx = xxx 设置行内样式
        --> xxx.style.xxx 获取行内样式

    xxx.className = 'xxx'

    xxx.onclick = function...
    ...

二、JS盒子模型属性 --> 在JS中通过相关的属性可以获取（设置）元素的样式信息，这些属性就是盒子模型属性（基本上都是关于样式的）
【client】
top / left /width / height
1.clientWidth & clientHeight : 获取当前元素可视区域的宽高（内容的宽高 + 左右/上下 padding）
–> 和内容是否有溢出无关（和是否设置了overfolw：hidden也无关），就是我们自己设定的内容的宽高+padding。
–> 获取当前页面一屏幕（可视区域）的宽度和高度
document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight
–> clientTop & clientLeft : 获取（上/左）边框的宽度
–> offsetWidth & offsetHeight : 在client的基础上加上border（和内容是否溢出无关）
–> scrollWidth & scrollHeight : 真实内容的宽高（不一定是自己设定的值，因为内容可能会存在溢出，有内容溢出的情况下，需要把溢出的内容也算上）+ 左/上 padding，而且是一个约等于的值（没有内容溢出和client一样），在不同浏览器中，或者是否设置了overflow : hidden都会对最后的结果产生影响，所以这个值仅仅做参考，属于约等于的值。
【offset】
offsetParent : 当前盒子的父级参照物
offsetTop / offsetLeft : 获取当前盒子距离其父级参照物的偏移量（上偏移/左偏移）
–> “参照物”：同一个平面中，元素的父级参照物和结构没有必然联系，默认他们的父级参照物都是BODY（当前平面最外层的盒子），BODY的参照物是Null
–> “参照物可以改变”：构建出不同平面即可（使用zindex，但是izhege属性只对定位有作用），所以改变元素的定位，可以改变其父级参照物。
【scoll】
scrollTop / scrollLeft : 滚动条卷去的宽度或者高度
最小卷去值 ： 0
最大卷去值 ：真实页面的高度 - 一屏幕的高度 document.documentElement.scrollHeight - document.documentElement.clientHeight

    在JS盒子模型的13个属性中，只有scrollTop / scrollLeft 是“可读写”属性，其余都是“只读”属性。

三、通过JS盒模型属性获取值的特点
1.获取的都是数字不带单位
2.获取的都是整数，不会出现小数（一般都会四舍五入，尤其是获取的偏移量）
3.获取的结果都是复合样式值（好几个元素的样式组合在一起的值），如果只想获取单一样式值（例如：只想获取padding），我们的盒子模型属性就操作不了了（这不能说没有用，真实项目中，有时候我们就是需要获取组合的值来完成一些操作）