脚本化文档

作者: 亮亮叔家的小笔笔 | 来源:发表于2017-07-20 10:28 被阅读0次

DOM概览

文档对象模型是表示和操作HTML和XML文档内容的基础API。

HTML文档的树状表示.png

Document和Element是两个重要的DOM类。

文档结点的部分层次结构.png

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表单元素

HTML常用表单元素.png

选取表单和表单元素

表单和他们所包含的元素可以用如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"使得整个文档可编辑。