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