JavaScript系列之DOM

querySelectorAll()返回的NodeList对象并不是实时的。
querySelector()返回第一个匹配的元素。如果没有匹配的元素就返回null。

HTML属性名不区分大小写，但JavaScript属性名则大小写敏感。

属性操作方法：setAttribute,getAttribute,hasAttribute,removeAttribut

dataset属性（elment.dataset.camalCaseName）

attributes对象也是实时的（NamedNodeMap）。NamedNodeMap对象是通过node.attributes属性获取，获取到由该元素的所有属性构成的伪数组对象。

作为纯文本的元素内容，标准的方法是用node的textContent属性，innerText(IE)

插入节点appendChild,insertBefore
如果调用的appendChild,insertBefore将已存在文档中的一个节点再次插入，那个节点将自动从它当前的位置删除并在新的位置重新插入。

删除和替换节点removeChild，replaceChild

DocumentFragment是一种特殊的Node，它作为其他节点的一个临时的容器。可以使用createDocumentFragment方法创建一个DocumentFragment

getElmentById
getElementsByName,返回nodeList
getElmentsByTagName,返回nodeList
getElmentsByClassName,返回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()