JavaScript系列之DOM

querySelectorAll()返回的NodeList對象並非實時的。
querySelector()返回第一個匹配的元素。若是沒有匹配的元素就返回null。

HTML屬性名不區分大小寫，但JavaScript屬性名則大小寫敏感。

屬性操做方法：setAttribute,getAttribute,hasAttribute,removeAttribut

dataset屬性（element.dataset.camalCaseName）

attributes對象也是實時的（NamedNodeMap）。NamedNodeMap對象是經過node.attributes屬性獲取，獲取到由該元素的全部屬性構成的僞數組對象。

做爲純文本的元素內容，標準的方法是用node的textContent屬性，innerText(IE)

插入節點appendChild,insertBefore
若是調用的appendChild,insertBefore將已存在文檔中的一個節點再次插入，那個節點將自動從它當前的位置刪除並在新的位置從新插入。

刪除和替換節點removeChild，replaceChild

DocumentFragment是一種特殊的Node，它做爲其餘節點的一個臨時的容器。能夠使用createDocumentFragment方法建立一個DocumentFragment

getElementById
getElementsByName,返回nodeList
getElementsByTagName,返回nodeList
getElementsByClassName,返回nodeList(多個class用空格分開)

document屬性：documentElement，body,head

parentNode
childNodes
firstChild
lastChild
nextSibling
previousSibling

文檔座標比視口標準更加基礎，而且在用戶滾動時它們不會發生變化。
查詢窗口滾動條的位置 pageXOffset,pageYOffset(非IE,window)；scrollTop,scrollLeft(IE,document.documentElement)
查詢窗口的視口尺寸 innerWidth，innerHeight(非IE,window); clientWidth,clientHeight(IE,document.documentElement)

getBoundingClientRect()返回元素在視口座標中的位置。
getClientRects()返回類數組對象(內聯元素用這個查)

scrollBy(),scrollTo()

scrollIntoView應用在元素上。其與設置window.location.hash爲一個命名錨點的名字後瀏覽器產生的行爲相似。

offsetWidth,offsetHeiight=padding+border+content（元素在屏幕上佔據的空間）
offsetLeft,offsetRight 對於已定位元素的後代元素和一些其餘元素（如表格元素），這些屬性返回的座標是相對於祖先元素的而非文檔。
offsetParent屬性指定這些屬性所相對的父元素。若是offsetParent爲null，這些屬性都是文檔座標。

clientWidth,clientHeight=padding+content(不包含滾動條，對於行內元素老是返回0)
clientLeft，clientTop=border+scroll(對於行內元素老是返回0)

scrollWidth,scrollHeight=padding+content+overflow
scrollLeft,scrollRight指定元素的滾動條位置

表單elements屬性返回的是elements[]數組，若是要明確地選取一個表單元素，能夠索引表單對象的elements屬性。
onsubmit事件處理程序只能經過單擊「提交」按鈕來觸發。直接調用表單的submit()方法不觸發onsubmit事件處理程序。
表單提交前調用onsubmit程序，它經過返回false可以取消提交動做。
onreset事件處理程序和onsubmit相似。

只有在解析文檔時才能使用write()方法輸出HTML到當前文檔中。

查詢選取的文本

window.getSelection().toString()沒法返回表單元素input或textarea內部選中的文本（HTML5標準API）
document.selection.createRange().text能夠返回文檔中任意地方選取的文本
element.selectionStart,element.selectionEnd（從文本輸入域或textarea元素中獲取選取的文本）

全部瀏覽器都支持contenteditable和designMode屬性。

document.queryCommandEnabled()來查詢當前所使用的命令
document.queryCommandSupport()
document.queryCommandState()