title: javascript（DOM常用方法）
date: 2017-06-01 10:31:19
tags: javascript筆記
DOM操作的一些常用屬性和方法
元素節(jié)點(diǎn)的nodeType是1
屬性節(jié)點(diǎn)的nodeType是2
文本節(jié)點(diǎn)的nodeType是3
節(jié)點(diǎn)的獲取
childNodes：獲取某個(gè)元素下的所有子節(jié)點(diǎn)，包含文本節(jié)點(diǎn)和元素節(jié)點(diǎn)。
children：獲取某個(gè)元素下的所有元素子節(jié)點(diǎn)。
nextElementSibling：獲取元素的下一個(gè)兄弟元素節(jié)點(diǎn)。
previousElementSibling：獲取元素的上一個(gè)兄弟元素節(jié)點(diǎn)。
firstElementChild：獲取元素下的第一個(gè)元素子節(jié)點(diǎn)。
lastElementChild：獲取元素下的第一個(gè)元素子節(jié)點(diǎn)。
parentNode：獲取元素的父節(jié)點(diǎn)。
nodeValue：查看節(jié)點(diǎn)的屬性值。
nodeName：查看節(jié)點(diǎn)的屬性名。
nodeType：查看節(jié)點(diǎn)的類型。
屬性的獲取和設(shè)置
offsetParent：獲取最近有定位屬性的祖先節(jié)點(diǎn)。如果沒有直接獲取body。
offsetLeft：左外邊框到有定位的最近的父級元素的內(nèi)邊框的距離。不帶px單位。父級沒有帶定位的就是到body的距離。
offsetTop：上外邊框到有定位的最近的父級元素的內(nèi)邊框的距離。不帶px單位。父級沒有帶定位的就是到body的距離。
getAttribute()：獲取元素的行內(nèi)設(shè)置的屬性值。參數(shù)是屬性名。
setAttribute()：設(shè)置元素的行內(nèi)設(shè)置的屬性值。參數(shù)是屬性名和屬性值。
removeAttribute()：刪除元素的行內(nèi)設(shè)置的屬性值。參數(shù)是屬性名。
getBoundingClientRect()： 當(dāng)前元素距離body的四個(gè)方向的距離和寬高的對象。獲取的值會(huì)隨著頁面滾動(dòng)位置而改變。值是不帶單位的。
clientWidth：獲取元素不計(jì)算邊框的寬度。document.documentElement.clientWidth是瀏覽器窗口可是區(qū)域的寬度。
clientHeight：獲取元素不計(jì)算邊框的高度。document.documentElement.clientHeight是瀏覽器窗口可是區(qū)域的高度。
offsetWidth：獲取元素計(jì)算邊框的寬度。
offsetHeight：獲取元素計(jì)算邊框的高度。
操作節(jié)點(diǎn)
document.createElement()：創(chuàng)建一個(gè)元素節(jié)點(diǎn)，參數(shù)是元素的名稱，字符串格式。
appendChild()：將一個(gè)元素節(jié)點(diǎn)添加到另一個(gè)元素節(jié)點(diǎn)的最后，格式為父節(jié)點(diǎn).appendChild(要添加的節(jié)點(diǎn))。
insertBefore()：將一個(gè)元素節(jié)點(diǎn)添加到一個(gè)元素節(jié)點(diǎn)的指定子節(jié)點(diǎn)的前面。格式為父節(jié)點(diǎn).insertBefore(要添加的節(jié)點(diǎn),添加到這個(gè)節(jié)點(diǎn)之前)，假如第二個(gè)參數(shù)是不存在的，節(jié)點(diǎn)將會(huì)添加到父節(jié)點(diǎn)的最后。
removeChild()：刪除一個(gè)指定的元素子節(jié)點(diǎn)，如果指定的節(jié)點(diǎn)找不到會(huì)報(bào)錯(cuò)。格式為父節(jié)點(diǎn).removeChild(要?jiǎng)h除的節(jié)點(diǎn))。
replaceChild()：替換一個(gè)元素節(jié)點(diǎn)，格式是父節(jié)點(diǎn).replaceChild(要添加的節(jié)點(diǎn),被替換的節(jié)點(diǎn))。
cloneNode()：克隆一個(gè)元素節(jié)點(diǎn)，默認(rèn)只會(huì)克隆節(jié)點(diǎn)本身，不會(huì)克隆它的子節(jié)點(diǎn)，如果要將這個(gè)節(jié)點(diǎn)下的所有子節(jié)點(diǎn)也都克隆需要傳參數(shù)true，格式為要克隆的節(jié)點(diǎn).cloneNode(true)。
appendChild()、insertBefore()、replaceChild()在操作一個(gè)已有元素時(shí)，是將已有元素移動(dòng)，而不是復(fù)制一份進(jìn)行操作。
操作表格
對于表格的操作javascript提供了一些簡單的獲取方式。
假設(shè)table是已經(jīng)獲取到的表格元素。
table.tHead：獲取表格頭部。
table.tFoot：獲取表格底部。
table.tBodies：獲取表格主體。
table.tBodiesn.rows[n]：獲取表格的行，就是tr。
table.tBodiesn.rows[n].cells[n]：獲取單元格，就是td。
