JS的DOM操作

1.DOM节点

（1）node.offsetParent最近的有定位属性的祖先节点

　　   如果祖先节点都没有定位，那么默认为body

（2）node.offsetLeft/node.offsetTop 距离最近的有定位属性的祖先节点的距离

　　  node.offsetLeft左外边框到定位父级的左内边框的距离

　　  node.offsetTop上外边框到定位父级的上内边框的距离

（3）node.getBoundingClientRect( ) 获取元素的盒模型信息

　　  返回值为一个对象 left top bottom right width height 相对于浏览器可视区域

　　　注意：获取的值会根据滚动条滚动的距离变换的

　　  node.getBoundingClientRect().left  

2.元素属性操作

（1）获取元素行间的属性

　　elem.getAttribute('key');

　　特点：可以操作行间自定义的属性、可以获取src、href等的相对地址

（2）设置元素的行间属性

　　elem.setAttribute("key","value");

（3）删除元素的行间属性

　　elem.removeAttribute("key");

3.可视区的宽/高

document.documentElement.clientWidth

document.documentElement.clientHeight

4.元素的宽/高

都加上padding值

node.offsetWidth/node.offsetHeight  计算边框

node.clientWidth/node.clientHeight  不计算边框

5.元素的操作

（1）document.createElement(tagName) 通过标签名的形式创建一个元素

（2）parentNode.appendChild(childNode) 往一个节点里面添加一个子节点，注意是添加在最后

（3）parentNode.insertBefore(childNode1,childNode2)

　　  往一个节点的指定子节点的前面插入一个节点

　　  如上：childNode1插入到childNode2前面

　　  特性：如果第二个参数为假的，那么会将某个元素添加到父元素的末位；

（4）parentNode.removeChild(childNodes)

　　  从一个节点中删除指定的子节点

　　 注意：如果指定的子节点没有，会报错

（5）parentNode.replaceChild(node,childNodes)

　　  node用来替换的节点，childNodes被替换的子节点，两个参数都必须写

（6）node.cloneNode(boolean)

　　  克隆一个节点 ，元素事件是不会被克隆的，参数不传默认为flase

         true:克隆元素和元素包含的子孙节点

         flase:克隆元素但不包含元素的子孙节点

6.表格的操作

（1）table.tHead--获取表格头部

（2）table.tFoot--获取表格底部

（3）table.tBodies--获取表格主体 获取到的是一个集合

（4）tBodies[n].rows/tHead.rows/tFoot.rows表格的行，就是tr

（5）rows[n].cells单元格，就是td