DOM概览
文档对象模型是表示和操作HTML和XML文档内容的基础API。
Document和Element是两个重要的DOM类。
commit节点代表HTML或XML的注释。
选取文档元素
为了操作文档中的元素，必须通过某种方式获得或选取这些引用文档元素的Element对象。
查询文档的一个或多个元素的方法：
- 用指定的id属性；
- 用指定的name属性；
- 用指定的标签名字；
- 用指定的CSS类；
- 匹配指定的CSS选择器。
通过ID选取元素
可以用Document对象的getElementByID()方法选取一个基于唯一id的元素。
<code>var section1 = dosument.getElementById("section1");</code>
如果需要通过ID查询多个元素，那么getElements()函数非常有用。
通过名字选取元素
HTML的name属性最初打算为表单元素分配名字，在表单数据提交到服务器时使用该属性的值。
基于name属性的值选取HTML元素，可以使用Document对象的getElementsByName()方法,返回一个NodeList对象。
<code>var radiobuttons = document.getElementsByName("favorite_color");</code>
通过标签名选取元素
Document对象的getElementsByTagName()方法可用来选取指定类型的所有HTML和XML元素,返回一个NodeList对象。
<code>var spans = document.getElementsByTagName("p");</code>
上述代码在文档中获得包含所有<span>元素的只读的类数组对象。
Document类的documentElement属性指代文档的根元素，在HTML文档中，它总是指代<html>元素。
通过CSS类选取元素
HTML元素的class属性值是一个以空格隔开的列表。
HTML定义了getElementByClassName()方法，它基于class属性值中的标识符来选取成组的文档元素，它的返回值是一个NodeList对象，包含文档或元素所有匹配的后代节点。
通过CSS选择器选取元素
选择器用来描述文档中的若干或多组元素。
文档结构和遍历
文档从概念上可以看做是一颗节点对象树。
作为节点树的文档
Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。
作为元素树的文档
将文档看做是element对象树。
子元素的数量，返回的值和children.length值相等。
属性
HTML属性作为Element的属性
表示HTML文档元素的HTMLElement对象定义了读/写属性，他们映射了元素的HTML属性。
特定的Element子类型为其元素定义了特定的属性，例如查询一张图片的URL，可以使用表示img元素的HTMLElement对象的src属性：
<code>
var image = document.getElementById("myimage");
var imgurl = image.src;
image.id === "myimage";
</code>
有些HTML属性名在JavaScript中是保留字。对于这些属性，一般的规则是为属性名加前缀"html"。例如HTML的for属性，在JS中变为htmlfor属性。
而"class"在JS中变成"className"。
获取和设置非标准的HTML属性
Element类型定义了getAttribute()和setAttribute()方法来查询和设置非标准的HTML属性，也可以用来查询和设置XML文档中元素上的属性。
<code>
var image = document.images[0];
var width = parseInt(image.getAttribute("WIDTH"));
image.setAttribute("class","thumbnail");
</code>
hasAttribute()和removeAttribute()用来检测命名属性是否存在和完全删除属性。
数据集属性
在HTML5文档中，任意以“data-”为前缀的额小写的属性名字都是合法的。
HTML5在Element对象上定义了dataset属性，该属性指代一个对象，它的各个属性对应于去掉前缀的data-属性。
<code>dataset.x =========== data-x
data-jquery-test =========== dataset.jqueryTest</code>
作为Attr节点的属性
Node类型定义了Attributes属性，针对非Element对象的任何节点，该属性为null。
对于Element对象，Attributes属性是只读的类数组对象，它代表元素的所有属性。
<code>document.body.attributes[0]
document.body.attributes.bgcolor</code>
当索引Attributes对象时得到的是Attr对象，Attr的name和value属性返回该属性的名字和值。
元素的内容
读取Element的innerHTML属性作为字符串标记返回那个元素的内容。
作为纯文本的元素内容
有时需要查询纯文本形式的元素内容，或者在文档中插入纯文本，标准的方法就是用Node的textContent属性来实现：
<code>
var para = document.getElementsByTagName("p")[0];
var text = para.textContent;
para.textContent = "Hello World!";
</code>
textContent属性在除了IE浏览器中都支持，在IE中，可以用Element的innerText属性来代替。
textContent属性就是将指定元素的所有后代Text节点简单地串联在一起。
innerText没有一个明确指定的行为，innerText不返回<script>元素的内容。
作为Text节点的元素内容
另一种方法处理元素的内容是当做一个子节点列表，每个子节点可能有它自己的一组子节点。当考虑元素的内容时，通常感兴趣的是它的Text节点。
创建、插入和删除节点
Document类型定义了创建Element和Text对象的方法，Node类型定义了在节点树中插入、删除和替换的方法。
创建节点
- 创建新的Element节点可以使用Document对象的createElement()方法。给方法传递元素的标签名：
<code>
var newnode = document.createTextNode("text node content");
</code> - 另一种创建新文档节点的方法是复制已存在的节点，每一个节点有一个cloneNode()方法来返回该结点的一个全新副本。
给方法传递参数true能够递归的赋值所有的后代节点，传递false会进行浅复制。
插入节点
appendChild()或insertBefore()可以将新的节点插入到文档中。
- appendChild()是在需要插入的Element节点上调用的，他插入指定的节点使其成为那个节点的最后一个子节点。
- insertBefore()是在新节点的父节点上调用，方法的第二个参数必须是该父节点的子节点，如果参数为null，则和appendChild()方法一样，将节点插入在最后。
如果调用appendChild()和insertBefore()将已存在文档中的一个节点在此插入，那个节点将自动从它当前的位置删除并在新的位置重新插入。
删除和替换节点
- removeChild()方法是从文档树中删除一个节点。该方法是在待删除节点的父节点上使用，并将需要删除的子节点作为方法参数传递给它。
例如，在文档中删除m节点，代码为:
<code>n.parentNode.removeChild(n);</code> - replaceChild()方法删除一个子节点并用一个新的节点取代它。在父节点上调用它，第一个参数是新节点，第二个参数是需要代替的结点。
例如，用一个文本字符串来替换节点n,代码为:
<code>n.parentNode.replaceChild(document.createTextNode("[REDACTED]"),n);</code>
使用DocumentFragment
DocumentFragment是一种特殊的Node，它作为其他节点的一个临时容器。像这样创建一个DocumentFragment:
<code>
var frag = docuemnt.createDocumentFragment();
</code>
它的parentNode总是为null。
它的特点是使得一组节点被当做一个结点看待：如果给appendChild()、insertBefore()、replaceChild()传递一个DocumentFragment，其实是将该文档片段的所有子节插入到文档中，而非片段本身。
文档和元素的集合形状和滚动
文档坐标和视口坐标
- 查询窗口滚动条的位置
scrollLeft 、scrollTop - 查询窗口的视口尺寸
clientWidth 、clientHeight(他们对于i、code、span等内联元素返回值为0)
查询元素的几何尺寸
判定一个元素的尺寸和位置最简单的方法是调用getBoundingClientRect()方法。没有参数，返回一个由left、right、top和bottom属性的对象。
<code>
var box = e.getBoundingClientRect();
var offsets = getScrollOffsets();
var x= box.left + offsets.x;
var y = box.top + offsets.y;
</code>
返回height和width属性：
<code>
var box = e.getBoundingClientRect();
var w = box.width || (box.right-box.left);
var h = box.height || (box.bottom - box.top);
</code>
判定元素在某点
用Document对象的elementFromPoint()方法来判定元素在某个点。
传递x和y坐标，返回一个在指定位置的一个元素，如果指示的点在视口以外，elementFromPoint()返回Null.
滚动
Window对象的scroll()方法接收一个点的x和y坐标，并作为滚动条的偏移量设置它们。
<code>
var documentHeight = document.documentElement.offsetHeight;
var viewportHeight = window.innerHeight;
window.scrollTo(0,documentHeight-viewportHeight);
</code>
关于元素尺寸、位置和溢出的更多信息
offsetParent属性指定offsetLeft和offsetTOP属性所相对的额父元素，如果offsetParent为null，这些属性都是文档坐标。
HTML表单
HTML表单元素
选取表单和表单元素
表单和他们所包含的元素可以用如getElementById()和getElementsByTagName()等方法从文档中来选取：
<code>
var fields = document.getElementById("address").getElementsByTagName("input");
</code>
表单和元素的属性
elements[]数组时Form对象中最有趣的属性。
- action、encoding、method和target属性直接对应于<form>元素的action、encoding、method和target等HTML属性。
- Form支持submit()和reset()方法来提交和重置表单。
表单和元素的事件处理程序
每个Form元素都有一个onsubmit事件处理程序来侦测表单提交，还有一个onreset事件处理程序来侦测表单重置。
- <i>onsubmint事件处理程序只能通过单击"提交"按钮来触发。在表单提交前调用，通过返回false能够取消提交动作。</i>
- <i>onreset事件处理程序在表单重置之前调用，通过返回false能够阻止表单元素被重置，并且只能通过单击“重置”按钮被触发”。</i>
按钮
按钮本身没有默认的行为，除非他有onclick事件处理程序。
- 以<inout>元素定义的按钮会将value属性值以纯文本显示。
- 以<button>元素定义的按钮会将元素的一切内容显示出来。
开关按钮
复选框和单选元素就是开关按钮。
文本域
value属性表示用户输入的文本，通过设置该属性值可以显式地指定应该再输入域中显式的文本。
在h5中，placeholder属性制定了用户输入前在输入域中显示的提示信息：
<code>
Arrival Stae:<input type = "text" name = "arrival" placeholder = "yyyy-mm-dd">
</code>
文本输入域的onchange事件处理程序是在用户输入新的文本或编辑已存在的文本时触发，他标明用户完成了编辑并将焦点移出了文本域。
选择框和选项元素
Select元素表示用户可以做出选择的一组选项。当其size大于1时，它将显示为列表中的选项。
- 如果Select元素有mutiple属性，也就是Select对象的type属性值为"select-mutipe"，那就允许用户选取多个选项
- 否则，只能选取一个选项，它的type 属性值为"select-one".
其他文档属性
Document的属性
- cookie
允许JavaScript程序读、写HTTP cookie的特殊的属性。 - domain
该属性允许当Web页面之间交互时，相同域名下相互信任的Web服务器之间协作放宽同源策略安全限制。 - lastModified
包含文档修改时间的字符串 - location
与Window对象的location属性引用同一个Location对象。 - referrer
表示浏览器导航到当前连接的上一个文档。 - URL
文档的URL，只读字符串而不是Location对象。
Document.write()方法
document.write()会将其字符串参数连接起来，然后将结果字符串插入到文档中调用它的脚本元素的位置。当脚本执行结束，浏览器解析生成的输出并显示它。
只有在解析文档时才能使用write()方法输出HTML到当前文档中。在设置了defer和async属性的脚本中不要使用document.write()。
还可以使用write()方法在其他窗口或框架页中来创建整个全新文档。
Document.writeln()方法在参数的输出之后追加一个换行符。
查询选取的文本
标准的window.getSelection()方法返回一个Selection对象，后者描述了当前选取的一系列一个或多个Range对象。toString()方法是Selection对象中的特性，返回选取的纯文本内容。但是无法返回表单元素中的文本。
IE浏览器中使用createRange()方法返回IE特有的TextRange对象，它的text属性包含了选取的文本，可以返回文档中任意地方选取的文本。
可编辑的内容
- 设置任何标签的HTML contenteditable属性
- 设置对应元素的JavaScript contenteditable属性
是元素的内容变成可编辑，当用户单击该元素的内容时就会出现插入光标，用户敲击键盘就可以插入其中。 - 将Document对象的designMode属性设置为字符串"on"使得整个文档可编辑。
