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

　　

　　

?